VScode中配置ESlint+Prettier詳細步驟(附圖文介紹)
VScode中配置ESlint+Prettier詳細步驟(圖文詳情)
前置環(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設置
什么是 .editorconfig?
.editorconfig 是一個跨編輯器和IDE的文件格式,旨在幫助開發(fā)者定義和維護一致的代碼格式規(guī)則。它由 EditorConfig 項目維護,并得到了廣泛的支持,包括 Visual Studio Code、Sublime Text、Atom、IntelliJ IDEA 等許多流行的編輯器和IDE。
.editorconfig 文件是一種用于定義和維護代碼格式一致性的配置文件。它可以幫助開發(fā)者確保在不同編輯器和IDE中,代碼的縮進、換行符、字符編碼等格式保持一致。通過使用 .editorconfig 文件,團隊成員可以在不同的操作系統(tǒng)和開發(fā)環(huán)境中工作,而不必擔心代碼風格的不一致性。
打開vscode,在項目根目錄新建.editorconfig文件并添加如下代碼
# 告訴EditorConfig插件,這是根文件,不用繼續(xù)往上查找 root = true # 匹配全部文件 [*] # 縮進風格,可選space、tab indent_style = space # 縮進的空格數(shù) indent_size = 2 # 設置字符集 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設置
2.1 安裝依賴包和插件
打開vscode搜索ESlint和Prettier插件進行安裝(安裝完畢后需重啟vscode)
ESLint插件
用于代碼風格檢查和靜態(tài)分析。與 Vue 3 的 ESLint 插件一起使用,確保符合 Vue 3 的規(guī)范。

Prettier插件
代碼格式化工具,幫助保持代碼風格的一致性。與 Vue 3 的 Prettier 插件一起使用,確保與 Vue 3 的風格一致。

安裝ESlint和Prettier到項目中
注意:在Eslint的9.0版本之后變化較大,請注意和Prettier版本使用搭配!
使用終端打開項目根目錄執(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設置
1.Prettier配置文件
在VScode的項目工程根目錄下新建配置文件.prettierrc和.prettierignore
.prettierrc文件(用于prettier格式化規(guī)則設置,可根據(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ù)。若代碼行超出此長度,格式化工具會嘗試將其拆分為多行。
"tabWidth": 2, // 此設置指定一個制表符(tab)的寬度,即它等同于多少個空格。這有助于確保代碼縮進的一致性。
"useTabs": true, // 此設置決定是否使用制表符進行縮進。若設為true,則使用制表符;反之,則使用空格。
"semi": true, // 此設置決定是否在語句末尾添加分號。若設為false,則不添加。
"singleQuote": false, // 此設置決定是否優(yōu)先使用單引號。若設為true,則字符串默認使用單引號。
"quoteProps": "as-needed", // 此設置定義對象屬性是否添加引號。設為"as-needed"時,僅在屬性名不是有效標識符時添加引號。
"trailingComma": "none", // 此設置決定在多行時是否添加尾隨逗號。設為"none"時,不添加尾隨逗號。
"bracketSpacing": true, // 此設置決定在對象字面量的括號間是否添加空格,例如:`{ foo: bar }`。
"jsxBracketSameLine": false, // 在JSX中,若表達式跨多行,此設置決定`>`的位置。設為false時,`>`位于新行。
"arrowParens": "avoid", // 此設置決定單參數(shù)箭頭函數(shù)的參數(shù)是否使用圓括號。設為"avoid"時,盡可能不使用圓括號。
"endOfLine": "lf", // 此設置定義行尾使用的字符。設為"lf"時,使用LF(換行符)作為行尾字符。
"jsxSingleQuote": false, // 在JSX中,此設置決定是否使用單引號。設為false時,默認使用雙引號。
"vueIndentScriptAndStyle": true // 在Vue文件中,此設置決定`<script>`和`<style>`標簽內(nèi)的代碼是否縮進。
}
.prettierignore文件(用于prettier需要忽略格式化的文件或目錄)
/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*

2. VScode配置Prettier插件
請務必按照以下步驟對Prettier插件進行設置,否則Prettier插件自動格式化代碼可能將無效!

添加或修改prettier配置文件路徑

取消默認配置勾選

添加vscode保存時自動格式化

勾選保存時自動格式化

勾選保存時默認格式化為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設置的規(guī)則進行格式化,例如對齊html標簽和js腳本的雙引號和加分號

2.3 ESlint設置
1.Eslint配置文件
在VScode的項目工程根目錄下新建配置文件.eslintrc.cjs和.eslintignore
.eslintrc.cjs(用于eslint校驗規(guī)則設置)
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 錯誤處理
"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設置Eslint
在VScode設置里啟用eslint

配置Settings.json加入vue文件校驗

"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>
可以看到對應不符合校驗規(guī)則的已經(jīng)爆紅(建議重啟vscode)

Eslint校驗規(guī)則默認已經(jīng)讀取自prettier的規(guī)則配置,需要修改校驗規(guī)則直接修改.prettierrc文件,或自行在.eslintrc.cjs文件里添加規(guī)則,但是需要注意和prettier的格式化規(guī)則沖突問題。
至此,綜上所屬已經(jīng)完在vscode下eslint+prettier的組合規(guī)則校驗+格式化規(guī)則添加。
以上就是VScode中配置ESlint+Prettier詳細步驟(附圖文介紹)的詳細內(nèi)容,更多關(guān)于VScode配置ESlint+Prettier的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue和iview實現(xiàn)Scroll 數(shù)據(jù)無限滾動功能
今天小編就為大家分享一篇vue和iview實現(xiàn)Scroll 數(shù)據(jù)無限滾動功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學習或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08

