IntelliJ IDEA啟用Eslint儲存自動程式碼修復

周志壽發表於2019-02-15
IntelliJIdeaEsLint

前言

做開發已經有幾個年頭了，一直想寫些什麼，把自己成長旅程的點點滴滴記錄下來，卻因為各種原因中途擱淺。這次終於下定了決心！好好倒騰倒騰。但是話總得有個頭哇，古人云：工欲善其事，必先利其器，想想還是先從工具開始吧。

Eslint是什麼

ESLint 是一個語法規則和程式碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的程式碼。使用它可以避免低階錯誤和統一程式碼的風格。詳細學習建議直接去看官方文件，eslint的文件詳細易懂，沒有比看官方文件更好的學習方式了。

配置editorconfig

1、在專案根目錄下新建檔案.editorconfig檔案，並配置,想了解更多去看詳細文件。

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

複製程式碼

安裝並配置eslint

規範採用騰訊alloy團隊開源的AlloyTeam ESLint 規則。

1、eslint全域性安裝

npm install --save-dev eslint babel-eslint eslint-config-alloy
複製程式碼

2、建立.eslintrc配置檔案，並複製一下程式碼：

{
    "extends": [
        "eslint-config-alloy"
    ],
    "globals": {
        // 這裡填入你的專案需要的全域性變數
        // 這裡值為 false 表示這個全域性變數不允許被重新賦值，比如：
        //
        // jQuery: false,
        // $: false
    },
    "rules": {
        "quotes": [
            "error",
            "double",
            {
                "avoidEscape": true,
                "allowTemplateLiterals": true
            }
        ]
    }
}
複製程式碼

配置IntelliJ IDEA

Save Actions自動格式化程式碼

Save Actions是webstorm的一個外掛，主要用途就在編輯檔案後儲存的時候，進行格式化程式碼，這樣我們就不用手動去操作了。開啟setting -> plugins搜尋Save Actions，安裝重啟，搞定。

啟用Eslint時配置IDEA

1、啟用Eslint
開啟配置視窗，找到Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint，勾選最上面的Enable，如下圖

IntelliJ IDEA啟用Eslint儲存自動程式碼修復
2、webstorm匯入eslint的配置

匯入操作很簡單，只要在專案的.eslint.*檔案上右鍵，選擇Apply ESLint Code Style Rules就OK了。 這裡實現了js檔案遵守eslint的檢測規則，下一步根據eslint規則自動檢測修復javascript檔案。

3、設定快捷鍵

開啟設定 -> Keymap 搜尋 Fix ESLint Problems，雙擊配置快捷鍵，這裡使用的是Ctrl + S。 OK，搞定了，快快體驗一把！！注意：這裡與儲存檔案的快捷鍵衝突了，建議使用別的快捷鍵如Ctrl + Q

相關文章