esLint:做代碼統一風格規范

1.eslint介紹

• 做代碼統一風格規范
  • jslint    jshint     eslint（最火的）
• Eslint官網：http://eslint.cn/docs/user-guide/configuring

2.全局和本地安裝

npm install eslint -g

npm install eslint -save-dev

3.配置文件的多種方法：

eslintrc.js（我們推薦使用這個主流方法）

.eslintrc.yaml文件

.eslintrc.json

注釋的寫法

可以直接配置在webpack的屬性中

可以配置在npm的package.json文件中

4.用eslintrc.js配置

1>下載npm install eslint-loader -save-dev

2>指定eslint的配置文件,如果不指定有默認的優先執行順序 

3>在loader中配置加載器

4>通過.eslintignore文件指定不需要走eslint規范的代碼 

5>之后執行webpack的運行命令就可以看到效果了

.eslintrc.js文件配置的代碼：

http://eslint.cn/docs/rules/

module.exports = {
    // 開啟推薦配置信息
    // "extends": "eslint:recommended",
    // 默認情況下，ESLint 會在所有父級目錄里尋找配置文件，一直到根目錄。如果你想要你所有項目都遵循一個特定的約定時，這將會很有用，但有時候會導致意想不到的結果。為了將 ESLint 限制到一個特定的項目，在你項目根目錄下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下設置 "root": true。ESLint 一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。
    "root": true,
    // 腳本在執行期間訪問的額外的全局變量
    // 當訪問未定義的變量時，no-undef 規則將發出警告。如果你想在一個文件里使用全局變量，推薦你定義這些全局變量，這樣 ESLint 就不會發出警告了。你可以使用注釋或在配置文件中定義全局變量。
    "globals" : {
        "window":true,
        "document":true,
        "$":true
    },
    // 設置插件
    // "plugins": [
    //     'html'
    // ],
    // 設置解析器選項（必須設置這個屬性）
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            // "arrowFunctions": true,
            // "experimentalObjectRestSpread": true,
            // "classes": true,
            // "modules": true,
            // "defaultParams": true
        }
    },
    // 啟用的規則及各自的錯誤級別
    "rules" : {
        // 禁止用console
        "no-console":1,
        // 禁止用分號
        "semi":[2,'never'],
        // 在同一個作用域中禁止多次重復定義
        "no-redeclare":1
    },
    // 指定你想啟用的環境
    "env": {
        "browser": true,
        "node": true
    },
   //babel  eslint都是babel公司出的
    "parser": "babel-eslint"//配置解析es6
};

6>react的特殊支持

如果用了ES6的新語法那么需要下載一個模塊支持，否則react中寫定義箭頭函數會報錯

npm install babel-eslint -save

在配置文件中添加"parser": "babel-eslint"

注意點：eslint的代碼規范只在開發階段使用

 

 參考文章：

      一些規則的中文說明:http://blog.csdn.net/helpzp2008/article/details/51507428

       http://www.tuicool.com/articles/rIFBfey