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的扩展。

安装好扩展可以让我在保存代码的时候就格式化代码，抛弃手动的操作。

下面开始来配置

1. 首先来安装Prettier - Code formatter VS Code扩展。

2. 配置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
}