Eslint簡單使用與如何在VScode中配置

eslint可以自動檢測代碼錯誤，讓代碼風格統一，在團隊合作時尤爲重要。

    一.初始化npm:

npm init -y

   二.安裝eslint（這裏使用全局安裝）:

npm i eslint -g

  三.初始化eslint:

eslint --init

    初始化eslint後根目錄會生成一個.eslintrc.js的文件，我們可以通過這個文件配置eslint(後面會講如何配置）。接着我們在根目錄新建一個test.js文件，輸入以下內容:

console.log('eslint入門');

   然後用eslint執行這個文件： eslint test.js  ，接着你會發現報錯了：

   

    可以看到，console是不被允許的，如何配置console被允許呢？打開.eslintrc.js,輸入以下內容：

module.exports = {
    "env": {  //eslint使用的環境
        "browser": true,
        "es2020": true
    },
    "extends": "eslint:recommended", ////繼承一種或者多種規則,默認使用eslint推薦風格
    "rules": { //配置規則，重點
       "no-console": "off", //允許console
       "indent": ["error", 4] //縮進是四個空格
    }
};

    可以看到我們已經通過配置rules把no-console給關了，現在再運行eslint test.js就不會報錯了。rules裏面的 "indent": ["error", 4]是什麼意思呢？爲了實現更細粒化的配置，eslint運行我們給規則設立提醒程度：

規則的錯誤等級有三種：

• "off" 或者 0：關閉規則
•  "warn" 或者 1：打開規則，並且作爲一個警告（不影響代碼運行）
•  "error" 或者 2：打開規則，並且作爲一個錯誤（錯誤不解決，代碼無法運行

四.如何引入配置好的eslint:

    每次都要手動配置eslint豈不是很麻煩，事實上我們可以通過extends，實現eslint繼承,使用別人寫好的規則包（以eslint-config-開頭的npm包），如eslint-config-standard：

module.exports = {
    "extends": "standard", 
}

   其他常見規則：

"rules": {
        /**
        **這些規則與 JavaScript 代碼中可能的錯誤或邏輯錯誤有關
        **/
        "for-direction":"error",//強制 “for” 循環中更新子句的計數器朝着正確的方向移動
        "getter-return":"error",//強制在 getter 屬性中出現一個 return 語句
        "no-await-in-loop":"error",//禁止在循環中 出現 await
        "no-compare-neg-zer":"error",//禁止與 -0 進行比較
        "no-cond-assign":[//禁止在條件語句中出現賦值操作符
            "error",
            "always"
        ],
        "no-console":[//禁用 console
            "error"
//            { "allow": ["warn", "error"] }
        ],
        "no-constant-condition":"error",//禁止在條件中使用常量表達式
        "no-control-regex":"error",//禁止在正則表達式中使用控制字符
        "no-debugger":"error",//禁用 debugger
        "no-dupe-args":"error",//禁止在 function 定義中出現重複的參數
        "no-dupe-keys":"error",//禁止在對象字面量中出現重複的鍵
        "no-duplicate-case":"error",//禁止重複 case 標籤
        "no-empty":"error",//禁止空塊語句
        "no-empty-character-class":"error",//禁止在正則表達式中出現空字符集
        "no-ex-assign":"error",//禁止對 catch 子句中的異常重新賦值
        "no-extra-boolean-cast":"error",//禁止不必要的布爾類型轉換
        "no-extra-parens":"error",//禁止冗餘的括號
        "no-extra-semi":"error",//禁用不必要的分號
        "no-func-assign":"error",//禁止對 function 聲明重新賦值
        "no-inner-declarations":"error",//禁止在嵌套的語句塊中出現變量或 function 聲明
   
    }

   完整規則請參考：http://eslint.cn/docs/rules/

   最後再介紹下如何在vscode中配置eslint，實現便捷開發：

   1.安裝eslint插件

    

   2.打開左上角文件-首選項-設置,在設置中搜索eslint，點擊並翻頁到最下面，點擊setting.json進行配置：

插入以下配置文件：

    "editor.formatOnSave": false, //關閉每次保存的時候自動格式化js，不然可以和eslint衝突
    "eslint.autoFixOnSave": true, //  啓用保存時自動修復,默認只支持.js文件
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },
    ],

  然後編寫代碼，按ctrl+s後發現代碼自動修復了，爽的一匹，哈哈.