vscode里利用prettier插件实现ant-design-pro架构代码的格式化

1,397 阅读2分钟

前言

工具对于程序员特别重要,如何用好工具又是重中之中,那么我接下来开启一段vscode代码格式化应用之旅吧。let's go!

一、给vscode编辑器安装prettier插件。

打开IDE,即点开编辑器程序,在编辑器主界面找一个双正方形的按钮(Extensions),如下图所示。

在这里插入图片描述
点击后会出现搜索插件的界面,如下图所示:
在这里插入图片描述
在搜索栏里输入prettier,会出现很多插件,在其中选择一款叫做 Prettier-Code formatter 的插件。点击它,安装,就好。具体如下图所示:
在这里插入图片描述
安装好了之后就需要我们去配置一些东西了。

二、配置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 界面的结果如下

在这里插入图片描述
就这样小伙伴们再也不要关心代码不一致的问题了。