vite+vue3項目集成ESLint與prettier的過程詳解
1. 集成eslint
1.1 安裝eslint
npm add -D eslint
1.2 初始化ESLint配置
npx eslint --init
1.3 配置初始化選擇我的選擇如下:

安裝完成后(根目錄會生成.eslintrc.js文件)這個配置文件是默認(rèn)生成的
1.4 eslint不生效解決方案
- 檢查vscode有沒有安裝eslint插件
- 重啟編輯器
- vscode settings.json加上
{
......
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true //ctrl+s保存的時候使用eslint修復(fù)
},
......
}2. 集成Prettier
2.1 安裝prettier
npm install -D prettier npm install -D eslint-config-prettier #eslint兼容的插件 npm install -D eslint-plugin-prettier #eslint的prettier
2.2 配置.prettierrc.js
在根目錄下面添加.prettierrc.js文件夾,然后將下面的配置添加到其中。如果不想格式化某些文件可以再添加一個.prettierignore的文件,用法和.gitignore文件差不多,將不需要格式化的文件夾或文件通過正則匹配或者具名的方式添加進去,這樣就不會格式化對應(yīng)的文件了。
module.exports = {
// 一行最多 120 字符..
printWidth: 120,
// 使用 2 個空格縮進
tabWidth: 2,
// 使用縮進符
useTabs: true,
// 行尾需要有分號
semi: true,
// 使用單引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號,而使用雙引號
jsxSingleQuote: false,
// 末尾需要有逗號
trailingComma: 'all',
// 大括號內(nèi)的首尾需要空格
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù),只有一個參數(shù)的時候,也需要括號
arrowParens: 'always',
// 每個文件格式化的范圍是文件的全部內(nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// vue 文件中的 script 和 style 內(nèi)不用縮進
vueIndentScriptAndStyle: false,
// 換行符使用
endOfLine: 'auto' //避免報錯delete (cr)的錯
};2.3 在.eslintrc.js中加上
extends: [ ... //1.繼承.prettierrc.js文件規(guī)則 2.開啟rules的 "prettier/prettier": "error" 3.eslint fix的同時執(zhí)行prettier格式化 'plugin:prettier/recommended', ],
2.4 如果不生效,試試重新打開項目
3. 集成eslint后unplugin-auto-import的配置和eslint報錯解決
報錯類似以下:
‘onMounted’ is not defined.eslintno-undef
‘ref’ is not defined.eslintno-undef
解決方案:參考鏈接
ESLint與prettier集成參考文檔:鏈接
到此這篇關(guān)于vite+vue3項目中集成ESLint與prettier的文章就介紹到這了,更多相關(guān)vue3項目集成ESLint與prettier內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中監(jiān)聽input框獲取焦點及失去焦點的問題
這篇文章主要介紹了vue中監(jiān)聽input框獲取焦點,失去焦點的問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07
使用vue init webpack項目名創(chuàng)建項目方式
這篇文章主要介紹了使用vue init webpack項目名創(chuàng)建項目方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue中項目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項目如何提交form格式數(shù)據(jù)的表單,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06
elementui 日期選擇器el-date-picker如何給指定日期添加圓點標(biāo)注
這篇文章主要介紹了elementui 日期選擇器el-date-picker如何給指定日期添加圓點標(biāo)注,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07

