經常在 code review 的時候發現有些同學提交上來的代碼格式還存在問題，很影響閱讀代碼的情緒，究起原因來無非是兩種情況：1、git commit 的時候加了 -n 參數，跳過了 eslint 檢查和 prettier 格式化。2、VSCode 中 ESLint 和 Prettier 插件未配置正確。接下來看一下如何正確配置這 2 個插件(著重 prettier 插件)

相信做過前端的同學對 ESLint 和 Prettier 都不陌生了吧？這里先還是先簡單介紹一下吧

ESLint 屬于一種QA工具，是一個ECMAScript/JavaScript語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

Prettier 是一個自動幫你處理代碼中不符合 ESLint 規范的工具。

上面 2 個工具庫都是在項目代碼中進行配置的，這篇文章主要介紹如何配合 eslint 和 prettier 對應的 vscode 插件在代碼編寫過程中及時幫我們修正問題，而不是等到 git commit 的時候才發現一大堆問題。所以至于如何在項目代碼中如何使用這里不做介紹，可以參考這里 。

準備工具

在 VSCode 中安裝以下插件

• ESLint VSCode 插件， 主要的作用是會將有錯的地方進行標記，方便我們知道哪些文件、哪些代碼是有問題的

https://github.com/Microsoft/vscode-eslint?github.com

• Prettier VSCode 插件，主要作用是代碼格式化的時候按照項目約定的規范進行代碼美化

prettier/prettier-vscode?github.com

開始設置

打開vscode 配置文件 setting.json,

快捷鍵：command + p 然后輸入 > 進入命令搜索模式，再輸入: Settings(JSON)

1、設置代碼在保存的時候自動格式化

{"editor.formatOnSave": true }

2、設置 .js .ts .jsx .tsx .less .css .json 格式的文件都采用 prettier-vscode 插件進行格式化

{"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} }

3、配置 prettier 插件讀取項目中哪個配置文件，默認是根目錄下的 .prettierrc 文件，如果你的項目下不是這個文件就需要修改為你的配置文件，比如很多項目為 .prettierrc.js 或者 .prettierrc.ts

{"prettier.configPath": ".prettierrc.js", }

至此配置過程就完成了，現在來試試效果

【完】

總結

以上是生活随笔為你收集整理的notepad json格式化插件_Prettier + ESLint VSCode 插件配置指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。