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ī)則保存
鼠標(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)境:配置腳本在哪個環(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 標(biāo)簽 "no-duplicate-case": 2, // 禁用未聲明的變量 "no-undef": 1, //禁止出現(xiàn)多個空格 "no-multi-spaces": 2, // 不允許標(biāo)簽與變量同名 "no-label-var": 2, //禁止tab "no-tabs": 1, // 禁止 var 聲明 與外層作用域的變量同名 "no-shadow": 0, // 禁止 if 語句中有 return 之后有 else "no-else-return": 0, // 禁止出現(xiàn)空函數(shù).如果一個函數(shù)包含了一條注釋,它將不會被認(rèn)為有問題。 "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、uniapp實現(xiàn)組件動態(tài)切換效果
在Vue中,通過使用動態(tài)組件,我們可以實現(xiàn)組件的動態(tài)切換,從而達到頁面的動態(tài)展示效果,這篇文章主要介紹了vue、uniapp實現(xiàn)組件動態(tài)切換,需要的朋友可以參考下2023-10-10vue+elementUI組件table實現(xiàn)前端分頁功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實現(xiàn)前端分頁功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12