Vue項(xiàng)目中ESLint配置超全指南(VScode)
Vue項(xiàng)目中ESLint配置(VScode)
1.VScode的配置格式化代碼
1.1下載eslint插件
1.2配置setting.json
打開(kāi)左上角文件-首選項(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ì)訪問(wèn)額外的全局變量;
規(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)提供插件的,插件名稱(chēng)省略了eslint-plugin-,下面這個(gè)配置是用來(lái)規(guī)范html的 plugins: ["vue"], //指定javaScript語(yǔ)言類(lèi)型和風(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 開(kāi)啟警告規(guī)則 //"error" -> 2 開(kāi)啟錯(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ù)中的變量在一起聲明或分開(kāi)聲明 "one-var": 2, // 禁用 console "no-console": process.env.NODE_ENV === "production" ? "error" : "off", // 強(qiáng)制 generator 函數(shù)中 * 號(hào)周?chē)褂靡恢碌目崭? "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ù)包含了一條注釋?zhuān)鼘⒉粫?huì)被認(rèn)為有問(wè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, // 禁止類(lèi)成員中出現(xiàn)重復(fù)的名稱(chēng) "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)鍵字周?chē)崭竦囊恢滦? "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, // 要求操作符周?chē)锌崭?"a ? b : c" "space-infix-ops": 2, // "() => {};" // 強(qiáng)制箭頭函數(shù)前后使用一致的空格 "arrow-spacing": 2, //插值中強(qiáng)制統(tǒng)一間距 //強(qiáng)制組件中的屬性順序 "vue/order-in-components": 0, //不允許字段名稱(chēng)重復(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-09Vue項(xiàng)目中使用flow做類(lèi)型檢測(cè)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用flow做類(lèi)型檢測(cè)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03解決keep-alive同一個(gè)組件不緩存問(wèn)題
這篇文章給大家介紹了如何解決keep-alive同一個(gè)組件不緩存問(wèn)題,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02vue、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ò)問(wèn)題及解決
這篇文章主要介紹了用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12