ESlint配置

ESlint配置

默認eslint規則

• 代碼末尾不能加分號 ;
• 代碼中不能存在多行空行 ;
• tab鍵不能使用，必須換成兩個空格;
• 代碼中不能存在聲明瞭但未使用的變量 ;

看起來蠻不喜歡這個1ESlint代碼規範。

最簡單的方法，關閉eslint檢測得意，其實很簡單，把 build/webpack.base.conf.js 配置文件中的eslint rules註釋掉便可。但不推薦你這麼作，eslint檢測是有必要的.能保持良好的代碼風格。

module.exports = { //此項是用來告訴eslint找當前配置文件不能往父級查找 root: true, //此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析 parser: 'babel-eslint', //此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置爲module，指某塊導入方式 parserOptions: { sourceType: 'module' }, //此項指定環境的全局變量，下面的配置指定爲瀏覽器環境 env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style // 此項是用來配置標準的js風格，就是說寫代碼的時候要規範的寫，若是你使用vs-code我以爲應該能夠避免出錯 extends: 'standard', // required to lint *.vue files // 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規範html的 plugins: [ 'html' ], // add your custom rules here // 下面這些rules是用來設置從插件來的規範代碼的規則，使用必須去掉前綴eslint-plugin- // 主要有以下的設置規則，能夠設置字符串也能夠設置數字，二者效果一致 // "off" -> 0 關閉規則 // "warn" -> 1 開啓警告規則 //"error" -> 2 開啓錯誤規則 // 瞭解了上面這些，下面這些代碼相信也看的明白了 rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // js語句結尾必須使用分號 'semi': ['off', 'always'], // 三等號 'eqeqeq': 0, // 強制在註釋中 // 或 /* 使用一致的空格 'spaced-comment': 0, // 關鍵字後面使用一致的空格 'keyword-spacing': 0, // 強制在 function的左括號以前使用一致的空格 'space-before-function-paren': 0, // 引號類型 "quotes": [0, "single"], // 禁止出現未使用過的變量 // 'no-unused-vars': 0, // 要求或禁止末尾逗號 'comma-dangle': 0 } } 

其中的rules就是配置規則的。

配置參數 rules: { "規則名": [規則值, 規則配置] }

規則值： "off"或者0 //關閉規則關閉 "warn"或者1 //在打開的規則做爲警告（不影響退出代碼） "error"或者2 //把規則做爲一個錯誤（退出代碼觸發時爲1）

如何在老項目中加入ESlint

1. 在目錄中添加.editorconfig、.eslintrc.js、.eslintignore這三個文件
2. 在package.json的」devDependencies」中加入ESlint所須要的包

"babel-eslint": "^7.1.1",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",

3. 在bulid/webpack.base.conf.js文件中加入ESlint規則並生效

//  在module的rules中加入
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter'),
          // 不符合Eslint規則時只警告(默認運行出錯)
          // emitWarning: !config.dev.showEslintErrorsInOverlay
        }
      },
    ]
  }

常見的報錯

• 文件末尾存在空行(eol-last) 

• 缺乏分號(‘semi’: [‘error’,’always’]) 

• 關鍵字後面缺乏空格 

• 字符串沒有使用單引號(’quotes’: [1, ’single’]) 

• 縮進錯誤 

• 沒有使用全等(eqeqeq) 

• 導入組件卻沒有使用 

• new了一個對象卻沒有賦值給某個常量(能夠在該實例前添加此代碼/eslint-disable no-new/忽略ESLint的檢查) 

• 超過一行空白行(no-multiple-empty-lines) 

• 註釋符 // 後面縮進錯誤(lines-around-comment)