工具系列——eslint的使用

eslint學習筆記

1. esLint介紹

• 作代碼統一風格規範
  • jslint jshint eslint
• Eslint官網：http://eslint.cn/docs/user-guide/configuring

2. 快速開始

2.1. 全局和本地安裝eslint

• npm install eslint -g
• npm install eslint -save-dev

2.2. 建立並編寫配置文件

• 配置文件能夠寫成好多種方式
  • .eslintrc.js（主流，推薦）
    • 配置文件內容請參考自定義規則
  • .eslintrc.yaml文件
  • .eslintrc.json
  • 註釋的寫法
  • 能夠配置在npm的package.json文件中
• 特殊支持-React的支持
  • 若是用了ES6的新語法那麼須要下載一個模塊支持，不然react中寫定義箭頭函數會報錯
    • npm install babel-eslint -save
    • 在.eslintrc配置文件中添加"parser": "babel-eslint"

2.3. 在webpack中配置eslint-loader

• 下載npm install eslint-loader -save-dev
• 指定eslint的配置文件,若是不指定有默認的優先執行順序
• 在loader中配置加載器

// react中
{
    enforce: "pre",
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options:{
        configFile:'.eslintrc.js'
    }
},

// vue中
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            js: [
                    'babel-loader',
                    {
                        loader: "eslint-loader",
                        options: {
                            configFile: '.eslintrc.js'
                        }
                    }
            ],
            css: 'style-loader!css-loader'
        }
    }
},

• 經過.eslintignore文件指定不須要走eslint規範的代碼

• 以後執行webpack的運行命令就能夠看到效果了

3. 自定義語法規則

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

// eslint的語法規則

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":0,
        // 禁止用分號
        "semi":[2,'never'],
        // 在同一個做用域中禁止屢次重複定義
        "no-redeclare":1
    },
    // 指定你想啓用的環境
    "env": {
        "browser": true,
        "node": true
    },
    "parser": "babel-eslint"
};

 

4. 注意點

• eslint的代碼規範只在開發階段用

5. 參考文章

• 一些規則的中文說明:http://blog.csdn.net/helpzp2008/article/details/51507428
• http://www.tuicool.com/articles/rIFBfey

免責說明

一、本博客中的文章摘自網上的衆多博客，僅做爲本身知識的補充和整理，並分享給其餘須要的coder，不會用於商用

二、由於不少博客的地址已經記不清楚了，因此不會在這裏標明出處