webpack2集成eslint

規範本身的代碼從ESlint開始。ESlint和webpack集成，在babel編譯代碼開始前，進行代碼規範檢測。

這裏沒有使用像airbnb等一些廠發佈的代碼規範，由於每一個團隊的都有本身的代碼風格，這裏選用的javascript-style-standard這個你們用的比較多的風格指南。具體文檔請戳我

安裝

須要這幾個npm包:

• eslint

• eslint-loader

• eslint-plugin-html (用以lint一些在html文件裏面經過script包裹的js代碼,它默認的匹配規則是不帶type屬性，或者是`/^(application|text)/(x-)?(javascript|babel|ecmascript-6)$/i`,具體的內容請查閱相關文檔,經過cli啓動lint的時候定義文件後綴名時eslint --ext .html,.js)

• eslint-config-standard (和?2個包都是javascript-style-standard風格指南須要的包)

• eslint-plugin-promise

• eslint-plugin-standard

• eslint-friendly-formatter (生成的報告格式)

這個地方主要說下若是將eslint集成進webpack2,關於eslint具體的文檔及使用，請戳我

配置

關於eslint的配置方式。比較多元化：

• js註釋

• .eslintrc.*文件

• package.json裏面配置eslintConfig字段

這裏我選用了.eslintrc.js文件進行配置，個別文件代碼不須要進行lint的能夠使用js註釋在文件中單獨標識。

文件.eslintrc.js內容爲：

module.exports = {
  root: true,   //  eslint找到這個標識後，不會再去父文件夾中找eslint的配置文件
  parser: 'babel-eslint',   //使用babel-eslint來做爲eslint的解析器
  parserOptions: {      // 設置解析器選項
    sourceType: 'module'    // 代表本身的代碼是ECMAScript模塊
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',  // 繼承eslint-config-standard裏面提供的lint規則
  // required to lint *.vue files
  plugins: [    // 使用的插件eslint-plugin-html. 寫配置文件的時候，能夠省略eslint-plugin-
    'html'
  ],
  // 啓用額外的規則或者覆蓋基礎配置中的規則的默認選項
  rules: {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // http://eslint.org/docs/rules/comma-dangle
    'comma-dangle': ['error', 'only-multiline'],
    'semi': 0
  },
  globals: {    // 聲明在代碼中自定義的全局變量
    'CONFIG': true
  },
  env: {            // 定義預約義的全局變量,好比browser: true，這樣你在代碼中能夠放心使用宿主環境給你提供的全局變量。
    browser: true, // browser global variables.
    node: true, // Node.js global variables and Node.js scoping.
    worker: true, // web workers global variables.
    mocha: true, // adds all of the Mocha testing global variables.
    phantomjs: true, // PhantomJS global variables.
    serviceworker: true // Service Worker global variables.
  }
}

webpack2

...
    
    module.exports = {
        ///
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loaders: [
                        'babel-loader',
                        'eslint-loader'
                    ],
                    query: {
                        cacheDirectory: true
                    }
                },
                {
                    test: /\.vue$/,
                    enforce: 'pre',  // 在babel-loader對源碼進行編譯前進行lint的檢查
                    include: /src/,  // src文件夾下的文件須要被lint
                    use: [{
                        loader: 'eslint-loader',
                        options: {
                            formatter: require('eslint-friendly-formatter')   // 編譯後錯誤報告格式
                        }
                    }]
                    // exclude: /node_modules/ 能夠不用定義這個字段的屬性值，eslint會自動忽略node_modules和bower_
                }
            ]
        }
    }

執行

package.json文件

{
        ...
        "lint": "eslint --ext .js,.vue src"
        ...
    }

經過npm run lint進行代碼的靜態檢查