資訊專欄INFORMATION COLUMN
摘要：配置規(guī)則在文件中添加代碼如下和是中規(guī)則的名稱。安裝，命令如下這個(gè)插件將會(huì)提醒模塊腳本之間模擬瀏覽器共享全局變量的行為，因?yàn)檫@不適用于模塊腳本。而用編譯后的代碼使用這款解析器可以避免不必要的麻煩。
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: { // 這里的配置項(xiàng)參數(shù)將會(huì)被傳遞到 eslint 的 CLIEngine
formatter: require("eslint-friendly-formatter") // 指定錯(cuò)誤報(bào)告的格式規(guī)范
}
}
注：formatter默認(rèn)是stylish，如果想用第三方的可以安裝該插件，如上方的示例中的 eslint-friendly-formatter 。
其次，要想webpack具有 eslint 的能力，就要安裝eslint，命令如下：
npm install --save-dev eslint
最后，項(xiàng)目想要使用那些eslin規(guī)則，可以創(chuàng)建一個(gè)配置項(xiàng)文件 ".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
}
}
這樣，一個(gè)簡(jiǎn)單的webpack引入eslint已經(jīng)完成了。
這里講一下 eslintrc.js 的配置使用，詳細(xì)細(xì)節(jié)請(qǐng)參考http://eslint.cn/docs/user-guide
eslint 配置項(xiàng)root 限定配置文件的使用范圍
parser 指定eslint的解析器
parserOptions 設(shè)置解析器選項(xiàng)
extends 指定eslint規(guī)范
plugins 引用第三方的插件
env 指定代碼運(yùn)行的宿主環(huán)境
rules 啟用額外的規(guī)則或覆蓋默認(rèn)的規(guī)則
globals 聲明在代碼中的自定義全局變量
在我們使用eslint時(shí)，配置文件中的 rules 配置項(xiàng)是否是不可或缺的？
答案是肯定的。不過我們也可以不用自定義reules，我們可以使用第三方的，這里我們就要使用extends配置項(xiàng)。
extends我們可以使用eslint官方推薦的，也可以使用一些大公司提供的的，如：aribnb, google, standard。
在開發(fā)中我們一般使用第三方的。
官方推薦只需在 .eslintrc.js 中添加如下代碼：
extends: "eslint:recommended", extends: "eslint:all",
了解詳情可以參考一下官方規(guī)則表
第三方分享使用第三方分享的，我們一般需要安裝相關(guān)的插件代碼如下：
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",
使用這些第三方的擴(kuò)展，有時(shí)我們需要更新一些插件，比如standard：
eslint-plugin-import
不要慌，我們只要按照錯(cuò)誤提示一步一步的安裝這些插件即可。
雖然，這些第三方的擴(kuò)展很不錯(cuò)，但是有時(shí)我們需要定義一些比較個(gè)性化的規(guī)則，我們就需要添加 rules 配置項(xiàng)。
配置規(guī)則在.eslintrc.js 文件中添加 rules, 代碼如下：
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
"semi" 和 "quotes" 是 ESLint 中 規(guī)則 的名稱。第一個(gè)值是錯(cuò)誤級(jí)別，可以使下面的值之一：
"off" or 0 - 關(guān)閉規(guī)則
"warn" or 1 - 將規(guī)則視為一個(gè)警告（不會(huì)影響退出碼）
"error" or 2 - 將規(guī)則視為一個(gè)錯(cuò)誤 (退出碼為1)
這些規(guī)則一般分為兩類：
添加默認(rèn)或第三庫(kù)中沒有的
覆蓋默認(rèn)或第三庫(kù)的
我們的項(xiàng)目中可能會(huì)有一些其他的文件也需要進(jìn)行格式規(guī)范，如：html, vue, react等，對(duì)于這些文件的處理，我們需要引入第三方插件。
plugins（html）安裝 eslint-plugin-html ，命令如下：
npm install --save-dev eslint-plugin-html
這個(gè)插件將會(huì)提醒模塊腳本之間模擬瀏覽器共享全局變量的行為，因?yàn)檫@不適用于模塊腳本。
這個(gè)插件也可以擴(kuò)展文件，如：.vue，.jsx
.eslintrc.js中，添加如下配置項(xiàng)：
settings: {
"html/html-extensions": [".html", ".vue"],
"html/indent": "+2",
},
而對(duì)于這種用 eslint-pulgin-html 擴(kuò)展的的文件我們可以使用 eslint --ext .html,.vue src 進(jìn)行檢測(cè)，如果想要在開發(fā)中邊寫邊檢測(cè)，我們可以使用相應(yīng)文件的loader進(jìn)行處理。然后執(zhí)行 npm run dev 就可以實(shí)現(xiàn)的功能。邊寫邊檢測(cè)的功能。
在開發(fā)中有時(shí)根據(jù)需要，我們可能在同一個(gè)項(xiàng)目不同的目錄使用不同的 .eslintrc.js 文件，這時(shí)我們就需要使用配置項(xiàng) root 。
限定使用范圍 (root: true)如果我們想要在不同的目錄中使用不同的 .eslintrc, 我們就需要在該目錄中添加如下的配置項(xiàng)：
{
"root": true
}
如果我們不設(shè)置的話，它將會(huì)繼續(xù)查找，知道更目錄，如果更目錄有配置文件它將會(huì)使用根目錄的，這樣會(huì)導(dǎo)致當(dāng)前配置目錄配置無法起作用的問題。
在開發(fā)中針對(duì)不同的情況我們要使用不同的解析器，而我們常用的就是 babel-eslint 。
parser（指定解析器）babel-eslint 解析器是一種使用頻率很高的解析器，因?yàn)楝F(xiàn)在很多公司的很多項(xiàng)目目前都使用了es6，為了兼容性考慮基本都使用babel插件對(duì)代碼進(jìn)行編譯。而用babel編譯后的代碼使用 babel-eslint 這款解析器可以避免不必要的麻煩。
babel-eslint 安裝命令：
npm install --save-dev babel-eslint
在 .eslintrc.js 配置文件中添加如下配置項(xiàng)代碼：
parser: "babel-eslint",
如果你使用的默認(rèn)解析器的話，且在代碼中使用了瀏覽器有兼容性的問題的js新特性，使用webpack編譯就會(huì)出現(xiàn)問題，這時(shí)我們一般裝最新的eslint或者安裝是使用 babel-eslint 來解決問題。
env（環(huán)境）在 .eslintrc.js 中添加如下代碼：
"env": {
"browser": true, //
"node": true //
}
指定了環(huán)境，你就可以放心的使用它們的全局變量和屬性。
global指定全局變量。
在 .eslintrc.js 中添加如下代碼：
"globals": {
"var1": true,
"var2": false
}
參考源代碼
webpack干貨
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92660.html
摘要：由于這種差異我們將對(duì)預(yù)處理器文件的配置封裝為函數(shù)，由參數(shù)生成對(duì)應(yīng)配置，將文件放入文件內(nèi)，將配置放在文件內(nèi)。 前言 源代碼 熟悉 webpack 與 webpack4 配置。 webpack4 相對(duì)于 3 的最主要的區(qū)別是所謂的零配置，但是為了滿足我們的項(xiàng)目需求還是要自己進(jìn)行配置，不過我們可以使用一些 webpack 的預(yù)設(shè)值。同時(shí) webpack 也拆成了兩部分，webpack 和 w...
摘要：打開瀏覽器輸入，會(huì)看到構(gòu)建的項(xiàng)目的主頁目錄結(jié)構(gòu)使用編輯器打開推薦使用，下面具體看看目錄結(jié)構(gòu)在中，根據(jù)我們?cè)跇?gòu)建項(xiàng)目的時(shí)候的選項(xiàng)，有以下幾個(gè)命令。 構(gòu)建一個(gè) vue 項(xiàng)目最簡(jiǎn)單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有自己的腳手架工具，其作用就是用配置好的模板迅速搭建起一個(gè)項(xiàng)目工程來，省去自己配置 webpack 配置文件的基本內(nèi)容，大大降低了初學(xué)者構(gòu)建項(xiàng)目的難度。這...
導(dǎo)語: 隨著業(yè)務(wù)的增長(zhǎng)和開發(fā)團(tuán)隊(duì)的成員快速增加，其中很多新人來自于五湖四海各大門派，在編碼的風(fēng)格和習(xí)慣中也出現(xiàn)各異。 通常在相互 codereview 時(shí)發(fā)現(xiàn)很多代碼上的問題，久而久之代碼出現(xiàn)了代碼難以維護(hù)的問題，甚至還會(huì)出現(xiàn)低級(jí)錯(cuò)誤。 因此，我嘗試在前端代碼質(zhì)量的管控上做了些探索，也總結(jié)了一些經(jīng)驗(yàn)分享給大家。 作者：鄭振波 本文大綱介紹 編碼規(guī)范 冗余文件與代碼 1. 編碼規(guī)范 在一些老項(xiàng)...
前言 什么是webpack 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 自...
前言 什么是webpack 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 ...
閱讀 2747·2023-04-26 02:44
閱讀 10017·2021-11-22 14:44
閱讀 2190·2021-09-27 13:36
閱讀 2772·2021-09-08 10:43
閱讀 760·2019-08-30 15:56
閱讀 1453·2019-08-30 15:55
閱讀 2940·2019-08-28 18:12
閱讀 2900·2019-08-26 13:50
