Prettier

安装 Prettier

# 安装 prettier
yarn add prettier

# 安装 eslint-plugin-prettier
# Prettier 官方提供的 ESLint 插件，将 Prettier 作为 ESLint 的规则来使用
# 代码不符合 Prettier 的标准时，会报一个 ESLint 错误
yarn add eslint-plugin-prettier

# 安装 eslint-config-prettier
# 关闭所有与 Prettier 有冲突的规则
yarn add eslint-config-prettier

配置 Prettier

修改 .eslintrc.js 文件，，添加以下内容：

module.exports = {
  extends: ["plugin:prettier/recommended"],
};

安装 eslint-config-prettier 后，上方代码等价于：

module.exports = {
  extends: ["prettier"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

自动保存修改

注意 ESLint 只能提醒有错误，不能自动修复，所以需要配合 VS Code 的插件 Prettier - Code formatter 来使用。

安装 Prettier 插件

1. 点击 VS Code 的扩展图标
2. 搜索 prettier
3. 在搜索结果中找到 Prettier
4. 点击 install 按钮
5. 安装完成后点击 Reload 按钮或者重启 VS Code

配置 Prettier 为默认代码格式化工具

1. ctrl + shift + p 键盘（Windows）打开命令窗口
2. 输入 setting
3. 选择 Preferences: Open User Settings 选项
4. 搜索 default formatter 配置项，点击下拉框，选中 Prettier

配置文件保存时自动格式化

1. ctrl + shift + p 键盘（Windows）打开命令窗口
2. 输入 setting
3. 选择 Preferences: Open User Settings 选项
4. 搜索 format on save 配置项，选中复选框