Vue項(xiàng)目中ESLint配置超全指南(VScode)
Vue項(xiàng)目中ESLint配置(VScode)
1.VScode的配置格式化代碼
1.1下載eslint插件

1.2配置setting.json
打開左上角文件-首選項(xiàng)-設(shè)置,在設(shè)置中搜索eslint,點(diǎn)擊并翻頁(yè)到最下面,點(diǎn)擊setting.json進(jìn)行配置:
// 值設(shè)置為true時(shí),每次保存的時(shí)候自動(dòng)格式化;值設(shè)置為false時(shí),代碼格式化請(qǐng)按shift+alt+F
"editor.formatOnSave": false,
// 每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù):
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": ["js", "vue", ".jsx", ".tsx"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
1.3保存時(shí)按照eslint規(guī)則保存
鼠標(biāo)右鍵->使用…格式化文檔->配置默認(rèn)格式程序->選擇eslint
這樣之后 alt+Shift+f之后就是按照eslint規(guī)則保存
2.安裝ESlint
npm i eslint -D
3.安裝ESlint相關(guān)依賴
npm i eslint-plugin-vue vue-eslint-parser -D npm i babel-eslint -D npm i eslint-config-standard-D
4.配置.eslintrc.js
ESLint配置的內(nèi)容
環(huán)境:配置腳本在哪個(gè)環(huán)境下運(yùn)行;
全局變量:腳本運(yùn)行期間會(huì)訪問額外的全局變量;
規(guī)則:配置代碼的語(yǔ)法規(guī)則及規(guī)則的等級(jí)。
具體內(nèi)容:
module.exports = {
//此項(xiàng)是用來(lái)告訴eslint找當(dāng)前配置文件不能往父級(jí)查找
root: true,
//指定eslint繼承的模板
extends: ["plugin:vue/essential", "@vue/standard"],
//此項(xiàng)指定環(huán)境的全局變量,下面的配置指定為瀏覽器環(huán)境
env: {
browser: true
},
// 此項(xiàng)是用來(lái)提供插件的,插件名稱省略了eslint-plugin-,下面這個(gè)配置是用來(lái)規(guī)范html的
plugins: ["vue"],
//指定javaScript語(yǔ)言類型和風(fēng)格
parserOptions: {
parser: "babel-eslint"
},
//規(guī)則https://www.wenjiangs.com/docs/eslint,vue規(guī)則:https://eslint.vuejs.org/rules/
// 主要有如下的設(shè)置規(guī)則,可以設(shè)置字符串也可以設(shè)置數(shù)字,兩者效果一致
// "off" -> 0 關(guān)閉規(guī)則
// "warn" -> 1 開啟警告規(guī)則
//"error" -> 2 開啟錯(cuò)誤規(guī)則
rules: {
// 使用 === 替代 == allow-null允許null和undefined== [2, "allow-null"]
eqeqeq: 0,
// 雙峰駝命名格式
camelcase: 0,
//要求或者禁止Yoda條件
yoda: 2,
// 行尾不使用分號(hào)
semi: 0,
//強(qiáng)制一致地使用反引號(hào)、雙引號(hào)或單引號(hào)。
quotes: 2,
//強(qiáng)制函數(shù)中的變量在一起聲明或分開聲明
"one-var": 2,
// 禁用 console
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
// 強(qiáng)制 generator 函數(shù)中 * 號(hào)周圍使用一致的空格
"generator-star-spacing": "off",
// 禁用 debugger
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
// 禁止對(duì)象字面量中出現(xiàn)重復(fù)的 key
"no-dupe-keys": 2,
// 函數(shù)參數(shù)不能重復(fù)
"no-dupe-args": 2,
// 禁止重復(fù)的函數(shù)聲明
"no-func-assign": 2,
// 禁止重復(fù)的 case 標(biāo)簽
"no-duplicate-case": 2,
// 禁用未聲明的變量
"no-undef": 1,
//禁止出現(xiàn)多個(gè)空格
"no-multi-spaces": 2,
// 不允許標(biāo)簽與變量同名
"no-label-var": 2,
//禁止tab
"no-tabs": 1,
// 禁止 var 聲明 與外層作用域的變量同名
"no-shadow": 0,
// 禁止 if 語(yǔ)句中有 return 之后有 else
"no-else-return": 0,
// 禁止出現(xiàn)空函數(shù).如果一個(gè)函數(shù)包含了一條注釋,它將不會(huì)被認(rèn)為有問題。
"no-empty-function": 1,
// 禁止出現(xiàn)未使用過(guò)的變量
"no-unused-vars": 1,
//禁止在返回語(yǔ)句中賦值
"no-return-assign": 0,
// 禁用行尾空格
"no-trailing-spaces": 2,
// 禁止修改 const 聲明的變量
"no-const-assign": 2,
// 禁止類成員中出現(xiàn)重復(fù)的名稱
"no-dupe-class-members": 2,
//禁止使用alert confirm promp
"no-alert": process.env.NODE_ENV === "production" ? "error" : "off",
//禁止多余的冒號(hào)
"no-extra-semi": 2,
//禁止在條件中使用常量表達(dá)式
"no-constant-condition": 2,
//空行最多不能超過(guò)2行
"no-multiple-empty-lines": [1, { max: 2 }],
//禁止無(wú)用的表達(dá)式
"no-unused-expressions": 1,
//禁用不必要的嵌套塊
"no-lone-blocks": 2,
//不允許使用逗號(hào)操作符
"no-sequences": 2,
//禁止不規(guī)則的空白
"no-irregular-whitespace": 2,
//函數(shù)括號(hào)前的空格
"space-before-function-paren": 0,
//處理回調(diào)錯(cuò)誤
"handle-callback-err": 1,
//首選承諾拒絕錯(cuò)誤
"prefer-promise-reject-errors": 0,
//要求或禁止在注釋前有空白 (space 或 tab)
"spaced-comment": 1,
//強(qiáng)制關(guān)鍵字周圍空格的一致性
"keyword-spacing": 1,
//強(qiáng)制在花括號(hào)中使用一致的空格
"object-curly-spacing": 1,
// 控制逗號(hào)前后的空格
"comma-spacing": [
2,
{
before: false,
after: true
}
],
// 要求或禁止 var 聲明語(yǔ)句后有一行空行
"newline-after-var": 0,
//強(qiáng)制使用一致的縮進(jìn)
indent: 0,
// html 內(nèi) 縮進(jìn)
"vue/html-indent": 0,
// 插值兩端必須留一個(gè)空格
"vue/mustache-interpolation-spacing": 0,
//強(qiáng)制每行的最大屬性數(shù)
"vue/max-attributes-per-line": 0,
//vue/屬性順序
"vue/attributes-order": 0,
// 強(qiáng)制要求在對(duì)象字面量的屬性中鍵和值之間使用一致的間距 "var obj = { "foo": 42 };"
"key-spacing": 0,
// 禁止末尾逗號(hào)
"comma-dangle": 0,
// 強(qiáng)制在塊之前使用一致的空格 "function a() {}"
"space-before-blocks": 0,
// 要求操作符周圍有空格 "a ? b : c"
"space-infix-ops": 2,
// "() => {};" // 強(qiáng)制箭頭函數(shù)前后使用一致的空格
"arrow-spacing": 2,
//插值中強(qiáng)制統(tǒng)一間距
//強(qiáng)制組件中的屬性順序
"vue/order-in-components": 0,
//不允許字段名稱重復(fù)
"vue/no-dupe-keys": 2,
//多次引用同個(gè)包
"import/no-duplicates": 2,
//執(zhí)行有效v-for指令
"vue/valid-v-for": 2,
//V-bind:key使用v-for指令要求
"vue/require-v-for-key": 2,
//不允許解析錯(cuò)誤<template>
"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
//強(qiáng)制執(zhí)行自閉式
"vue/html-self-closing": "off",
//不允許計(jì)算屬性中的副作用
"vue/no-side-effects-in-computed-properties": 0,
//禁止 v-for 指令或范圍屬性的未使用變量定義
"vue/no-unused-vars": 1,
//執(zhí)行有效v-model指令
"vue/valid-v-model": 2,
//強(qiáng)制執(zhí)行有效的模板根
"vue/valid-template-root": 2
}
};
5.package.json配置
lint:檢驗(yàn)eslint規(guī)則
lint-fix:修復(fù)一般的eslint檢驗(yàn)出的缺陷比如雙引號(hào)變?yōu)閱我?hào)
"dev": "vue-cli-service serve --open", "build": "vue-cli-service build", "dev-eslint": "npm run lint vue-cli-service serve --open", "build-eslint": "npm run lint vue-cli-service build", "lint": "eslint --ext .js --ext .vue src", "lint-fix": "eslint --fix --ext .js,.vue src"
6.Config.js配置
在vue.config.js中把lintOnSave改為true
7.擴(kuò)展
關(guān)閉ESLint檢查
多行關(guān)閉所有規(guī)則:
/* eslint-disable / console.log(‘hello world') / eslint-enable */
單行關(guān)閉所有規(guī)則:
console.log(‘hello world') // eslint-disable-line // eslint-disable-next-line console.log(‘hello world')
單行關(guān)閉指定規(guī)則:
console.log(‘hello world') // eslint-disable-line no-alert // eslint-disable-next-line no-alert console.log(‘hello world')
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中ESLint配置的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目ESLint配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值的相關(guān)資料,需要的朋友可以參考下2019-09-09
Vue項(xiàng)目中使用flow做類型檢測(cè)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用flow做類型檢測(cè)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue、uniapp實(shí)現(xiàn)組件動(dòng)態(tài)切換效果
在Vue中,通過(guò)使用動(dòng)態(tài)組件,我們可以實(shí)現(xiàn)組件的動(dòng)態(tài)切換,從而達(dá)到頁(yè)面的動(dòng)態(tài)展示效果,這篇文章主要介紹了vue、uniapp實(shí)現(xiàn)組件動(dòng)態(tài)切換,需要的朋友可以參考下2023-10-10
用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12

