1.前言

  在團隊協作中，為避免低階 Bug、以及團隊協作時不同程式碼風格對彼此造成的困擾與影響，會預先制定編碼規範。使用 Lint 工具和程式碼風格檢測工具，則可以輔助編碼規範執行，有效控制程式碼質量。EsLint 則是其中一個很好的工具。

EsLint 提供以下支援：

• ES6
• AngularJS
• JSX
• Style 檢查
• 自定義錯誤和提示

EsLint 提供以下幾種校驗：

• 語法錯誤校驗
• 不重要或丟失的標點符號，如分號
• 未被使用的引數提醒
• 漏掉的結束符，如}
• 確保樣式的統一規則，如 sass 或者 less
• 檢查變數的命名
• 影響效能的程式碼提醒，如 v-if 和 v-for 同時使用

2.eslint 配置

2.1 程式碼規範

  本專案基本規範是依託於 vue 官方的eslint-plugin-vue。並使用 Prettier 格式化程式碼，使樣式與規則保持一致。

.eslintrc.js 配置如下：

{
root: true,// 當前配置為根配置，將不再從上級資料夾查詢配置
parserOptions: {
 parser: 'babel-eslint',// 採用 babel-eslint 作為語法解析器
 sourceType: 'module',// 指定來源的型別，有兩種script或module
 ecmaVersion: 6,//指定ECMAScript支援的版本，6為ES6
},env: {
 browser: true,// 設定為所需檢查的程式碼是在瀏覽器環境執行的
 es6: true // 設定所需檢查程式碼為 es6 語法書寫
},extends: ['plugin:vue/recommended','eslint:recommended'],// 擴充套件使用 vue 檢查規則和eslint推薦規則
 rules: {
  'vue/attribute-hyphenation': 0,// 忽略屬性連字
  'vue/max-attributes-per-line':[2,{ singleline: 10,multiline: { max: 1,allowFirstLine: false } }],// 每行最大屬性
  'vue/singleline-html-element-content-newline': 'off',// 單行html元素內容在新的一行
  'vue/multiline-html-element-content-newline': 'off',// 多行html元素內容在新的一行
  'vue/html-closing-bracket-newline': 'off',// html右括號在新的一行
  'vue/no-v-html': 'off',// 不使用v-html
  'vue/html-self-closing': 0,// 忽略html標籤自閉合
  'accessor-pairs': 2,// 應同時設定setter和getter
  'arrow-spacing': [2,{ before: true,after: true }],// 箭頭間距
  'vue/require-default-prop': 0,// 不檢查預設屬性
  'vue/require-prop-types': 0,// 不檢查預設型別
  'block-spacing': [2,'always'],// 塊間距
  'brace-style': [2,'1tbs',{ allowSingleLine: true }],// 大括號樣式允許單行
  'camelcase': [2,{ properties: 'always' }],//為屬性強制執行駝峰命名
  'comma-dangle': [2,'never'],// 逗號不使用懸掛
  'comma-spacing': [2,{ before: false,// 逗號間距
  'comma-style': [2,'last'],//（預設）與陣列元素，物件屬性或變數宣告在同一行之後和同一行需要逗號
  'constructor-super': 2,'consistent-this': [2,'that'],//強制this別名為that
  'curly': [2,'multi-line'],// 當一個塊只包含一條語句時，不允許省略花括號。
  'dot-location': [2,'property'],//成員表示式中的點應與屬性部分位於同一行
  'eol-last': 2,// 強制檔案以換行符結束（LF）
  'eqeqeq': ['error','always',{ null: 'ignore' }],// 強制使用全等
  'generator-star-spacing': [2,// 生成器中'*'兩側都要有間距
  'global-require': 1,// 所有呼叫require()都位於模組的頂層
  'indent': [2,2,{ SwitchCase: 2 }],//縮排風格
  'key-spacing': [2,{ beforeColon: false,afterColon: true }],// 強制在物件字面量屬性中的鍵和值之間保持一致的間距
  'keyword-spacing': [2,// 關鍵字如if/function等的間距
  'new-cap': [2,{ newIsCap: true,capIsNew: false }],// 允許在沒有new操作符的情況下呼叫大寫啟動的函式;（預設）要求new使用大寫啟動函式呼叫所有操作符
  'new-parens': 2,// JavaScript通過new關鍵字呼叫函式時允許省略括號
  'no-array-constructor': 1,// 不允許使用Array建構函式。除非要指定生成陣列的長度
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',// 只有開發環境可以使用console
  'no-class-assign': 2,// 不允許修改類宣告的變數
  'no-const-assign': 2,// 不能修改使用const關鍵字宣告的變數
  'no-control-regex': 0,// 不允許正則表示式中的控制字元
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',// 只有開發環境可以使用debugger
  'no-delete-var': 2,// 不允許在變數上使用delete操作符
  'no-dupe-args': 2,// 不允許在函式宣告或表示式中使用重複的引數名稱
  'no-dupe-class-members': 2,// 不允許在類成員中使用重複的引數名稱
  'no-dupe-keys': 2,// 不允許在物件文字中使用重複鍵
  'no-duplicate-case': 2,// 不允許在switch語句的case子句中使用重複的測試表達式
  'no-empty-character-class': 2,// 不允許在正則表示式中使用空字元類
  'no-empty-pattern': 2,// 不允許空塊語句
  'no-eval': 2,// 不允許使用eval
  'no-ex-assign': 2,// 不允許在catch子句中重新分配例外
  'no-extend-native': 2,// 不允許直接修改內建物件的原型
  'no-extra-boolean-cast': 2,// 禁止不必要的布林轉換
  'no-extra-parens': [2,'functions'],// 僅在函式表示式附近禁止不必要的括號
  'no-fallthrough': 2,//消除一個案件無意中掉到另一個案件
  'no-floating-decimal': 2,//消除浮點小數點，並在數值有小數點但在其之前或之後缺少數字時發出警告
  'no-func-assign': 2,// 允許重新分配function宣告
  'no-implied-eval': 2,// 消除隱含eval()
  'no-inner-declarations': [2,// 不允許function巢狀塊中的宣告
  'no-invalid-regexp': 2,//不允許RegExp建構函式中的無效正則表示式字串
  'no-irregular-whitespace': 2,//捕獲無效的空格
  'no-iterator': 2,//消除陰影變數宣告
  'no-label-var': 2,//禁止建立與範圍內的變數共享名稱的標籤
  'no-labels': [2,{ allowLoop: false,allowSwitch: false }],// 消除 JavaScript 中使用帶標籤的語句
  'no-lone-blocks': 2,//消除指令碼頂層或其他塊中不必要的和可能混淆的塊
  'no-mixed-spaces-and-tabs': 2,// 不允許使用混合空格和製表符進行縮排
  'no-multi-spaces': 2,// 禁止在邏輯表示式，條件表示式，宣告，陣列元素，物件屬性，序列和函式引數周圍使用多個空格
  'no-multi-str': 2,// 防止使用多行字串
  'no-multiple-empty-lines': [2,{ max: 1 }],// 最多一個空行
  'no-native-reassign': 2,// 不允許修改只讀全域性變數
  'no-new-object': 2,// 不允許使用Object建構函式
  'no-new-require': 2,// 消除new require表達的使用
  'no-new-symbol': 2,// 防止Symbol與new 同時使用的意外錯誤
  'no-new-wrappers': 2,// 杜絕使用String，Number以及Boolean與new操作
  'no-obj-calls': 2,// 不允許呼叫Math，JSON和Reflect物件作為功能
  'no-octal': 2,// 不允許使用八進位制文字
  'no-octal-escape': 2,// 不允許字串文字中的八進位制轉義序列
  'no-path-concat': 2,// 防止 Node.js 中的目錄路徑字串連線無效
  'no-redeclare': 2,// 消除在同一範圍內具有多個宣告的變數
  'no-regex-spaces': 2,// 在正則表示式文字中不允許有多個空格
  'no-return-assign': [2,'except-parens'],// 消除return陳述中的任務，除非用括號括起來
  'no-self-assign': 2,// 消除自我分配
  'no-self-compare': 2,// 禁止比較變數與自身
  'no-sequences': 2,// 禁止使用逗號運算子
  'no-sparse-arrays': 2,// 不允許稀疏陣列文字
  'no-this-before-super': 2,// 在呼call前標記this/super關鍵字super()
  'no-throw-literal': 2,// 不允許丟擲不可能是Error物件的文字和其他表示式
  'no-trailing-spaces': 2,// 不允許在行尾新增尾隨空白
  'no-undef': 2,// 任何對未宣告的變數的引用都會導致錯誤
  'no-undef-init': 2,// 消除初始化為undefined的變數宣告
  'no-underscore-dangle': 2,// 識別符號不能以_開頭或結尾
  'no-unexpected-multiline': 2,// 不允許混淆多行表示式
  'no-unmodified-loop-condition': 2,// 查詢迴圈條件內的引用，然後檢查這些引用的變數是否在迴圈中被修改
  'no-unneeded-ternary': [2,{ defaultAssignment: false }],// 不允許將條件表示式作為預設的分配模式
  'no-unreachable': 2,// 不允許可達程式碼return，throw，continue，和break語句後面還有語句。
  'no-unsafe-finally': 2,// 不允許return，throw，break，和continue裡面的語句finally塊
  'no-unused-vars': [2,{ vars: 'all',args: 'after-used' }],// 消除未使用的變數，函式和函式的引數
  // vars: 'all' 檢查所有變數的使用情況，包括全域性範圍內的變數。這是預設設定。 args: 'after-used' 只有最後一個引數必須使用。例如，這允許您為函式使用兩個命名引數，並且只要您使用第二個引數，ESLint 就不會警告您第一個引數。這是預設設定。
  'no-useless-call': 2,// 標記使用情況，Function.prototype.call()並且Function.prototype.apply()可以用正常的函式呼叫來替代
  'no-useless-computed-key': 2,// 禁止不必要地使用計算屬性鍵
  'no-useless-constructor': 2,// 在不改變類的工作方式的情況下安全地移除的類建構函式
  'no-useless-escape': 0,// 禁用不必要的轉義字元
  'no-whitespace-before-property': 2,// 如果物件的屬性位於同一行上，不允許圍繞點或在開頭括號之前留出空白
  'no-with': 2,//禁用with
  'no-var': 2,// 禁用var
  'one-var': [2,{ initialized: 'never' }],// 強制將變數宣告為每個函式（對於var）或塊（對於let和const）範圍一起宣告或單獨宣告。 initialized: 'never' 每個作用域要求多個變數宣告用於初始化變數
  'operator-linebreak': [2,'after',{ overrides: { '?': 'before',':': 'before' } }],// 實施一致的換行
  'padded-blocks': [2,// 在塊內強制執行一致的空行填充
  'prefer-destructuring': ['error',{ object: false,array: false }],// 此規則強制使用解構而不是通過成員表示式訪問屬性。
  'quotes': [2,'single',{ avoidEscape: true,allowTemplateLiterals: true }],// avoidEscape: true 允許字串使用單引號或雙引號，只要字串包含必須以其他方式轉義的引號 ;allowTemplateLiterals: true 允許字串使用反引號
  'radix': 2,//parseInt必須指定第二個引數
  'semi': [2,// 不使用分號
  'semi-spacing': [2,// 強制分號間隔
  'space-before-blocks': [2,// 塊必須至少有一個先前的空間
  'space-before-function-paren': [2,// 在(引數後面不允許任何空格
  'space-in-parens': [2,// 禁止或要求（或）左邊的一個或多個空格
  'space-infix-ops': 2,// 強制二元運算子左右各有一個空格
  'space-unary-ops': [2,{ words: true,nonwords: false }],// words: true 如：new，delete，typeof，void，yield 左右必須有空格 // nonwords: false 一元運算子，如：-，+，--，++，!，!!左右不能有空格
  'spaced-comment': [2,{ markers: ['global','globals','eslint','eslint-disable','*package','!',','] }],// 註釋開始後，此規則將強制間距的一致性//或/*
  'template-curly-spacing': [2,// 不允許大括號內的空格
  'use-isnan': 2,//禁止比較時使用NaN，只能用isNaN()
  'valid-typeof': 2,//必須使用合法的typeof的值
  'wrap-iife': [2,'any'],//立即執行函式表示式的小括號風格
  'yield-star-spacing': [2,'both'],// 強制執行*周圍 yield*表示式的間距，兩側都必須有空格
  'yoda': [2,'prefer-const': 2,// 使用let關鍵字宣告的變數，但在初始分配後從未重新分配變數，應改為const宣告
  'object-curly-spacing': [2,{ objectsInObjects: false }],// 不允許以物件元素開始和/或以物件元素結尾的物件的大括號內的間距
  'array-bracket-spacing': [2,'never'] // 不允許陣列括號內的空格
 }
}

2.2 eslint 安裝與配置

全域性安裝 eslint

npm install -g eslint

全域性安裝 Prettier

npm install -g prettier

vscode 外掛市場搜尋 eslint 和 prettier,下載並安裝。

vscode

編輯器 setting.json 中加如下配置：

/* 開啟儲存時自動格式化 */
"editor.formatOnSave": true,/* eslint的配置 */
"eslint.enable": true,"eslint.run": "onSave","eslint.options": {
  "extensions": [
   ".js",".vue"
  ]
 },"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 儲存時自動修復
 },// 關閉 vscode 預設的檢查工具
 "html.validate.scripts": false,"javascript.validate.enable": false,"eslint.alwaysShowStatus": true,"eslint.format.enable": true,"scss.lint.duplicateProperties": "error","css.lint.duplicateProperties": "error","less.lint.zeroUnits": "error","eslint.validate": [
  "javascript","javascriptreact","vue-html","vue","html"
 ],/* prettier的配置 */
 "prettier.printWidth": 120,// 超過最大值換行
 "prettier.tabWidth": 2,// 縮排位元組數
 "prettier.useTabs": true,// 縮排使用tab
 "prettier.semi": false,// 句尾新增分號
 "prettier.singleQuote": true,// 使用單引號代替雙引號
 "prettier.proseWrap": "preserve",// 預設值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文字樣式進行折行
 "prettier.arrowParens": "avoid",// (x) => {} 箭頭函式引數只有一個時是否要有小括號。avoid：省略括號
 "prettier.bracketSpacing": true,// 在物件，陣列括號與文字之間加空格 "{ foo: bar }"
 "prettier.endOfLine": "auto",// 結尾是 \n \r \n\r auto
 "prettier.htmlWhitespaceSensitivity": "ignore","prettier.ignorePath": ".prettierignore",// 不使用prettier格式化的檔案填寫在專案的.prettierignore檔案中
 "prettier.requireConfig": false,// Require a "prettierconfig" to format prettier
 "prettier.trailingComma": "none",// 在物件或陣列最後一個元素後面是否加逗號

/* 每種語言預設的格式化規則 */
 "[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },"[scss]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },

使用 vuecli 建立專案時，不選擇 lint 選項。

在專案開發依賴中，加入@vue/cli-plugin-eslint、babel-eslint、eslint、eslint-plugin-vue、prettier、prettier-eslint 依賴

npm install @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue prettier prettier-eslint –-save-dev

在專案 package.json 內加入 lint 命令。

開發時，儲存檔案，即可按 prettier 規則格式化檔案，並自動修復可修復的 issue，不能自動修復的，請根據提示，手動修復。

提示：vscode 已設定儲存時格式化，但有時並不會格式化檔案。已儲存的檔案還存在報錯的，請手動格式化，並修改相應問題後，再次儲存。

提交程式碼前，執行 npm run lint 程式碼風格檢查，確認無誤後再進行提交。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。