![c42c608a9b10b9b035ac20e11c2f375d.png](https://i-blog.csdnimg.cn/blog_migrate/bfd70e72d8e0f3ea2955f42867d9e021.jpeg)
经常在 code review 的时候发现有些同学提交上来的代码格式还存在问题,很影响阅读代码的情绪,究起原因来无非是两种情况:1、git commit 的时候加了 -n 参数,跳过了 eslint 检查和 prettier 格式化。2、VSCode 中 ESLint 和 Prettier 插件未配置正确。接下来看一下如何正确配置这 2 个插件(着重 prettier 插件)
相信做过前端的同学对 ESLint 和 Prettier 都不陌生了吧?这里先还是先简单介绍一下吧
ESLint 属于一种QA工具,是一个ECMAScript/JavaScript语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
Prettier 是一个自动帮你处理代码中不符合 ESLint 规范的工具。
上面 2 个工具库都是在项目代码中进行配置的,这篇文章主要介绍如何配合 eslint 和 prettier 对应的 vscode 插件在代码编写过程中及时帮我们修正问题,而不是等到 git commit 的时候才发现一大堆问题。所以至于如何在项目代码中如何使用这里不做介绍,可以参考这里 。
准备工具
在 VSCode 中安装以下插件
- ESLint VSCode 插件, 主要的作用是会将有错的地方进行标记,方便我们知道哪些文件、哪些代码是有问题的
- Prettier VSCode 插件,主要作用是代码格式化的时候按照项目约定的规范进行代码美化
![71924774b9c40177c176be6376762491.png](https://i-blog.csdnimg.cn/blog_migrate/a1e5858f44ae9959ae8ad737184313ff.png)
开始设置
打开vscode
配置文件 setting.json
,
快捷键:command + p
然后输入 >
进入命令搜索模式,再输入: Settings(JSON)
1、设置代码在保存的时候自动格式化
{
"editor.formatOnSave": true
}
2、设置 .js .ts .jsx .tsx .less .css .json
格式的文件都采用 prettier-vscode
插件进行格式化
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript|react]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript|react]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
3、配置 prettier 插件读取项目中哪个配置文件,默认是根目录下的 .prettierrc
文件,如果你的项目下不是这个文件就需要修改为你的配置文件,比如很多项目为 .prettierrc.js
或者 .prettierrc.ts
{
"prettier.configPath": ".prettierrc.js",
}
至此配置过程就完成了,现在来试试效果
![c689cd315feee202f25a9b774792757b.gif](https://i-blog.csdnimg.cn/blog_migrate/bd1927c910c8d1f061a2ba825b55aabb.gif)
【完】