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)文章
vue結(jié)合vant實現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細介紹了vue結(jié)合vant實現(xiàn)聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
接收一個輸入的手機號,判斷輸入的手機號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機號校驗以及后端Java手機號校驗的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue使用微信JS-SDK實現(xiàn)分享功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
更強大的vue ssr實現(xiàn)預(yù)取數(shù)據(jù)的方式
這篇文章主要介紹了更強大的 vue ssr 預(yù)取數(shù)據(jù)的方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
我們有時候會碰到這種情況，需要連續(xù)發(fā)送兩個請求，第二個請求需要用第一個請求的某個返回值作為參數(shù)來作為第二個請求的請求參數(shù)，這篇文章主要介紹了vue請求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
vue?watch中如何獲取this.$refs.xxx節(jié)點
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項,需要的朋友可以參考下2019-02-02
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
本篇文章主要介紹了vuex學(xué)習(xí)之Actions的用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼
本篇文章主要介紹了vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01