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

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

• • 1、給vscode編輯器安裝prettier插件。
  • 2、配置IDE編輯器的配置。

 

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界面的結果以下

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