Prettier的官方链接•

Prettier配置示例•

项目根目录的.prettierrc.cjs/.prettierrc.js文件的配置示例，更多选项可在这里查看

module.exports = {
  printWidth: 120, // 单行长度
  tabWidth: 2, // 缩进长度
  useTabs: false, // 缩进样式
  semi: true, // 句末分号
  singleQuote: true, // 单引号
  quoteProps: 'as-needed', // 对象的key引号
  jsxSingleQuote: true, // jsx中单引号
  trailingComma: 'all', // 尾随逗号
  bracketSpacing: true, // 对象前后空格-eg: { foo: bar }
  bracketSameLine: false, // 多属性html标签的'>'折行
  arrowParens: 'always', // 单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, // 顶部注释格式化
  insertPragma: false, // 文件顶部已格式化标注
  proseWrap: 'preserve', // 文本样式换行(Markdown)
  htmlWhitespaceSensitivity: 'css', // HTML全局空白敏感度
  vueIndentScriptAndStyle: true, // vue中的script及style标签缩进
  endOfLine: 'lf', // 结束行形式
  embeddedLanguageFormatting: 'auto', // 引用代码格式化
  singleAttributePerLine: false, // 每行单个属性样式
  // 插件
  plugins: [],
};

prettier与eslint兼容•

eslint-config-prettier是prettier官方写的一个的eslint插件。

它通过关闭与prettier有可能冲突的规则达到prettier与eslint的兼容

1	npm install --save-dev eslint-config-prettier # 安装

在eslint配置文件中继承这个插件的规则

// .eslintrc.cjs/.eslintrc.js示例
module.exports = {
  // 配置继承
  extends: ['prettier'],
}

这里有一个我的eslint配置示例