vscode使用Eslint+Prettier格式化代碼的詳細操作
?? step 1
1、安裝Eslint插件和Prettier插件
2、 安裝eslint
npm install eslint -g
?? step 2
1、初始化項目
npm init -y
2、生成eslint配置文件
npx eslint --init
以下是我的配置
完了之后生成一個.eslintrc.json的文件
?? step 3
1、vscode需要配置保存自動化格式
? -> 設(shè)置 ->
Format On Save=》 ? （保存時格式化文件）
2、以什么風(fēng)格格式化代碼。
? -> 設(shè)置 ->
Default Formatter-> 選擇Prettier項
3、保存時總是執(zhí)行fixAll
fixAll那選擇true
4、總體配置：setting.json
{
"workbench.colorTheme": "Default Dark+",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
到這一步基本的保存后都可以有eslint基礎(chǔ)的格式化了
?? step 4
1、配置Prettier，創(chuàng)建一個 .prettierrc.json文件
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json然后寫入配置：（按自己）
{
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"jsxSingleQuote": true
}然后檢測vscode設(shè)置的Prettier: Enable勾選狀態(tài)
這時候可以保存后可以prettier格式化了，但是不會eslint不會顯示紅色
?? step 5
關(guān)閉所有不必要或可能與Prettier沖突的規(guī)則。
1、安裝eslint-config-prettier和eslint-plugin-prettier
npm install --save-dev eslint-config-prettier npm install --save-dev eslint-plugin-prettier
2、然后在.eslintrc.json的 extends 最后加入plugin:prettier/recommended
確保下面格式是prettier
3、保存，重啟vscode，爆紅也生效了。
到這里就eslint和prettier就配完了
?? 最后
一般情況下直接在.prettierrc.json配置即可，如果prettier沒有這個配置的，就可以在.eslintrc.json中的“rules”中配置，舉個例子：（配置全等）
效果??
到此這篇關(guān)于vscode使用Eslint+Prettier格式化代碼的文章就介紹到這了,更多相關(guān)vscode格式化代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于VUE3安裝element?ui失敗的原因以及解決的相關(guān)資料,很多朋友升級使用Vue3了,但在安裝element?ui失敗出錯了,這里給大家總結(jié)下,需要的朋友可以參考下2023-09-09
ref和reactive一樣,也是用來實現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動態(tài)渲染的組件添加ref的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼
這篇文章主要介紹了vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue嵌套iframe時$router.go(-1)后退bug的原因解析
這篇文章主要介紹了Vue嵌套iframe,$router.go(-1)后退bug的問題原因及解決方法,本文給大家分享問題原因所在及解決方案,需要的朋友可以參考下吧2023-09-09
vue elementUI table表格數(shù)據(jù) 滾動懶加載的實現(xiàn)方法
這篇文章主要介紹了vue elementUI table表格數(shù)據(jù)滾動懶加載的實現(xiàn)方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
本文重點介紹axios如何配合vue搭建項目框架,文章給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
Vue3使用postcss-px-to-viewport實現(xiàn)頁面自適應(yīng)
postcss-px-to-viewport 是一個 PostCSS 插件,它可以將 px 單位轉(zhuǎn)換為視口單位,下面我們就看看如何使用postcss-px-to-viewport實現(xiàn)頁面自適應(yīng)吧2024-01-01
這篇文章主要介紹了vue打包生成的文件的js文件過大的優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家詳細介紹了vue封裝圖片滑塊驗證組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03