vite項(xiàng)目如何從0開始配置eslint
vite創(chuàng)建的項(xiàng)目默認(rèn)沒有eslint,下面開始從0開始配置。
安裝eslint
npm install eslint --save-dev
初始化
npx eslint --init // 選擇配置 √ How would you like to use ESLint? · problems √ What type of modules does your project use? · esm √ Which framework does your project use? · vue √ Does your project use TypeScript? · No / Yes √ Where does your code run? · browser √ What format do you want your config file to be in? · JavaScript The config that you've selected requires the following dependencies: eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest √ Would you like to install them now with npm? · No / Yes
解決Parsing error: ‘>’ expected
問題:
vue文件的<script setup lang="ts">
行出現(xiàn)報錯Parsing error: '>' expected<br />
解決:
.eslintrc.js添加一行```“parser”:“vue-eslint-parser”,
module.exports = { "env": { "browser": true, "es2021": true }, "parser": "vue-eslint-parser", "extends": [ "eslint:recommended", "plugin:vue/essential", "plugin:@typescript-eslint/recommended" ], "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "vue", "@typescript-eslint" ], "rules": { } }
解決The template root requires exactly one element
問題:
一個模板只允許存在一個根節(jié)點(diǎn),這是vue2的校驗(yàn)規(guī)則,vue3是允許存在多個根節(jié)點(diǎn)的
解決:
1. 第一種是vetur配置調(diào)整,vscode設(shè)置搜索eslint,將框中的勾選去掉,不要選
2. 第二種是.eslintrc.js的配置調(diào)整,將extends中的plugin:vue/essential
改為plugin:vue/vue3-essential
我i這邊是通過第二種方案解決的!
解決’defineProps’ is not defined
在.eslintrc.js的env下面添加'vue/setup-compiler-macros':true
rules配置
解決了上面的問題之后,就可以根據(jù)官方文檔添加rules配置了,主要是根據(jù)公司或者個人開發(fā)習(xí)慣定制規(guī)則。
// eslint-disable-next-line no-undef module.exports = { 'env': { 'browser': true, 'es2021': true, 'vue/setup-compiler-macros': true }, 'parser': 'vue-eslint-parser', 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended' ], 'parserOptions': { 'ecmaVersion': 'latest', 'parser': '@typescript-eslint/parser', 'sourceType': 'module' }, 'plugins': [ 'vue', '@typescript-eslint' ], // rules配置文檔http://eslint.cn/docs/rules/ 'rules': { // --以下是Possible Errors JS代碼中的邏輯錯誤相關(guān) 'no-extra-parens': 'error', // 禁止不必要的括號 // "no-console": "error" // 不允許打印console.log 'no-template-curly-in-string': 'error', // 禁止在常規(guī)字符串中出現(xiàn)模板字符串語法${xxx} // --以下是Best Practices 最佳實(shí)踐 'default-case': 'error', // 強(qiáng)制switch要有default分支 'dot-location': ['error', 'property'], // 要求對象的點(diǎn)要跟屬性同一行 'eqeqeq': 'error', // 要求使用 === 和 !== 'no-else-return': 'error', // 禁止在else前有return,return和else不能同時存在 'no-empty-function': 'error', // 禁止出現(xiàn)空函數(shù),有意而為之的可以在函數(shù)內(nèi)部加條注釋 'no-multi-spaces': 'error', // 禁止出現(xiàn)多個空格,如===前后可以有一個空格,但是不能有多個空格 'no-multi-str': 'error', // 禁止出現(xiàn)多行字符串,可以使用模板字符串換行 'no-self-compare': 'error', // 禁止自身比較 'no-unmodified-loop-condition': 'error', // 禁止一成不變的循環(huán)條件,如while條件,防止死循環(huán) 'no-useless-concat': 'error', // 禁止沒有必要的字符串拼接,如'a'+'b'應(yīng)該寫成'ab' 'require-await': 'error', // 禁止使用不帶await的async表達(dá)式 // --以下是Stylistic Issues 主觀的代碼風(fēng)格 'array-element-newline': ['error', 'consistent'], // 數(shù)組元素要一致的換行或者不換行 'block-spacing': 'error', // 強(qiáng)制函數(shù)/循環(huán)等塊級作用域中的花括號內(nèi)前后有一個空格(對象除外) 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }], // if/elseif/else左花括號要跟if..同行,右花括號要換行;或者全部同一行 'comma-dangle': ['error', 'only-multiline'], // 允許在對象或數(shù)組的最后一項(xiàng)(不與結(jié)束括號同行)加個逗號 'comma-spacing': 'error', // 要求在逗號后面加個空格,禁止在逗號前面加一個空格 'comma-style': 'error', // 要求逗號放在數(shù)組元素、對象屬性或變量聲明之后,且在同一行 'computed-property-spacing': 'error', // 禁止在計算屬性中出現(xiàn)空格,如obj[ 'a' ]是錯的,obj['a']是對的 'eol-last': 'error', // 強(qiáng)制文件的末尾有一個空行 'func-call-spacing': 'error', // 禁止函數(shù)名和括號之間有個空格 'function-paren-newline': 'error', // 強(qiáng)制函數(shù)括號內(nèi)的參數(shù)一致?lián)Q行或一致不換行 'implicit-arrow-linebreak': 'error', // 禁止箭頭函數(shù)的隱式返回 在箭頭函數(shù)體之前出現(xiàn)換行 'indent': ['error', 2], // 使用一致的縮進(jìn),2個空格 'jsx-quotes': 'error', // 強(qiáng)制在jsx中使用雙引號 'key-spacing': 'error', // 強(qiáng)制對象鍵值冒號后面有一個空格 'lines-around-comment': 'error', // 要求在塊級注釋/**/之前有一個空行 'multiline-comment-style': 'error', // 多行注釋同一個風(fēng)格,每一行前面都要有* 'new-cap': 'error', // 要求構(gòu)造函數(shù)首字母大寫 'newline-per-chained-call': ['error', { 'ignoreChainWithDepth': 2 }], // 鏈?zhǔn)秸{(diào)用長度超過2時,強(qiáng)制要求換行 'no-lonely-if': 'error', // 禁止else中出現(xiàn)單獨(dú)的if 'no-multiple-empty-lines': 'error', // 限制最多出現(xiàn)兩個空行 'no-trailing-spaces': 'error', // 禁止在空行使用空白字符 'no-unneeded-ternary': 'error', // 禁止多余的三元表達(dá)式,如a === 1 ? true : false應(yīng)縮寫為a === 1 'no-whitespace-before-property': 'error', // 禁止屬性前有空白,如console. log(obj['a']),log前面的空白有問題 'nonblock-statement-body-position': 'error', // 強(qiáng)制單行語句不換行 'object-curly-newline': ['error', { 'multiline': true }], // 對象數(shù)屬性要有一致的換行,都換行或都不換行 'object-curly-spacing': ['error', 'always'], // 強(qiáng)制對象/解構(gòu)賦值/import等花括號前后有空格 'object-property-newline': ['error', { 'allowAllPropertiesOnSameLine': true }], // 強(qiáng)制對象的屬性在同一行或全換行 'one-var-declaration-per-line': 'error', // 強(qiáng)制變量初始化語句換行 'operator-assignment': 'error', // 盡可能的簡化賦值操作,如x=x+1 應(yīng)簡化為x+=1 'quotes': ['error', 'single'], // 要求字符串盡可能的使用單引號 'semi': ['error', 'never'], // 不要分號 'semi-spacing': 'error', // 強(qiáng)制分號后面有空格,如for (let i=0; i<20; i++) 'semi-style': 'error', // 強(qiáng)制分號出現(xiàn)在句末 'space-before-blocks': 'error', // 強(qiáng)制塊(for循環(huán)/if/函數(shù)等)前面有一個空格,如for(...){}是錯的,花括號前面要空格:for(...) {} 'space-infix-ops': 'error', // 強(qiáng)制操作符(+-/*)前后有一個空格 'spaced-comment': 'error', // 強(qiáng)制注釋(//或/*)后面要有一個空格 // --以下是ECMAScript 6 ES6相關(guān)的 'arrow-body-style': 'error', // 當(dāng)前頭函數(shù)體的花括號可以省略時,不允許出現(xiàn)花括號 'arrow-parens': ['error', 'as-needed'], // 箭頭函數(shù)參數(shù)只有一個時,不允許寫圓括號 'arrow-spacing': 'error', // 要求箭頭函數(shù)的=>前后有空格 'no-confusing-arrow': 'error', // 禁止在可能與比較操作符混淆的地方使用箭頭函數(shù) 'no-duplicate-imports': 'error', // 禁止重復(fù)導(dǎo)入 'no-useless-computed-key': 'error', // 禁止不必要的計算屬性,如obj3={['a']: 1},其中['a']是不必要的,直接寫'a' 'no-var': 'error', // 要求使用let或const,而不是var 'object-shorthand': 'error', // 要求對象字面量使用簡寫 'prefer-const': 'error', // 要求使用const聲明不會被修改的變量 'prefer-destructuring': ['error', { 'array': false, 'object': true }, { 'enforceForRenamedProperties': true }], // 要求優(yōu)先使用結(jié)構(gòu)賦值,enforceForRenamedProperties為true將規(guī)則應(yīng)用于重命名的變量 'prefer-template': 'error', // 使用模板字符串,而不是字符串拼接 'rest-spread-spacing': 'error', // 擴(kuò)展運(yùn)算符...和表達(dá)式之間不允許有空格,如... re1錯誤,應(yīng)該是...re1 'template-curly-spacing': 'error', // 禁止模板字符串${}內(nèi)前后有空格 } }
使用vscode快捷鍵一鍵格式化
??右鍵 -> 使用…格式化文檔 -> (最后一項(xiàng))配置默認(rèn)格式化程序 -> 選擇ESlint。
之后開發(fā)時有eslint報錯時,使用shift+alt+f格式化,可以解決大部分報錯,個別無法格式化的就手動解決吧~
配置lint指令
在package.json的scripts添加指令"lint":"eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"
,之后執(zhí)行npm run lint
也可以自動修復(fù)eslint報錯。
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義組件如何通過v-model指令控制組件的隱藏、顯示
這篇文章主要介紹了vue自定義組件如何通過v-model指令控制組件的隱藏、顯示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式
這篇文章主要介紹了vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
這篇文章主要給大家介紹了關(guān)于vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法,Vue3是目前前端開發(fā)中非常流行的框架之一,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06@vue/cli4.x版本的vue.config.js常用配置方式
這篇文章主要介紹了@vue/cli4.x版本的vue.config.js常用配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-10-10