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

1.2配置setting.json
打開左上角文件-首選項-設(shè)置,在設(shè)置中搜索eslint,點擊并翻頁到最下面,點擊setting.json進行配置:
// 值設(shè)置為true時,每次保存的時候自動格式化;值設(shè)置為false時,代碼格式化請按shift+alt+F
"editor.formatOnSave": false,
// 每次保存的時候?qū)⒋a按eslint格式進行修復(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保存時按照eslint規(guī)則保存
鼠標右鍵->使用…格式化文檔->配置默認格式程序->選擇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)境:配置腳本在哪個環(huán)境下運行;
全局變量:腳本運行期間會訪問額外的全局變量;
規(guī)則:配置代碼的語法規(guī)則及規(guī)則的等級。
具體內(nèi)容:
module.exports = {
//此項是用來告訴eslint找當(dāng)前配置文件不能往父級查找
root: true,
//指定eslint繼承的模板
extends: ["plugin:vue/essential", "@vue/standard"],
//此項指定環(huán)境的全局變量,下面的配置指定為瀏覽器環(huán)境
env: {
browser: true
},
// 此項是用來提供插件的,插件名稱省略了eslint-plugin-,下面這個配置是用來規(guī)范html的
plugins: ["vue"],
//指定javaScript語言類型和風(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 開啟錯誤規(guī)則
rules: {
// 使用 === 替代 == allow-null允許null和undefined== [2, "allow-null"]
eqeqeq: 0,
// 雙峰駝命名格式
camelcase: 0,
//要求或者禁止Yoda條件
yoda: 2,
// 行尾不使用分號
semi: 0,
//強制一致地使用反引號、雙引號或單引號。
quotes: 2,
//強制函數(shù)中的變量在一起聲明或分開聲明
"one-var": 2,
// 禁用 console
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
// 強制 generator 函數(shù)中 * 號周圍使用一致的空格
"generator-star-spacing": "off",
// 禁用 debugger
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
// 禁止對象字面量中出現(xiàn)重復(fù)的 key
"no-dupe-keys": 2,
// 函數(shù)參數(shù)不能重復(fù)
"no-dupe-args": 2,
// 禁止重復(fù)的函數(shù)聲明
"no-func-assign": 2,
// 禁止重復(fù)的 case 標簽
"no-duplicate-case": 2,
// 禁用未聲明的變量
"no-undef": 1,
//禁止出現(xiàn)多個空格
"no-multi-spaces": 2,
// 不允許標簽與變量同名
"no-label-var": 2,
//禁止tab
"no-tabs": 1,
// 禁止 var 聲明 與外層作用域的變量同名
"no-shadow": 0,
// 禁止 if 語句中有 return 之后有 else
"no-else-return": 0,
// 禁止出現(xiàn)空函數(shù).如果一個函數(shù)包含了一條注釋,它將不會被認為有問題。
"no-empty-function": 1,
// 禁止出現(xiàn)未使用過的變量
"no-unused-vars": 1,
//禁止在返回語句中賦值
"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",
//禁止多余的冒號
"no-extra-semi": 2,
//禁止在條件中使用常量表達式
"no-constant-condition": 2,
//空行最多不能超過2行
"no-multiple-empty-lines": [1, { max: 2 }],
//禁止無用的表達式
"no-unused-expressions": 1,
//禁用不必要的嵌套塊
"no-lone-blocks": 2,
//不允許使用逗號操作符
"no-sequences": 2,
//禁止不規(guī)則的空白
"no-irregular-whitespace": 2,
//函數(shù)括號前的空格
"space-before-function-paren": 0,
//處理回調(diào)錯誤
"handle-callback-err": 1,
//首選承諾拒絕錯誤
"prefer-promise-reject-errors": 0,
//要求或禁止在注釋前有空白 (space 或 tab)
"spaced-comment": 1,
//強制關(guān)鍵字周圍空格的一致性
"keyword-spacing": 1,
//強制在花括號中使用一致的空格
"object-curly-spacing": 1,
// 控制逗號前后的空格
"comma-spacing": [
2,
{
before: false,
after: true
}
],
// 要求或禁止 var 聲明語句后有一行空行
"newline-after-var": 0,
//強制使用一致的縮進
indent: 0,
// html 內(nèi) 縮進
"vue/html-indent": 0,
// 插值兩端必須留一個空格
"vue/mustache-interpolation-spacing": 0,
//強制每行的最大屬性數(shù)
"vue/max-attributes-per-line": 0,
//vue/屬性順序
"vue/attributes-order": 0,
// 強制要求在對象字面量的屬性中鍵和值之間使用一致的間距 "var obj = { "foo": 42 };"
"key-spacing": 0,
// 禁止末尾逗號
"comma-dangle": 0,
// 強制在塊之前使用一致的空格 "function a() {}"
"space-before-blocks": 0,
// 要求操作符周圍有空格 "a ? b : c"
"space-infix-ops": 2,
// "() => {};" // 強制箭頭函數(shù)前后使用一致的空格
"arrow-spacing": 2,
//插值中強制統(tǒng)一間距
//強制組件中的屬性順序
"vue/order-in-components": 0,
//不允許字段名稱重復(fù)
"vue/no-dupe-keys": 2,
//多次引用同個包
"import/no-duplicates": 2,
//執(zhí)行有效v-for指令
"vue/valid-v-for": 2,
//V-bind:key使用v-for指令要求
"vue/require-v-for-key": 2,
//不允許解析錯誤<template>
"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
//強制執(zhí)行自閉式
"vue/html-self-closing": "off",
//不允許計算屬性中的副作用
"vue/no-side-effects-in-computed-properties": 0,
//禁止 v-for 指令或范圍屬性的未使用變量定義
"vue/no-unused-vars": 1,
//執(zhí)行有效v-model指令
"vue/valid-v-model": 2,
//強制執(zhí)行有效的模板根
"vue/valid-template-root": 2
}
};
5.package.json配置
lint:檢驗eslint規(guī)則
lint-fix:修復(fù)一般的eslint檢驗出的缺陷比如雙引號變?yōu)閱我?/strong>
"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.擴展
關(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項目中ESLint配置的文章就介紹到這了,更多相關(guān)Vue項目ESLint配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+element-ui集成隨機驗證碼+用戶名+密碼的form表單驗證功能
在登入頁面,我們往往需要通過輸入驗證碼才能進行登入,那我們下面就詳講一下在vue項目中如何配合element-ui實現(xiàn)這個功能,需要的朋友可以參考下2018-08-08
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
用VueJS寫一個Chrome瀏覽器插件的實現(xiàn)方法
這篇文章主要介紹了用VueJS寫一個Chrome瀏覽器插件的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02

