欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VScode中配置ESlint+Prettier詳細(xì)步驟(附圖文介紹)

 更新時(shí)間:2024年12月25日 10:11:50   作者:漫天轉(zhuǎn)悠  
這篇文章主要介紹了VScode中配置ESlint+Prettier詳細(xì)步驟,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(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

image-20241222151048056

2 Eslint與Prettier設(shè)置

2.1 安裝依賴包和插件

打開vscode搜索ESlint和Prettier插件進(jìn)行安裝(安裝完畢后需重啟vscode)

ESLint插件

用于代碼風(fēng)格檢查和靜態(tài)分析。與 Vue 3 的 ESLint 插件一起使用,確保符合 Vue 3 的規(guī)范。

image-20241220173753198

Prettier插件

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

image-20241220173812929

安裝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/*

image-20241222154604242

2. VScode配置Prettier插件

請務(wù)必按照以下步驟對Prettier插件進(jìn)行設(shè)置,否則Prettier插件自動格式化代碼可能將無效!

image-20241222152305936

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

image-20241222152434476

取消默認(rèn)配置勾選

image-20241222152523398

添加vscode保存時(shí)自動格式化

image-20241222152732053

勾選保存時(shí)自動格式化

image-20241222152822533

勾選保存時(shí)默認(rèn)格式化為prettier

image-20241222152955008

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腳本的雙引號和加分號

image-20241222154923991

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

image-20241222155408795

2. VScode設(shè)置Eslint

在VScode設(shè)置里啟用eslint

image-20241222161641716

配置Settings.json加入vue文件校驗(yàn)

image-20241222161610251

  "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)

image-20241222161950222

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 antd Form表單的使用及說明

    vue antd Form表單的使用及說明

    這篇文章主要介紹了vue antd Form表單的使用及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能

    vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能

    今天小編就為大家分享一篇vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue3+three.js實(shí)現(xiàn)疫情可視化功能

    vue3+three.js實(shí)現(xiàn)疫情可視化功能

    這篇文章主要介紹了vue3+three.js實(shí)現(xiàn)疫情可視化,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • vue element和nuxt的使用技巧分享

    vue element和nuxt的使用技巧分享

    這篇文章主要介紹了vue element和nuxt的使用技巧分享,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2021-01-01
  • vue工程如何為組件自動注入全局樣式文件

    vue工程如何為組件自動注入全局樣式文件

    這篇文章主要介紹了vue工程如何為組件自動注入全局樣式文件,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問題

    VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問題

    這篇文章主要介紹了VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Element-ui Drawer抽屜按需引入基礎(chǔ)使用

    Element-ui Drawer抽屜按需引入基礎(chǔ)使用

    這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • 解決VUE雙向綁定失效的問題

    解決VUE雙向綁定失效的問題

    今天小編就為大家分享一篇解決VUE雙向綁定失效的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vuex中g(shù)etters的基本用法解讀

    vuex中g(shù)etters的基本用法解讀

    這篇文章主要介紹了vuex中g(shù)etters的基本用法,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue3?process.env.XXX環(huán)境變量不生效的解決方法

    vue3?process.env.XXX環(huán)境變量不生效的解決方法

    這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08

最新評論