webpack中eslint使用

首先，要使webpack支持eslint，就要要安裝 eslint-loader ，命令如下:

npm install --save-dev eslint-loader

在 webpack.config.js 中添加如下代碼：

{  test: //.js$/,  loader: 'eslint-loader',  enforce: "pre",  include: [path.resolve(__dirname, 'src')], // 指定檢查的目錄  options: { // 這里的配置項參數將會被傳遞到 eslint 的 CLIEngine     formatter: require('eslint-friendly-formatter') // 指定錯誤報告的格式規范  }}

注：formatter默認是stylish，如果想用第三方的可以安裝該插件，如上方的示例中的 eslint-friendly-formatter 。

其次，要想webpack具有 eslint 的能力，就要安裝eslint，命令如下：

npm install --save-dev eslint

最后，項目想要使用那些eslin規則，可以創建一個配置項文件 '.eslintrc.js'，代碼如下:

module.exports = {  root: true,    parserOptions: {    sourceType: 'module'  },  env: {    browser: true,  },  rules: {    "indent": ["error", 2],    "quotes": ["error", "double"],    "semi": ["error", "always"],    "no-console": "error",    "arrow-parens": 0  }}

這樣，一個簡單的webpack引入eslint已經完成了。

這里講一下 eslintrc.js 的配置使用，詳細細節請參考http://eslint.cn/docs/user-guide

eslint 配置項

root 限定配置文件的使用范圍 parser 指定eslint的解析器 parserOptions 設置解析器選項 extends 指定eslint規范 plugins 引用第三方的插件 env 指定代碼運行的宿主環境 rules 啟用額外的規則或覆蓋默認的規則 globals 聲明在代碼中的自定義全局變量

在我們使用eslint時，配置文件中的 rules 配置項是否是不可或缺的？

答案是肯定的。不過我們也可以不用自定義reules，我們可以使用第三方的，這里我們就要使用extends配置項。

extends

我們可以使用eslint官方推薦的，也可以使用一些大公司提供的的，如：aribnb, google, standard。

在開發中我們一般使用第三方的。

官方推薦

只需在 .eslintrc.js 中添加如下代碼：

extends: 'eslint:recommended',extends: 'eslint:all',

了解詳情可以參考一下官方規則表

第三方分享

使用第三方分享的，我們一般需要安裝相關的插件代碼如下：

npm install --save-dev eslint-config-airbnb // bnbnpm install --save-dev eslint-config-standard // standard

在 .eslintrc.js 中添加如下代碼：

extends: 'eslint:google',// orextends: 'eslint:standard',

使用這些第三方的擴展，有時我們需要更新一些插件，比如standard：eslint-plugin-import

不要慌，我們只要按照錯誤提示一步一步的安裝這些插件即可。