IntelliJ IDEA啓用Eslint保存自動代碼修復

前言

---

作開發已經有幾個年頭了，一直想寫些什麼，把本身成長旅程的點點滴滴記錄下來，卻由於各類緣由中途擱淺。此次終於下定了決心！好好倒騰倒騰。可是話總得有個頭哇，古人云：工欲善其事，必先利其器，想一想仍是先從工具開始吧。

Eslint是什麼

---

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

配置editorconfig

---

一、在項目根目錄下新建文件.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 規則。

一、eslint全局安裝

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

二、建立.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

一、啓用Eslint
打開配置窗口，找到Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint，勾選最上面的Enable，以下圖

二、webstorm導入eslint的配置

導入操做很簡單，只要在項目的.eslint.*文件上右鍵，選擇Apply ESLint Code Style Rules就OK了。 這裏實現了js文件遵照eslint的檢測規則，下一步根據eslint規則自動檢測修復javascript文件。

三、設置快捷鍵

打開設置 -> Keymap 搜索 Fix ESLint Problems，雙擊配置快捷鍵，這裏使用的是Ctrl + S。 OK，搞定了，快快體驗一把！！注意：這裏與保存文件的快捷鍵衝突了，建議使用別的快捷鍵如Ctrl + Q