eslint簡單使用&&eslint與webpack結合使用

1. 全局安裝eslint  

   $ npm install -g eslint

2. 直接初始化一個.eslintrc的文件

   $ eslint --init

3. 在生成的文件裏可進行配置
4. 命令行使用eslint a.js進行代碼的檢查

5. 根據提示全局安裝

   $ npm i eslint-plugin-react@latest -g

6. 執行以後能夠看見報錯

   //.eslintrc.js的配置
   module.exports = {
       "env": {
           "browser": true,
           "es6": true
       },
       "extends": "eslint:recommended",
       "globals": {
           "Atomics": "readonly",
           "SharedArrayBuffer": "readonly"
       },
       "parserOptions": {
           "ecmaFeatures": {
               "jsx": true
           },
           "ecmaVersion": 2018
       },
       "plugins": [
           "react"
       ],
       "rules": {
           'no-var': 'error',
           // 要求或禁止 var 聲明中的初始化
           'init-declarations': 2,
           // 強制使用單引號
       }
   };

.eslintrc的配置項說明

1. "parserOptions"屬性配置解析器內容。其中「ecmaVersion」屬性配置JS的語法版本。「sourceType」屬性配置JS文件加載模式，值爲「script」或「module」。「ecmaFeatures」屬性配置想要使用的額外語言特性。

2. 「env」屬性配置了預約義的全局環境。咱們當前開啓了「es6」、"node"、"amd"三個環境。

3. "plugins"屬性配置須要加載的第三方插件。這裏咱們須要先安裝對應插件才能使用。

4. 「globals」屬性定義了全局變量集合，包含在這個集合中的屬性都會被工具認爲是全局變量，no-undef 規則就不會發出警告。

5. "extends"屬性配置基礎規則，「rules」屬性中配置的規則都是基於這個規則之上配置的。

6. "rules"屬性配置檢查規則。

7. 除此，還有一個重要的配置，配置忽略哪些文件的配置。咱們在實際場景中不可能檢查全部文件，只會挑選出須要檢查的文件進行檢查。因此，這個配置咱們會常常用到。

8. 在咱們的工程目錄中新建一個文件，命名爲「.eslintignore」，Eslint會自動識別這個文件。這個配置文件裏面，每一行都是一個glob模式語句.

9. rules規則&&3個等級（0-off、1-warn和2-error）

   "no-bitwise": 0,//禁止使用按位運算符
   "no-catch-shadow": 2,//禁止catch子句參數與外部做用域變量同名
   "no-class-assign": 2,//禁止給類賦值
   "no-cond-assign": 2,//禁止在條件表達式中使用賦值語句
   "no-console": 2,//禁止使用console
   "no-const-assign": 2,//禁止修改const聲明的變量
   "no-constant-condition": 2,//禁止在條件中使用常量表達式 if(true) if(1)
   "no-continue": 0,//禁止使用continue
   "no-control-regex": 2,//禁止在正則表達式中使用控制字符
   "no-debugger": 2,//禁止使用debugger
   "no-delete-var": 2,//不能對var聲明的變量使用delete操做符
   "no-div-regex": 1,//不能使用看起來像除法的正則表達式/=foo/
   "no-dupe-keys": 2,//在建立對象字面量時不容許鍵重複 {a:1,a:1}
   "no-dupe-args": 2,//函數參數不能重複
   "no-duplicate-case": 2,//switch中的case標籤不能重複
   "no-else-return": 2,//若是if語句裏面有return,後面不能跟else語句
   "no-empty": 2,//塊語句中的內容不能爲空
   "no-empty-character-class": 2,//正則表達式中的[]內容不能爲空
   "no-empty-label": 2,//禁止使用空label
   "no-eq-null": 2,//禁止對null使用==或!=運算符
   "no-eval": 1,//禁止使用eval
   "no-ex-assign": 2,//禁止給catch語句中的異常參數賦值
   "no-extend-native": 2,//禁止擴展native對象
   "no-extra-bind": 2,//禁止沒必要要的函數綁定
   "no-extra-boolean-cast": 2,//禁止沒必要要的bool轉換
   "no-extra-parens": 2,//禁止非必要的括號
   "no-extra-semi": 2,//禁止多餘的冒號
   "no-fallthrough": 1,//禁止switch穿透
   "no-func-assign": 2,//禁止重複的函數聲明
   "no-implicit-coercion": 1,//禁止隱式轉換
   "no-implied-eval": 2,//禁止使用隱式eval
   "no-inline-comments": 0,//禁止行內備註
   "no-invalid-regexp": 2,//禁止無效的正則表達式
   "no-label-var": 2,//label名不能與var聲明的變量名相同
   "no-labels": 2,//禁止標籤聲明
   "no-lone-blocks": 2,//禁止沒必要要的嵌套塊
   "no-lonely-if": 2,//禁止else語句內只有if語句
   "no-loop-func": 1,//禁止在循環中使用函數（若是沒有引用外部變量不造成閉包就能夠）
   "no-multi-spaces": 1,//不能用多餘的空格
   "no-multi-str": 2,//字符串不能用\換行
   "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超過2行
   "no-native-reassign": 2,//不能重寫native對象
   "no-negated-in-lhs": 2,//in 操做符的左邊不能有!
   "no-nested-ternary": 0,//禁止使用嵌套的三目運算
   "no-new": 1,//禁止在使用new構造一個實例後不賦值
   "no-new-func": 1,//禁止使用new Function
   "no-new-object": 2,//禁止使用new Object()
   "no-new-require": 2,//禁止使用new require
   "no-new-wrappers": 2,//禁止使用new建立包裝實例，new String new Boolean new Number
   "no-obj-calls": 2,//不能調用內置的全局對象，好比Math() JSON()
   "no-octal": 2,//禁止使用八進制數字
   "no-octal-escape": 2,//禁止使用八進制轉義序列
   "no-param-reassign": 2,//禁止給參數從新賦值
   "no-path-concat": 0,//node中不能使用__dirname或__filename作路徑拼接
   "no-plusplus": 0,//禁止使用++，--
   "no-process-env": 0,//禁止使用process.env
   "no-process-exit": 0,//禁止使用process.exit()
   "no-proto": 2,//禁止使用__proto__屬性
   "no-redeclare": 2,//禁止重複聲明變量
   "no-regex-spaces": 2,//禁止在正則表達式字面量中使用多個空格 /foo bar/
   "no-restricted-modules": 0,//若是禁用了指定模塊，使用就會報錯
   "no-return-assign": 1,//return 語句中不能有賦值表達式
   "no-script-url": 0,//禁止使用javascript:void(0)
   "no-self-compare": 2,//不能比較自身
   "no-sequences": 0,//禁止使用逗號運算符
   "no-shadow": 2,//外部做用域中的變量不能與它所包含的做用域中的變量或參數同名
   "no-shadow-restricted-names": 2,//嚴格模式中規定的限制標識符不能做爲聲明時的變量名使用
   "no-spaced-func": 2,//函數調用時 函數名與()之間不能有空格
   "no-sync": 0,//nodejs 禁止同步方法
   "no-ternary": 0,//禁止使用三目運算符
   "no-trailing-spaces": 1,//一行結束後面不要有空格

esLint結合webpack使用

1. 使用 eslint-loader 將其eslint 集成到 webpack 的工做流中

   $ npm install eslint --save-dev
   
   # use js standard style
   $ npm install eslint-config-standard --save-dev
   
   # with webpack
   $ npm install eslint-loader --save-dev

2. 在webpack中進行配置

   module: {
     preLoaders: [
         {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
     ]
   }

3. 若是使用ES6/ES7 或者 JSX 的語法，並用 babel 進行解析的話，能夠安裝 babel-eslint

   $ npm install babel-eslint --save-dev

   // .eslintrc.json
   
   {
     "parser": "babel-eslint",
     "rules": {
       "strict": 0
     }
   }