【eslint】配置eslint及vscode中eslint的配置

1.eslint配置

• eslint是完全支持自定義配置的代碼檢查工具，簡單兩個字：好用!
• npm i -D eslint eslint-plugin-vue babel-eslint
• 在項目中安裝相關依賴(以vue項目爲準)
• 根目錄下創建.eslintrc.js文件作爲eslint配置文件

module.exports = {
  root: true,
  env: {
		// 啓用 ES6 語法支持以及新的 ES6 全局變量或類型
		es6: true, 
		// Node.js 全局變量和 Node.js 作用域
		node: true, 
		// 瀏覽器全局變量
    	browser: true, 
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential"
  ],
  plugins: [
    "vue"
  ],
  rules: {
    /** style rules */
    // auto 數組開閉括號始終統一,要麼換行，要麼不換行
    "array-bracket-newline": [1, { "multiline": true }],
    // auto 數組內需要空格
    "array-bracket-spacing": ["error", "always", { 
      "singleValue": true,
      "objectsInArrays": false,
      "arraysInArrays": false
    }],
    // auto 大括號中不需要空格開始，空格結尾
    "block-spacing": [1, "never"],
    // auto 大括號與聲明語句同一行
    "brace-style": 2,
    // auto 禁止數組或對象中拖尾逗號
    "comma-dangle": [1, "never"],
    // auto 數組或對象中逗號後留一空格
    "comma-spacing": [1, { "before": false, "after": true }],
    // auto 強制在文件末尾空一行
    "eol-last": [1, "always"],
    // auto 禁止在箭頭函數體之前出現換行
    "implicit-arrow-linebreak": [1, "beside"],
    // auto 使用一個tab縮進
    "indent": [1, "tab", { 
      "ArrayExpression": 1,
      "SwitchCase": 1,
      "ObjectExpression": 1,
      "ImportDeclaration": 1,
    }],
    // auto 強制所有不包含單引號的 JSX 屬性值使用單引號
    "jsx-quotes": [1, "prefer-single"],
    // auto 強制在對象字面量的屬性中鍵和值之間使用一致的間距
    "key-spacing": [1, { 
      "beforeColon": false,
      "afterColon": true,
      "mode": "minimum",
      "align": "value"
    }],
    // auto 強制使用 Unix 換行符
    "linebreak-style": [1, "unix"],
    // 單文件最大行數
    "max-lines": [1, 1200],
    // 可以使用空格和tab混合縮進
    "no-mixed-spaces-and-tabs": [1, "smart-tabs"],
    // auto 最多一個空行
    "no-multiple-empty-lines": [1, { "max": 1, "maxEOF": 2 }],
    // auto 禁止行尾留空格，允許行尾註釋
    "no-trailing-spaces": [1, { 
      "skipBlankLines": true,
      "ignoreComments": true
    }],
    // auto 禁止屬性前有空白
    "no-whitespace-before-property": 1,
    // auto 對象花括號中前後需要空格
    "object-curly-spacing": [1, "always", { "objectsInObjects": true }],
    // auto 函數語句中變量和函數之間有空行
    "padding-line-between-statements": [
      1,
      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
      { blankLine: "any",    prev: ["const", "let", "var"], next: ["const", "let", "var"] }
    ],
    // auto 對象健名統一加引號或統一不加引號
    "quote-props": [1, "consistent-as-needed"],
    // auto 儘可能使用單引號,允許字符串使用反勾號
    "quotes": [1, "single", { 
      "allowTemplateLiterals": true,
      "avoidEscape": true
    }],
    // auto 強制行尾插入分號
    "semi": [1, "always"],
    // auto 強制分號前後沒有空格
    "semi-spacing": 1,
    // auto 強制分號在行尾
    "semi-style": [1, "last"],
    // auto 強制塊狀前一個空格
    "space-before-blocks": 1,
    // auto 函數括號前沒有空格
    "space-before-function-paren": [1, "never"],
    // auto 強制圓括號內沒有空格
    "space-in-parens": [1, "never"],
    // auto 強制操作符周圍有空格
    "space-infix-ops": 1,
    // auto 強制註釋前一個空格
    "spaced-comment": [1, "always"],
    
    /** es6 rules */
    // auto 箭頭函數按需使用大括號
    "arrow-body-style": [1, "as-needed"],
    // auto 當只有一個參數時允許省略圓括號
    "arrow-parens": [1, "as-needed"],
    // auto 箭頭函數的箭頭前後有空格
    "arrow-spacing": 1,
    // 單個模塊的所有的導入都在同一個 import 語句中
    "no-duplicate-imports": 1,
    // auto 禁止使用var關鍵字
    "no-var": 1,
    // auto ...擴展運算符之後不能有空格
    "rest-spread-spacing": [1, "never"],
    // auto 強制模板字符串中不留空格
    "template-curly-spacing": 1,

    /** variables rules */
    // 可以刪除對象中的屬性
    "no-delete-var": 0,
    // 禁止使用未定義的變量
    "no-use-before-define": 2,

    /** best practices rules */
    // auto 不允許使用 ==
    "eqeqeq": 2,
    // 不允許空函數
    "no-empty-function": 2,

    /** possible errors rules */
    // 開發模式允許使用 console
    "no-console": process.env.NODE_ENV === "production" ? 2 : 0,
    // 開發模式允許使用 debugger
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
  },
  parserOptions: {
    // 支持es語法
    ecmaVersion: 6,
    // 使用babel-eslint解析器
    parser: "babel-eslint",
    // 模塊加載資源類型
    sourceType: "module",
  }
};

• root爲true時，表明這個項目的根目錄，eslint就不再向上級檢查
• env爲相關環境的全局變量
• extends是繼承某些插件提供的規則，規則可以在rules中被重寫，這裏繼承了eslint內置的標準規則eslint:recommended，plugin:vue/essential是eslint-plugin-vue中提供的對.vue代碼的規則
• rules中可重寫並添加了個人風格的代碼規則
• parserOptions中ecmaVersion開啓了對es6代碼的檢查，parser使用babel-eslint來配合eslint對代碼解析，sourceType可以爲script或者module，這裏我們以模塊加載資源

VS Code中eslint的配置

• 在插件市場安裝eslint
• 打開vs code設置，添加配置

"eslint.validate": [
      "javascript",
      "javascriptreact",
      {
          "language": "vue",
          "autoFix": true
      }
 ],

這裏添加了對vue文件的檢查(如果你安裝了Vetur，你還需要添加"vetur.validation.template": false來關閉Vetur對vue模板的驗證)

• 推薦在每次保存文件的時候自動使用eslint來修復代碼，添加設置"eslint.autoFixOnSave": true
• vs code會自動使用.eslintrc.js配置的規則來檢查代碼，這裏總的配置如下

"eslint.autoFixOnSave": true,
"eslint.validate": [
      "javascript",
      "javascriptreact",
      {
          "language": "html",
          "autoFix": true
      },
      {
          "language": "vue",
          "autoFix": true
      }
 ],
"vetur.validation.template": false,