webpack引入eslint配置详解

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

不要慌，我们只要按照错误提示一步一步的安装这些插件即可。