React项目中：VS Code中保存自动格式化JavaScript/TypeScript代码_HainesFreeman_react ts代码自动格式化

未知 02-07 8360

前提首先，安装插件：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 }