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 // bnb
npm install --save-dev eslint-config-standard // standard在 .eslintrc.js 中增加以下代码：
extends: 'eslint:google',
// or
extends: 'eslint:standard',运用这些第三方的扩大，偶然我们须要更新一些插件，比方standard：
不要慌，我们只需根据毛病提示一步一步的装置这些插件即可。
虽然，这些第三方的扩大很不错，然则偶然我们须要定义一些比较个性化的划定规矩，我们就须要增加 rules 设置项。
设置划定规矩
在.eslintrc.js 文件中增加 rules, 代码以下：
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}“semi” 和 “quotes” 是 ESLint 中 划定规矩 的称号。第一个值是毛病级别，能够使下面的值之一：
- “off” or 0 – 封闭划定规矩
- “warn” or 1 – 将划定规矩视为一个正告（不会影响退出码）
- “error” or 2 – 将划定规矩视为一个毛病 (退出码为1)
这些划定规矩平常分为两类：
- 增加默许或第三库中没有的
- 掩盖默许或第三库的
我们的项目中能够会有一些其他的文件也须要举行花样范例，如：html, vue, react等，关于这些文件的处置惩罚，我们须要引入第三方插件。
plugins（html）
装置 eslint-plugin-html ，敕令以下：
npm install --save-dev eslint-plugin-html
这个插件将会提示模块剧本之间模仿浏览器同享全局变量的行动，由于这不适用于模块剧本。
这个插件也能够扩大文件，如：.vue，.jsx
.eslintrc.js中，增加以下设置项：
settings: {
'html/html-extensions': ['.html', '.vue'],
'html/indent': '+2',
},而关于这类用 eslint-pulgin-html 扩大的的文件我们能够运用 eslint --ext .html,.vue src 举行检测，假如想要在开辟中边写边检测，我们能够运用响应文件的loader举行处置惩罚。然后实行 npm run dev 就能够完成的功用。边写边检测的功用。
在开辟中偶然根据须要，我们能够在同一个项目差别的目次运用差别的 .eslintrc.js 文件，这时候我们就须要运用设置项 root 。
限制运用范围 (root: true)
假如我们想要在差别的目次中运用差别的 .eslintrc, 我们就须要在该目次中增加以下的设置项：
{
"root": true
}假如我们不设置的话，它将会继承查找，晓得更目次，假如更目次有设置文件它将会运用根目次的，如许会致使当前设置目次设置没法起作用的题目。
在开辟中针对差别的状况我们要运用差别的解析器，而我们经常使用的就是 babel-eslint 。
parser（指定解析器）
babel-eslint 解析器是一种运用频次很高的解析器，由于如今许多公司的许多项目现在都运用了es6，为了兼容性斟酌基础都运用babel插件对代码举行编译。而用babel编译后的代码运用 babel-eslint 这款解析器能够防止不必要的贫苦。
babel-eslint 装置敕令：
npm install --save-dev babel-eslint
在 .eslintrc.js 设置文件中增加以下设置项代码：
parser: 'babel-eslint',假如你运用的默许解析器的话，且在代码中运用了浏览器有兼容性的题目的js新特征，运用webpack编译就会出现题目，这时候我们平常装最新的eslint或许装置是运用 babel-eslint 来解决题目。
env（环境）
在 .eslintrc.js 中增加以下代码：
"env": {
"browser": true, //
"node": true //
}指定了环境，你就能够宁神的运用它们的全局变量和属性。
global
指定全局变量。
在 .eslintrc.js 中增加以下代码：
"globals": {
"var1": true,
"var2": false
}