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

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