React项目中:VS Code中保存自动格式化JavaScript/TypeScript代码
前提
首先,安装插件:ESLint + Prettier
背景:
eslint在校验出代码格式问题以后,我们每次需要手动执行npm run lint --fix,这样效率太慢了,我希望实现的效果是:我按下ctrl + s,就可以自动格式化代码。
这就是Prettier,尤其是Prettier - Code formatter的VS Code插件。
了解Prettier
Prettier是一个代码格式化程序(可配置)。ESLint也可以格式化代码,但它主要是提醒我们哪里代码写的不符合规则。
Prettier可以在保存文件时或者手动触发代码的格式化,默认情况下,它配置了通用的代码格式。
将ESLint + Prettier配合使用,来达到我们的格式化代码目的。
ESLint和Prettier的指责
ESLint 和 Prettier的指责划分:
ESLint负责代码风格定义
Prettier负责根据ESLint定义的风格进行自动格式化
这是一对完美的组合。
你需要准备的
- 你需要有VS Code编辑器
- 有一个配置了ESLint的项目
使用Prettier
使用Prettier最常见的就是在VS Code中安装Prettier - Code formatter的扩展。
安装好扩展可以让我在保存代码的时候就格式化代码,抛弃手动的操作。
下面开始来配置
-
首先来安装Prettier - Code formatter VS Code扩展。
-
配置Prettier使用,使用command + shift + p (windows为ctrl)快捷键打开命令窗口,输入
preferences open settings
选择Open Settings(JSON),在打开的JSON文件末尾加入
// 粘贴时格式化代码
"editor.formatOnPaste": true,
// 保存时格式化代码
"editor.formatOnSave": true,
复制代码
如果有相同的配置就不用去设置了。
接下来配置typescript文件的格式化工具为prettier。如果是JavaScript或者其他类型文件,把[typescript]改成对应的名字即可。
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
复制代码
然后我们去代码中尝试,修改src/index.ts代码为如下
console.log('hello 向问天')
console.log("hello 向问天")
console.log("hello 向问天")
console.log("hello 向问天")
console.log("hello 向问天")
复制代码
我们COMMAND(Windows为CTRL)+ S保存代码后发现,console的末尾都自动加上的分号。说明prettier配置成功。
console.log("hello 向问天");
console.log("hello 向问天");
console.log("hello 向问天");
console.log("hello 向问天");
console.log("hello 向问天");
复制代码
6. 手动格式化单个文件
有时我们可能不需要保存时格式化,我们就可以手动通过快捷命令去手工格式化。
通过使用command + shift + p (windows为ctrl)
快捷键打开命令窗口,输入format
将会格式化文件。
mac中更加快速的命令是 shift + option + f
直接格式化当前文件。
最后附上个人的一些vscode配置:对应编辑器中的setting.json
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 重新设定tabsize
"editor.tabSize": 2,
"workbench.iconTheme": "vscode-great-icons",
"workbench.colorTheme": "One Dark Pro",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"git.enableSmartCommit": true,
"terminal.integrated.shell.osx": "/bin/zsh",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"window.zoomLevel": 0,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 粘贴时格式化代码
"editor.formatOnPaste": true,
// 保存时格式化代码
"editor.formatOnSave": true
}