在webpack中使用eslint配置（详细教程）-js教程-PHP中文网
本篇文章主要介紹了webpack引入eslint配置詳解，現(xiàn)在分享給大家，也給大家做個參考。
webpack中eslint使用
首先，要使webpack支持eslint，就要要安裝 eslint-loader ，命令如下:
1
npm install --save-dev eslint-loader
在 webpack.config.js 中添加如下代碼：
1
2
3
4
5
6
7
8
9
{
??test: /\.js$/,
??loader: 'eslint-loader',
??enforce: "pre",
??include: [path.resolve(__dirname, 'src')], // 指定檢查的目錄
??options: { // 這里的配置項參數(shù)將會被傳遞到 eslint 的 CLIEngine?
????formatter: require('eslint-friendly-formatter') // 指定錯誤報告的格式規(guī)范
??}
}
注：formatter默認(rèn)是stylish，如果想用第三方的可以安裝該插件，如上方的示例中的 eslint-friendly-formatter 。
其次，要想webpack具有 eslint 的能力，就要安裝eslint，命令如下：
1
npm install --save-dev eslint
最后，項目想要使用那些eslin規(guī)則，可以創(chuàng)建一個配置項文件 '.eslintrc.js'，代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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已經(jīng)完成了。
這里講一下 eslintrc.js 的配置使用，詳細(xì)細(xì)節(jié)請參考http://eslint.cn/docs/user-guide
eslint 配置項
root 限定配置文件的使用范圍
parser 指定eslint的解析器
parserOptions 設(shè)置解析器選項
extends 指定eslint規(guī)范
plugins 引用第三方的插件
env 指定代碼運行的宿主環(huán)境
rules 啟用額外的規(guī)則或覆蓋默認(rèn)的規(guī)則
globals 聲明在代碼中的自定義全局變量
在我們使用eslint時，配置文件中的 rules 配置項是否是不可或缺的？
答案是肯定的。不過我們也可以不用自定義reules，我們可以使用第三方的，這里我們就要使用extends配置項。
extends
我們可以使用eslint官方推薦的，也可以使用一些大公司提供的的，如：aribnb, google, standard。
在開發(fā)中我們一般使用第三方的。
官方推薦
只需在 .eslintrc.js 中添加如下代碼：
1
2
extends: 'eslint:recommended',
extends: 'eslint:all',
了解詳情可以參考一下官方規(guī)則表
第三方分享
使用第三方分享的，我們一般需要安裝相關(guān)的插件代碼如下：
1
2
npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard
在 .eslintrc.js 中添加如下代碼：
1
2
3
extends: 'eslint:google',
// or
extends: 'eslint:standard',
使用這些第三方的擴展，有時我們需要更新一些插件，比如standard：eslint-plugin-import
不要慌，我們只要按照錯誤提示一步一步的安裝這些插件即可。
雖然，這些第三方的擴展很不錯，但是有時我們需要定義一些比較個性化的規(guī)則，我們就需要添加 rules 配置項。
配置規(guī)則
在.eslintrc.js 文件中添加 rules, 代碼如下：
1
2
3
4
5
6
{
??"rules": {
????"semi": ["error", "always"],
????"quotes": ["error", "double"]
??}
}
"semi" 和 "quotes" 是 ESLint 中 規(guī)則 的名稱。第一個值是錯誤級別，可以使下面的值之一：
"off" or 0 - 關(guān)閉規(guī)則
"warn" or 1 - 將規(guī)則視為一個警告（不會影響退出碼）
"error" or 2 - 將規(guī)則視為一個錯誤 (退出碼為1)
這些規(guī)則一般分為兩類：
添加默認(rèn)或第三庫中沒有的
覆蓋默認(rèn)或第三庫的
我們的項目中可能會有一些其他的文件也需要進(jìn)行格式規(guī)范，如：html, vue, react等，對于這些文件的處理，我們需要引入第三方插件。
plugins（html）
安裝 eslint-plugin-html ，命令如下：
1
npm install --save-dev eslint-plugin-html
這個插件將會提醒模塊腳本之間模擬瀏覽器共享全局變量的行為，因為這不適用于模塊腳本。
這個插件也可以擴展文件，如：.vue，.jsx
.eslintrc.js中，添加如下配置項：
1
2
3
4
settings: {
??'html/html-extensions': ['.html', '.vue'],
??'html/indent': '+2',
},
而對于這種用 eslint-pulgin-html 擴展的的文件我們可以使用 eslint --ext .html,.vue src 進(jìn)行檢測，如果想要在開發(fā)中邊寫邊檢測，我們可以使用相應(yīng)文件的loader進(jìn)行處理。然后執(zhí)行 npm run dev 就可以實現(xiàn)的功能。邊寫邊檢測的功能。
在開發(fā)中有時根據(jù)需要，我們可能在同一個項目不同的目錄使用不同的 .eslintrc.js 文件，這時我們就需要使用配置項 root 。
限定使用范圍 (root: true)
如果我們想要在不同的目錄中使用不同的 .eslintrc, 我們就需要在該目錄中添加如下的配置項：
1
2
3
{
??"root": true
}
如果我們不設(shè)置的話，它將會繼續(xù)查找，知道更目錄，如果更目錄有配置文件它將會使用根目錄的，這樣會導(dǎo)致當(dāng)前配置目錄配置無法起作用的問題。
在開發(fā)中針對不同的情況我們要使用不同的解析器，而我們常用的就是 babel-eslint 。
parser（指定解析器）
babel-eslint 解析器是一種使用頻率很高的解析器，因為現(xiàn)在很多公司的很多項目目前都使用了es6，為了兼容性考慮基本都使用babel插件對代碼進(jìn)行編譯。而用babel編譯后的代碼使用 babel-eslint 這款解析器可以避免不必要的麻煩。
babel-eslint 安裝命令：
1
npm install --save-dev babel-eslint
在 .eslintrc.js 配置文件中添加如下配置項代碼：
1
parser: 'babel-eslint',
如果你使用的默認(rèn)解析器的話，且在代碼中使用了瀏覽器有兼容性的問題的js新特性，使用webpack編譯就會出現(xiàn)問題，這時我們一般裝最新的eslint或者安裝是使用 babel-eslint 來解決問題。
env（環(huán)境）
在 .eslintrc.js 中添加如下代碼：
1
2
3
4
"env": {
??"browser": true, //
??"node": true //
}
指定了環(huán)境，你就可以放心的使用它們的全局變量和屬性。
global
指定全局變量。
在 .eslintrc.js 中添加如下代碼：
1
2
3
4
"globals": {
??"var1": true,
??"var2": false?
}
上面是我整理給大家的，希望今后會對大家有幫助。
總結(jié)
以上是生活随笔為你收集整理的在webpack中使用eslint配置（详细教程）-js教程-PHP中文网的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android File.listFil
- 下一篇： dedecms模版php,dedecms