跳到主要内容

配置 prettier

· 阅读需 2 分钟
DK

两种方式选其一

在当前工程中配置​

.prettierrc 文件中​

// 根目录 .prettierrc 文件
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "bracketSpacing": true,
  "trailingComma": "none",
  "arrowParens": "always",
  "endOfLine": "auto"
}

在VScode中配置​

{
  // 编辑器设置 - 默认采用prettier做格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // prettier 设置
  "prettier.printWidth": 80, // 换行的行长
  "prettier.jsxBracketSameLine": true, // react的jsx让>与结束标签同行
  "prettier.jsxSingleQuote": true, // jsx tsx采用单引号
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.bracketSpacing": true, // 去掉数组内部前后的空格
  "prettier.arrowParens": "avoid", // 箭头函数括号 avoid 尽可能省略括号
  "prettier.trailingComma": "none", // 不要尾随逗号
  "prettier.endOfLine": "auto" // 行结束配置 保持现有的行尾（一个文件中的混合值通过查看第一行之后使用的内容进行标准化）
}

.vscode/settings.json 文件中​

// 根目录 .vscode/settings.json 文件

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具为prettier
  "editor.formatOnSave": true, // 保存时自动格式化
   // ... 也可以把上边在编辑器中配置prettier 放在这里单独为这个项目使用
}

需要用到的包​

prettier：可以不依赖编辑器使用，当然也需要一些配置

在package.json中配置​

{
 "scripts": {
    // 执行命令按照prettier去格式化文件
    "format:prettier": "prettier **/*.{js,jsx,ts,json5,json} --write",
     // 配合lint-staged使用
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,json5}": [
       // 配合lint-staged使用
      "prettier --write",
    ]
  },
}

eslint-config-prettier、eslint-plugin-prettier：配合eslint使用，让prettier的错误交由eslint（错误、警告）

在.eslintrc中配置​

{
  "extends": ["plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}