webpack引入eslint配置详解

　　

<强> webpack中eslint使用
　　

　　

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

　　 　　 　　npm安装——save-dev eslint-loader 　　 　　

在webpack.config。js中添加如下代码:

　　 　　 　　{ 　　测试:/\ . js/美元, 　　装载机:“eslint-loader”, 　　执行:“前”, 　　包括:[路径。解决(__dirname“src”))//指定检查的目录 　　选择:{//这里的配置项参数将会被传递到eslint的CLIEngine 　　格式化程序:需要(eslint-friendly-formatter)//指定错误报告的格式规范 　　} 　　} 　　 　　

注:格式化程序默认是时尚的,如果想用第三方的可以安装该插件,如上方的示例中的eslint-friendly-formatter。

　　

其次,要想webpack具有eslint的能力,就要安装eslint,命令如下:

　　 　　 　　npm安装——save-dev eslint 　　 　　

最后,项目想要使用那些eslin规则,可以创建一个配置项文件.eslintrc.js,代码如下:

　　 　　 　　模块。出口={ 　　根:没错, 　　parserOptions: { 　　sourceType:“模块” 　　}, 　　env: { 　　浏览器:没错, 　　}, 　　规则:{ 　　“缩进”:“错误”,2, 　　“引用”:“错误”,“双”, 　　“半”:“错误”,“总是”, 　　“no-console”:“错误”, 　　“arrow-parens”: 0 　　} 　　} 　　之前 　　 　　

这样,一个简单的webpack引入eslint已经完成了。

　　

这里讲一下eslintrc。js的配置使用,详细细节请参考http://eslint.cn/docs/user-guide

　　

<强> eslint配置项

　　
    　　<李>根限定配置文件的使用范围李 　　<李>解析器指定eslint的解析器李 　　<李> parserOptions设置解析器选项李 　　<李>延伸指定eslint规范李 　　<李>插件引用第三方的插件 　　<李> env指定代码运行的宿主环境李 　　<李>规则启用额外的规则或覆盖默认的规则李 　　<李>全局声明在代码中的自定义全局变量 　　
　　

在我们使用eslint时,配置文件中的规则配置项是否是不可或缺的吗?

　　

答案是肯定的。不过我们也可以不用自定义勒尔,我们可以使用第三方的,这里我们就要使用扩展配置项。

　　

<强>扩展

　　

我们可以使用eslint官方推荐的,也可以使用一些大公司提供的的,如:aribnb谷歌,标准型。

　　

在开发中我们一般使用第三方的。

　　

官方推荐

　　

只需在.eslintrc.js中添加如下代码:

　　 　　 　　延伸:“eslint:推荐的, 　　延伸:“eslint:所有”, 　　 　　

了解详情可以参考一下官方规则表

　　

第三方分享

　　

使用第三方分享的,我们一般需要安装相关的插件代码如下:

　　 　　 　　npm安装——save-dev eslint-config-airbnb//bnb 　　npm安装——save-dev eslint-config-standard//标准 　　 　　

在.eslintrc.js中添加如下代码:

　　 　　 　　延伸:“eslint:谷歌”,//或 　　延伸:“eslint:标准”, 　　 　　

使用这些第三方的扩展,有时我们需要更新一些插件,比如标准:eslint-plugin-import

　　

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

　　

虽然,这些第三方的扩展很不错,但是有时我们需要定义一些比较个性化的规则,我们就需要添加规则配置项。

　　

配置规则

　　

在.eslintrc.js文件中添加规则,代码如下:

　　 　　 　　{ 　　"规则":{ 　　“半”:“错误”,“总是”, 　　“引用”:(“错误”,“双”) 　　} 　　} 　　之前 　　 　　

“半”和“引用”是ESLint中规则的名称。第一个值是错误级别,可以使下面的值之一:

　　
    　　<李>“关闭”或0 -关闭规则李 　　<李>“警告”或1 -将规则视为一个警告(不会影响退出码) 　　<李>“错误”或2 -将规则视为一个错误(退出码为1) 　　
　　

这些规则一般分为两类:

　　
    　　<李>添加默认或第三库中没有的李 　　<李>覆盖默认或第三库的李 　　
　　

我们的项目中可能会有一些其他的文件也需要进行格式规范,如:html、vue,等反应,对于这些文件的处理,我们需要引入第三方插件。

　　

<强>插件(html)

　　

安装eslint-plugin-html,命令如下:

webpack引入eslint配置详解