1.創(chuàng)建一個(gè)vue3項(xiàng)目
創(chuàng)建指令為：npm creat vite@latest
根據(jù)指令依次運(yùn)行：
這樣子我們就創(chuàng)建了一個(gè)純凈的vite+vue3+ts的項(xiàng)目模板，運(yùn)行起來為：
2.添加eslint
（1）安裝eslint：
npm install -D eslint
（2）初始化eslint：
npx eslint --init
在package.json中增加一句腳本用于檢測(cè)和修復(fù)代碼：
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
此時(shí)運(yùn)行npm run lint，會(huì)看到這么一串報(bào)錯(cuò)：
3.解決引入了eslint之后的報(bào)錯(cuò)問題
（1.）按照?qǐng)?bào)錯(cuò)信息對(duì) .eslintrc.cjs 中的parserOptions.project進(jìn)行相應(yīng)配置：
補(bǔ)充：關(guān)于我說了要在parserOptions增加project，請(qǐng)移步eslint官網(wǎng)：
https://typescript-eslint.io/linting/troubleshooting/#more-details
module.exports = {
...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['tsconfig.json'], // 新增
...
},
...
}
（2.）再次運(yùn)行依然有錯(cuò)誤
這里圈出的錯(cuò)誤是由于解析vue文件錯(cuò)誤導(dǎo)致的，在eslint官網(wǎng)中也有這個(gè)問題：
移步官方文檔：我想在vue中使用eslint，結(jié)果發(fā)生了解析錯(cuò)誤？
https://typescript-eslint.io/linting/troubleshooting#i-am-running-into-errors-when-parsing-typescript-in-my-vue-files
(3)再次運(yùn)行依然有錯(cuò)誤：
這次的錯(cuò)誤也是解析vue文件導(dǎo)致的，可參考eslint官網(wǎng)的問題解答：
https://typescript-eslint.io/linting/troubleshooting/#i-get-errors-telling-me-the-file-must-be-included-in-at-least-one-of-the-projects-provided
新增配置：extraFileExtensions:[‘.vue’],
（4)再次運(yùn)行依然有錯(cuò)誤：
參考：https://typescript-eslint.io/linting/troubleshooting/#i-get-errors-telling-me-eslint-was-configured-to-run–however-that-tsconfig-does-not–none-of-those-tsconfigs-include-this-file
官網(wǎng)回答重點(diǎn)是這句話：In that case, viewing the .eslintrc.cjs in an IDE with the ESLint extension will show the error notice that the file couldn’t be linted because it isn’t included in tsconfig.json
告訴我們.eslintrc.cjs和vite.config.ts應(yīng)該包含在tsconfig.json文件中的includes里面
按照?qǐng)?bào)錯(cuò)信息對(duì) tsconfig.json 進(jìn)行相應(yīng)配置：
{
...
// 新增 .eslintrc.cjs 以及 vite.config.ts
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", ".eslintrc.cjs", "vite.config.ts"],
...
}
（5）再次運(yùn)行還是有一個(gè)錯(cuò)誤，我們接著處理
一個(gè)是 src 目錄下 vite-env.d.ts 中不鼓勵(lì)使用三斜線引用 /// 而引發(fā)的錯(cuò)誤，我們通過注釋讓它忽略這個(gè)錯(cuò)誤。
報(bào)錯(cuò)信息：Do not use a triple slash reference for vite/client, use `import` style instead.eslint(@typescript-eslint/triple-slash-reference)
復(fù)制代碼
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference types="vite/client" />
(6)接著我們運(yùn)行npm run lint，發(fā)現(xiàn)所有的報(bào)錯(cuò)都已經(jīng)解決了，寫點(diǎn)代碼去測(cè)試一下，發(fā)現(xiàn)通過npm run lint也能幫我們進(jìn)行檢測(cè)和格式化。說明我們的eslint已經(jīng)成功的引入到了vite項(xiàng)目中。此時(shí)我們的項(xiàng)目狀態(tài)為：vite+vue3+eslint。但是eslint的觸發(fā)需要我們手動(dòng)使用npm run lint來觸發(fā)。接下來我們處理下，怎么在commit的時(shí)候自動(dòng)的觸發(fā)eslint。
4.添加git倉庫
運(yùn)行：git init
5.添加commitLint
工具前置知識(shí)，工具介紹：
- lint-staged 是一個(gè)專門針對(duì)已放入 Git 暫存區(qū)的文件進(jìn)行檢查的工具
- husky 能提供監(jiān)聽 Git 操作并執(zhí)行腳本代碼的能力
一：安裝配置 lint-staged：實(shí)現(xiàn)專門針對(duì) git 暫存區(qū)的文件進(jìn)行風(fēng)格檢查
(1).安裝依賴包
npm i lint-staged --save-dev
(2).在 package.json 中配置 lint-staged，利用它來調(diào)用 eslint 和 stylelint 去檢查暫存區(qū)內(nèi)的代碼
{
// ...
"lint-staged": {
"*.{vue,js}": [
"npm run lint"
]
}
}
二：安裝配置 husky：實(shí)現(xiàn)在git 提交時(shí)執(zhí)行 lint-staged
(1).安裝依賴包
npm i husky --save-dev
(2)在 package.json中配置快捷命令，用來在安裝項(xiàng)目依賴時(shí)生成 husky 相關(guān)文件
{
// ...
"scripts": {
// ...
"postinstall": "husky install"
},
}
(3)配置后執(zhí)行 npm i 就會(huì)在項(xiàng)目根目錄生成 .husky/_ 目錄。
npm i
(4)執(zhí)行以下代碼,使用 husky 生成 git 操作的監(jiān)聽鉤子腳本
npx husky add .husky/pre-commit "npx lint-staged"
執(zhí)行后成功后會(huì)生成腳本文件 .husky/pre-commit （在vscode中可以看到），它包含了命令行語句： npx lint-staged
到此你就完成了git commit時(shí)自動(dòng)去觸發(fā)eslint的檢測(cè)和修復(fù)。測(cè)試一下：
修改部分代碼（一定要修改下，因?yàn)閘int-staged是對(duì)暫存區(qū)的文件進(jìn)行檢測(cè)），然后git add . git commit一下，有以下的代碼出現(xiàn)，就說明git commit時(shí)自動(dòng)觸發(fā)了eslint
6.添加prettier（看自己的需求添不添加）
prettier的添加，主要是看自己需不需要。這個(gè)插件添加的原因前面的文章已經(jīng)說過了，這個(gè)就不贅述了。
1.安裝必須的包
- prettier - prettier 本體
- eslint-config-prettier - 關(guān)閉 ESLint 中與 Prettier 中發(fā)生沖突的規(guī)則
- eslint-plugin-prettier - 將 Prettier 的規(guī)則設(shè)置到 ESLint 的規(guī)則中
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
2.在根目錄添加一個(gè) .prettierrc.cjs 文件(注意是cjs文件，否則會(huì)報(bào)錯(cuò)的)，內(nèi)容如下：
module.exports = {
tabWidth: 4, // 指定每個(gè)縮進(jìn)級(jí)別的空格數(shù)<int>，默認(rèn)2
useTabs: false, // 用制表符而不是空格縮進(jìn)行<bool>，默認(rèn)false
printWidth: 300, //一行的字符數(shù)，如果超過會(huì)進(jìn)行換行，默認(rèn)為80
singleQuote: true, //字符串是否使用單引號(hào)，默認(rèn)為false，使用雙引號(hào)
endOfLine: 'auto', //避免報(bào)錯(cuò)delete (cr)的錯(cuò)
proseWrap: 'always',
semi: false, // 不加分號(hào)
trailingComma: 'none', // 結(jié)尾處不加逗號(hào)
htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落問題
}
3.修改 ESLint 配置，使 Eslint 兼容 Prettier 規(guī)則
plugin:prettier/recommended 的配置需要注意的是，一定要放在最后。因?yàn)閑xtends中后引入的規(guī)則會(huì)覆蓋前面的規(guī)則。也就是說你可以在.prettierrc.cjs 中定義自己的風(fēng)格代碼。到時(shí)候，本地的prettier插件會(huì)根據(jù)這個(gè)文件來格式化，項(xiàng)目安裝的prettier也會(huì)根據(jù)該文件來格式化。且eslint的風(fēng)格與prettier風(fēng)格沖突的地方會(huì)以prettier為主
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-essential',
'standard-with-typescript',
'plugin:prettier/recommended' // 新增
],
overrides: [
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
project: ['tsconfig.json'], // 新增
extraFileExtensions: ['.vue']
},
plugins: [
'vue'
],
rules: {
}
}
總結(jié)：
1.可以看到我們自己新建的vite項(xiàng)目來自己添加standard規(guī)則會(huì)有各種的bug，雖然這種bug在eslint的官網(wǎng)都能解決，但是還是很費(fèi)神的，關(guān)鍵還是在于eslint和vite融合的不夠完美（也怪更新的太快了），不能直接初始化好了就可以用（像vue2一樣）。所以總結(jié)下來的話，我認(rèn)為還是在剛建立項(xiàng)目的時(shí)候就去添加eslint，然后使用自定義的規(guī)則來做,參考我的上一篇文章。
2.另外的話，此時(shí)用npx eslint --init的方式只能添加standard規(guī)則和xo規(guī)則，并沒有airbnb規(guī)則。以后應(yīng)該會(huì)有，所以此時(shí)還是用standard規(guī)則吧，一樣的。你也可以去查別人怎么配置airbnb規(guī)則的，但是我不太喜歡。因?yàn)榘惭b了一堆插件，而且插件之間要配合的太多了，下次你要安裝，你還是不知道該安裝哪些,該如何去配置。文章來源：http://www.zghlxwxcb.cn/news/detail-852491.html
項(xiàng)目地址：https://github.com/rui-rui-an/vue3_add_eslint文章來源地址http://www.zghlxwxcb.cn/news/detail-852491.html
到了這里，關(guān)于Eslint:vue3項(xiàng)目添加eslint(standard規(guī)則)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
