Prettier配置指南

配置方式（优先级从上到下减小）

1. package文件中 新建 prettierrc 配置项
2. 根目录下 新建 .prettierrc 文件
3. 根目录下 新建 .prettierrc.json, .prettierrc.yml, .prettierrc.yaml 或 .prettierrc.json5 文件
4. 根目录下 新建 .prettierrc.js, .prettierrc.cjs, .prettier.config.js 或 .prettier.config.cjs 文件
5. 根目录下 新建 .prettierrc.toml 文件

文件的位置如下（除了第一种，其他的方式文件位置都是如此）

配置内容

.prettierrc 方式 （推荐）

# 使用 JSON 或 YAML 格式
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

.prettierrc.json, .prettierrc.yml, .prettierrc.yaml 或 .prettierrc.json5 方式

# 使用 对应文件后缀的格式

.prettierrc.js, .prettierrc.cjs, prettier.config.js 或 prettier.config.cjs 方式

# 使用 module.exports 导出的方式
module.exports = {
  singleQuote: true, // 使用单引号代替双引号
  semi: true, // 每行末尾自动添加分号
  tabWidth: 2, // tab缩进大小,默认为2
  useTabs: false, // 使用tab缩进，默认false
  // 对象中打印空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'avoid',
  printWidth: 80, // 换行长度，默认80
  disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
  jsxBracketSameLine: false, //  > 标签放在最后一行的末尾，而不是单独放在下一行
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
  trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验1
  ignorePath: '.gitignore',
};

package文件中 新建 prettierrc 配置项 方式

# 使用对象的方式配置

.prettierrc.toml 方式

# 感兴趣可以去看官方文档
https://www.prettier.cn/
https://prettier.io/