跳到主要内容

Prettier

Prettier 是一个代码格式化工具，支持多种语言，能够强制执行一致的代码风格。

安装​

npm install --save-dev prettier

配置文件​

在项目根目录创建 .prettierrc.js 文件：

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  endOfLine: 'lf',
  arrowParens: 'always',
  bracketSpacing: true,
};

常用配置项说明​

  • semi: 是否在语句末尾添加分号
  • trailingComma: 多行时尾随逗号的方式
  • singleQuote: 是否使用单引号
  • printWidth: 每行代码最大长度
  • tabWidth: 缩进空格数
  • endOfLine: 换行符类型
  • arrowParens: 箭头函数参数括号
  • bracketSpacing: 对象字面量中的空格

忽略文件​

创建 .prettierignore 文件：

dist
build
coverage
node_modules

VS Code 集成​

  1. 安装 Prettier 插件
  2. 在 settings.json 中添加：
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

与 ESLint 配合​

为了避免与 ESLint 的规则冲突，建议：

  1. 使用 eslint-config-prettier 禁用所有与 prettier 冲突的 ESLint 规则
  2. 使用 prettier 进行代码格式化
  3. 使用 ESLint 进行代码质量检查