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搭建分布式醫(yī)療掛號系統(tǒng)后臺管理頁面示例步驟
這篇文章主要為大家介紹了分布式醫(yī)療掛號系統(tǒng)之搭建后臺管理系統(tǒng)頁面,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-04-04
改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)
下面小編就為大家分享一篇改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue+EleMentUI實現(xiàn)el-table-colum表格select下拉框可編輯功能實例
這篇文章主要給大家介紹了關(guān)于Vue+EleMentUI實現(xiàn)el-table-colum表格select下拉框可編輯功能的相關(guān)資料,element-UI表格的使用相信大家都不陌生,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vite模塊動態(tài)導(dǎo)入之Glob導(dǎo)入實踐
import.meta.glob是Vite提供的強大模塊動態(tài)導(dǎo)入功能,用于在構(gòu)建時批量導(dǎo)入模塊并生成按需加載的代碼,適用于處理大量文件2026-01-01

