vue+webpack中配置ESLint
一、ESLint
協(xié)同開發(fā)過程中,經(jīng)常感受到來自代碼檢視的惡意。代碼習(xí)慣不一致,看半天;居然提交低級(jí)錯(cuò)誤,我的天(╯‵□′)╯︵┻━┻!...研究了一番,決定使用ESLint來做代碼規(guī)范檢查。
二、配置方式
- JavaScript注釋:通過JavaScript注釋把配置信息嵌入代碼中。
- package.json:在package.json文件中的eslintConfig字段中指定配置。
- 配置文件:通過.eslintrc.(js/json/yaml/yml)的獨(dú)立文件來為整個(gè)目錄或者子目錄指定配置信息,ESlint會(huì)查找并且自動(dòng)讀取配置文件。
三、配置過程(配置文件)
安裝相關(guān)npm包
yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev
增加文件
- .eslintignore 用來配置不需要檢查的文件(類似git的.gitignore)。
- .eslintrc.js 用來配置ESlint驗(yàn)證規(guī)則的配置文件。
修改webpack配置文件
module.exports = {
module: {
rules: [
test: /\.(js|vue)$/,
loader: "eslint-loader",
enforce: "pre",
//指定檢查的目錄
include: [resolve(__dirname, 'src')],
//eslint檢查報(bào)告的格式規(guī)范
options: {
formatter: require("eslint-friendly-formatter")
}
]
}
}
四、配置文件詳解
以.eslintrc.js為例
module.exports = {
//一旦配置了root,ESlint停止在父級(jí)目錄中查找配置文件
root: true,
//解析器
parser: "babel-eslint",
//想要支持的JS語言選項(xiàng)
parserOptions: {
//啟用ES6語法支持(如果支持es6的全局變量{env: {es6: true}},則默認(rèn)啟用ES6語法支持)
//此處也可以使用年份命名的版本號(hào):2015
ecmaVersion: 6,
//默認(rèn)為script
sourceType: "module",
//支持其他的語言特性
ecmaFeatures: {
//...
}
},
//代碼運(yùn)行的環(huán)境,每個(gè)環(huán)境都會(huì)有一套預(yù)定義的全局對(duì)象,不同環(huán)境可以組合使用
env: {
es6: true,
browser: true,
jquery: true
},
//訪問當(dāng)前源文件中未定義的變量時(shí),no-undef會(huì)報(bào)警告。
//如果這些全局變量是合規(guī)的,可以在globals中配置,避免這些全局變量發(fā)出警告
globals: {
//配置給全局變量的布爾值,是用來控制該全局變量是否允許被重寫
test_param: true
},
//支持第三方插件的規(guī)則,插件以eslint-plugin-作為前綴,配置時(shí)該前綴可省略
//檢查vue文件需要eslint-plugin-vue插件
plugins: ["vue"],
//集成推薦的規(guī)則
extends: ["eslint:recommended", "plugin:vue/essential"],
//啟用額外的規(guī)則或者覆蓋默認(rèn)的規(guī)則
//規(guī)則級(jí)別分別:為"off"(0)關(guān)閉、"warn"(1)警告、"error"(2)錯(cuò)誤--error觸發(fā)時(shí),程序退出
rules: {
//關(guān)閉“禁用console”規(guī)則
"no-console": "off",
//縮進(jìn)不規(guī)范警告,要求縮進(jìn)為2個(gè)空格,默認(rèn)值為4個(gè)空格
"indent": ["warn", 2, {
//設(shè)置為1時(shí)強(qiáng)制switch語句中case的縮進(jìn)為2個(gè)空格
"SwitchCase": 1,
//分別配置var、let和const的縮進(jìn)
"VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
}],
//定義字符串不規(guī)范錯(cuò)誤,要求字符串使用雙引號(hào)
quotes: ["error", "double"],
//....
//更多規(guī)則可查看http://eslint.cn/docs/rules/
}
}
使用JavaScript注釋啟用或禁止指定規(guī)則
/* eslint-disable */
alert('message');
/* eslint-enable no-alert, no-console*/
...
層疊配置
ESlint支持層疊配置,檢測(cè)文件的規(guī)則是其目錄層級(jí)結(jié)構(gòu)中所有.eslintrc文件的組合,當(dāng)規(guī)則沖突的時(shí)候,離檢測(cè)文件最近的規(guī)則優(yōu)先。
默認(rèn)情況下,ESlint會(huì)沿著父級(jí)目錄網(wǎng)上尋找配置文件,直到根目錄。如果配置文件中有root: true,則ESlint會(huì)停止在父級(jí)目錄中查找。
五、配置過程中出現(xiàn)的問題
出現(xiàn)錯(cuò)誤:Use the latest vue-eslint-parser。
解決方法: 把parser: "babel-eslint"移動(dòng)到parserOptions中。
{
//parser: "babel-eslint",
parserOptions: {
parser: "babel-eslint",
//...
}
}
問題原因: eslint-plugin-vue中的很多規(guī)則都需要vue-eslint-parser檢查<template>, vue-eslint-parser和babel-parser二者有沖突。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
Vue仿微信app頁面跳轉(zhuǎn)動(dòng)畫效果
這篇文章主要介紹了Vue仿微信app頁面跳轉(zhuǎn)動(dòng)畫效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
el-select二次封裝實(shí)現(xiàn)可分頁加載數(shù)據(jù)的示例代碼
使用el-select時(shí)一次性渲染幾百條數(shù)據(jù)時(shí)會(huì)造成頁面克頓, 可以通過分頁來實(shí)現(xiàn),所以本文給大家介紹了el-select二次封裝實(shí)現(xiàn)可分頁加載數(shù)據(jù),文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
vue cli3 調(diào)用百度翻譯API翻譯頁面的實(shí)現(xiàn)示例
這篇文章主要介紹了vue cli3 調(diào)用百度翻譯API翻譯頁面的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue如何實(shí)現(xiàn)從response讀取流下載
這篇文章主要介紹了Vue如何實(shí)現(xiàn)從response讀取流下載問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04

