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

就这样小伙伴们不再要关心代码不一致的问题了。