vscode裏利用prettier插件實現ant-design-pro架構代碼的格式化

前言

工具對於程序員特別重要，如何用好工具又是重中之中，那麼我接下來開啓一段vscode代碼格式化應用之旅吧。let's go!

1、給vscode編輯器安裝prettier插件。

打開IDE，即點開編輯器程序，在編輯器主界面找一個雙正方形的按鈕（Extensions）,以下圖所示。

點擊後會出現搜索插件的界面，以下圖所示：

在搜索欄裏輸入prettier，會出現不少插件，在其中選擇一款叫作 Prettier-Code formatter 的插件。點擊它，安裝，就好。具體以下圖所示：

安裝好了以後就須要咱們去配置一些東西了。

2、配置IDE編輯器的配置。

在編輯器中進入到設置 setting 的界面。步驟是這樣的 File=>Preferences=>setting

點擊setting後會出現以下的圖片，咱們須要點擊圖片中的Edit in settings.json

點擊 Edit in settings.json 後會出現編輯界面，在那個界面將這個 json 複製進去： { "editor.formatOnSave": true, "editor.formatOnType": true, "editor.formatOnPaste": true, } 會獲得下圖的效果

保存配置打開編輯的界面進行保存即按下按鈕（Ctrl+S），代碼會被格式化，即以下所示：代碼會被格式化可是涉及到標籤的那裏會出現混亂，以下圖所示：

這個時候就須要咱們的一點小技巧了，在編輯器的右下角有個編輯語言的選擇，點擊javaScript，會彈出一個框將javaScript修改成javaScript React（即點擊下這個選項就好），具體以下圖所示：

選中javaScript React後，按下保存按鍵（即按下Ctrl + S）界面就會被正常格式化,結果以下圖所示：

每一文件都去這樣點擊的話會很不方便變，你能夠批量修改JavaScript的文件類型，即以下操做

在點擊這個以後選擇 JavaScript React 就能夠了，(若是你用的是 ts ,就選擇 Typescript React)這個時候你的setting裏面會增長一個以下的配置

"files.associations": { "*.js": "javascriptreact" },

到此你的項目的關聯js文件就變成了 JavaScript React 了你只要直接 Ctrl+S 保存就能夠正常格式化。 這個時候setting的配置文件是這樣的。

{
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "javascript.format.enable": false, // 這個是其餘另外的配置，和這裏不要緊。
  "files.associations": { // 這個是文件關聯，意思是任何js後綴的文件會被認爲是 javascriptreact 文件。
    "*.js": "typescriptreact" 
  },
  // "prettier.eslintIntegration": true,
}, 
複製代碼

setting 界面的結果以下

就這樣小夥伴們不再要關心代碼不一致的問題了。