eslint-loader的用法

文章截取原文: ESLint的用途

eslint 的作用

1.審查代碼是否符合編碼規範和統一的代碼風格；
2.審查代碼是否存在語法錯誤；

.editorconfig、.eslintignore、.eslintrc.js 文件

• .editorconfig文件（主要用於配置IDE）
  規範縮進風格，縮進大小，tab長度以及字符集等,解決不同IDE的編碼範設置。EditorConfig 插件會去查找當前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。如果有，則編輯器的行爲會與 .editorconfig 文件中定義的一致，並且其優先級高於編輯器自身的設置。

  root = true
  # 對所有文件有效  //[*js]只對js文件有效
  [*]
  #設置編碼格式
  charset = utf-8
  #縮進類型  可選space和tab
  indent_style = space
  #縮進數量可選整數值2 or 4,或者tab
  indent_size = 2
  #換行符的格式
  end_of_line = lf
  # 是否在文件的最後插入一個空行  可選true和false
  insert_final_newline = true
  # 是否刪除行尾的空格  可選擇true和false
  trim_trailing_whitespace = true
  

• .eslintignore文件（放置需要ESLint忽略的文件，只對.js文件有效）

• .eslintrc.js 文件(用來配置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
    }
  }
  

  “off” 或 0 - 關閉規則

  “warn” 或 1 - 開啓規則

  “error” 或 2 - 開啓規則

如何在老項目中加入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",
   

劃重點：eslint-loader規則必須要先於babel-loader規則