VScode中配置ESlint+Prettier詳細(xì)步驟(附圖文介紹)
VScode中配置ESlint+Prettier詳細(xì)步驟(圖文詳情)
前置環(huán)境:
node 18.19.0
vite 3.2.11
vue 3.2.47
本文的ESlint+Prettier版本:
ESlint 8.57.1
Prettier 3.2.5
1 editorconfig設(shè)置
什么是 .editorconfig
?
.editorconfig
是一個(gè)跨編輯器和IDE的文件格式,旨在幫助開發(fā)者定義和維護(hù)一致的代碼格式規(guī)則。它由 EditorConfig 項(xiàng)目維護(hù),并得到了廣泛的支持,包括 Visual Studio Code、Sublime Text、Atom、IntelliJ IDEA 等許多流行的編輯器和IDE。
.editorconfig
文件是一種用于定義和維護(hù)代碼格式一致性的配置文件。它可以幫助開發(fā)者確保在不同編輯器和IDE中,代碼的縮進(jìn)、換行符、字符編碼等格式保持一致。通過使用 .editorconfig
文件,團(tuán)隊(duì)成員可以在不同的操作系統(tǒng)和開發(fā)環(huán)境中工作,而不必?fù)?dān)心代碼風(fēng)格的不一致性。
打開vscode,在項(xiàng)目根目錄新建.editorconfig文件并添加如下代碼
# 告訴EditorConfig插件,這是根文件,不用繼續(xù)往上查找 root = true # 匹配全部文件 [*] # 縮進(jìn)風(fēng)格,可選space、tab indent_style = space # 縮進(jìn)的空格數(shù) indent_size = 2 # 設(shè)置字符集 charset = utf-8 # 結(jié)尾換行符,可選lf、cr、crlf end_of_line = lf # 在文件結(jié)尾插入新行 trim_trailing_whitespace = true # 刪除一行中的前后空格 insert_final_newline = true [*.md] insert_final_newline = false trim_trailing_whitespace = false
2 Eslint與Prettier設(shè)置
2.1 安裝依賴包和插件
打開vscode搜索ESlint和Prettier插件進(jìn)行安裝(安裝完畢后需重啟vscode)
ESLint插件
用于代碼風(fēng)格檢查和靜態(tài)分析。與 Vue 3 的 ESLint 插件一起使用,確保符合 Vue 3 的規(guī)范。
Prettier插件
代碼格式化工具,幫助保持代碼風(fēng)格的一致性。與 Vue 3 的 Prettier 插件一起使用,確保與 Vue 3 的風(fēng)格一致。
安裝ESlint和Prettier到項(xiàng)目中
注意:在Eslint的9.0版本之后變化較大,請注意和Prettier版本使用搭配!
使用終端打開項(xiàng)目根目錄執(zhí)行安裝
安裝Eslint
npm install eslint@8.57.1 --save-dev
安裝prettier
npm install prettier@3.2.5 --save-dev
npm i -D eslint-plugin-prettier @vue/eslint-config-prettier eslint-plugin-vue
2.2 Prettier設(shè)置
1.Prettier配置文件
在VScode的項(xiàng)目工程根目錄下新建配置文件.prettierrc和.prettierignore
.prettierrc文件(用于prettier格式化規(guī)則設(shè)置,可根據(jù)自身需要修改)
{ "printWidth": 220, "tabWidth": 2, "useTabs": true, "semi": true, "singleQuote": false, "quoteProps": "as-needed", "trailingComma": "none", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid", "endOfLine": "auto", "jsxSingleQuote": false, "vueIndentScriptAndStyle": true }
文件釋義
{ "printWidth": 220, // 此設(shè)置定義了每行代碼的最大字符數(shù)。若代碼行超出此長度,格式化工具會嘗試將其拆分為多行。 "tabWidth": 2, // 此設(shè)置指定一個(gè)制表符(tab)的寬度,即它等同于多少個(gè)空格。這有助于確保代碼縮進(jìn)的一致性。 "useTabs": true, // 此設(shè)置決定是否使用制表符進(jìn)行縮進(jìn)。若設(shè)為true,則使用制表符;反之,則使用空格。 "semi": true, // 此設(shè)置決定是否在語句末尾添加分號。若設(shè)為false,則不添加。 "singleQuote": false, // 此設(shè)置決定是否優(yōu)先使用單引號。若設(shè)為true,則字符串默認(rèn)使用單引號。 "quoteProps": "as-needed", // 此設(shè)置定義對象屬性是否添加引號。設(shè)為"as-needed"時(shí),僅在屬性名不是有效標(biāo)識符時(shí)添加引號。 "trailingComma": "none", // 此設(shè)置決定在多行時(shí)是否添加尾隨逗號。設(shè)為"none"時(shí),不添加尾隨逗號。 "bracketSpacing": true, // 此設(shè)置決定在對象字面量的括號間是否添加空格,例如:`{ foo: bar }`。 "jsxBracketSameLine": false, // 在JSX中,若表達(dá)式跨多行,此設(shè)置決定`>`的位置。設(shè)為false時(shí),`>`位于新行。 "arrowParens": "avoid", // 此設(shè)置決定單參數(shù)箭頭函數(shù)的參數(shù)是否使用圓括號。設(shè)為"avoid"時(shí),盡可能不使用圓括號。 "endOfLine": "lf", // 此設(shè)置定義行尾使用的字符。設(shè)為"lf"時(shí),使用LF(換行符)作為行尾字符。 "jsxSingleQuote": false, // 在JSX中,此設(shè)置決定是否使用單引號。設(shè)為false時(shí),默認(rèn)使用雙引號。 "vueIndentScriptAndStyle": true // 在Vue文件中,此設(shè)置決定`<script>`和`<style>`標(biāo)簽內(nèi)的代碼是否縮進(jìn)。 }
.prettierignore文件(用于prettier需要忽略格式化的文件或目錄)
/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*
2. VScode配置Prettier插件
請務(wù)必按照以下步驟對Prettier插件進(jìn)行設(shè)置,否則Prettier插件自動格式化代碼可能將無效!
添加或修改prettier配置文件路徑
取消默認(rèn)配置勾選
添加vscode保存時(shí)自動格式化
勾選保存時(shí)自動格式化
勾選保存時(shí)默認(rèn)格式化為prettier
3 Prettier測試
修改app.vue文件如下,打亂格式
<template> <div> <h1></h1> </div> <div></div> </template> <script setup> import {} from 'vue' </script> <style lang="scss" scoped></style>
在vscode中按下ctrl+s保存后,則會自動使用prettier設(shè)置的規(guī)則進(jìn)行格式化,例如對齊html標(biāo)簽和js腳本的雙引號和加分號
2.3 ESlint設(shè)置
1.Eslint配置文件
在VScode的項(xiàng)目工程根目錄下新建配置文件.eslintrc.cjs和.eslintignore
.eslintrc.cjs(用于eslint校驗(yàn)規(guī)則設(shè)置)
module.exports = { root: true, env: { browser: true, es2021: true, node: true }, extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "plugin:prettier/recommended"], parserOptions: { ecmaVersion: 12, sourceType: "module" }, plugins: ["vue"], rules: { // 自定義規(guī)則 "prettier/prettier": "error", // 將 Prettier 的格式化規(guī)則作為 ESLint 錯(cuò)誤處理 "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "space-before-function-paren": "off", // 確保方法名與括號之間沒有空格檢查 "vue/multi-word-component-names": "off" //關(guān)閉組件命名規(guī)則 } };
.eslintignore(用于eslint需要忽略格式化的文件或目錄)
*.sh node_modules *.md *.woff *.ttf .vscode .idea dist /public /docs .husky .local /bin .eslintrc.cjs prettier.config.js src/assets tailwind.config.js postcss.config.js
2. VScode設(shè)置Eslint
在VScode設(shè)置里啟用eslint
配置Settings.json加入vue文件校驗(yàn)
"eslint.validate": [ "javascript", "javascriptreact", "html", { "language": "vue", "autoFix": true } ]
3.測試Eslint
在app.vue添加如下測試代碼
<template> <div> <h1></h1> </div> <div></div> </template> <script setup> import {} from 'vue'; console.log("Eslint test"); console.log("hello world!") </script> <style lang="scss" scoped></style>
可以看到對應(yīng)不符合校驗(yàn)規(guī)則的已經(jīng)爆紅(建議重啟vscode)
Eslint校驗(yàn)規(guī)則默認(rèn)已經(jīng)讀取自prettier的規(guī)則配置,需要修改校驗(yàn)規(guī)則直接修改.prettierrc
文件,或自行在.eslintrc.cjs
文件里添加規(guī)則,但是需要注意和prettier的格式化規(guī)則沖突問題。
至此,綜上所屬已經(jīng)完在vscode下eslint+prettier的組合規(guī)則校驗(yàn)+格式化規(guī)則添加。
以上就是VScode中配置ESlint+Prettier詳細(xì)步驟(附圖文介紹)的詳細(xì)內(nèi)容,更多關(guān)于VScode配置ESlint+Prettier的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能
今天小編就為大家分享一篇vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue3+three.js實(shí)現(xiàn)疫情可視化功能
這篇文章主要介紹了vue3+three.js實(shí)現(xiàn)疫情可視化,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問題
這篇文章主要介紹了VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08