Prettier是什么

prettier是一个代码格式化插件。

为什么使用prettier

在进行多人协作开发时经常出现格式不统一的问题，比如字符串采用双引号还是单引号，句尾是否加入分号等等，虽然可以在开发之前制订一些代码风格的规则，但是随着项目的迭代，这些规则也会被束之高阁。所以需要引入一款自动的代码格式的插件，即prettier。

安装

  1. 安装

npm install --save-dev --save-exact prettier
yarn add --dev --exact prettier
pnpm add prettier -D

配置文件

创建.prettierrc.js ，在文件内以对象格式编写配置信息

  1. module.exports ={
  2.   printWidth: 80, // 行长度。不过不能只理解为最大值，而是期望值，
  3.   tabWidth: 2, // 缩进长度
  4.   useTabs: false, // 是否使用tab进行缩进。false指的是使用空格进行缩进
  5.   semi: true, // 句尾是否打印分号
  6.   singleQuote: false, // 是否使用单引号替换双引号
  8.   // 对象字面量中的属性是否使用引号。
  9.   // as-needed 只在需要时添加引号，比如{"my job": "programer"}，其他都不添加
  10.   // consistent 当有一个需要时就都添加引号
  11.   // preserver 保留用户输入的
  12.   quoteProps: 'as-needed', 
  13.   jsxSingleQuote: false, // JSX中是否使用但引号替换双引号
  15.   // 多行逗号分隔的数据结构是否使用尾后逗号
  16.   // es5 es5中的有效数据句尾逗号
  17.   // none 无句尾逗号
  18.   // all 都使用句尾逗号
  19.   trailingComma: 'es5',
  21.   // 对象字面了的括号是否在括号间使用空格
  22.   // true -- { foo: bar }
  23.   // false -- {foo: bar}
  24.   bracketSpacing: true,
  25.   bracketSameLine: false,  // 将HTML类型结构（HTML、JSX、Vue、Angular）中的 > 符号放在最后一行的末尾而不是下一行
  27.   // 单个参数的箭头函数是否使用括号包裹
  28.   // always 总是进行包裹
  29.   // awaid 禁止包裹
  30.   arrowParens: "always",
  32.   // 这两个range指的是格式化文件内部分代码的范围偏差
  33.   // 没看出有什么用-.-
  34.   rangeStart: 0,
  35.   rangeEnd: Infinity,
  37.   // parser指的是使用什么解释器，prettier会根据文件类型自动判断，所以无需设置这个选项
  38.   // None 是没有默认值，可以填写babel、css等
  39.   // parser: 'None',
  41.   requirePragma: false, // prettier 可以指定特定的注释规则下才进行处理
  42.   insertPragma: false, // 作用和requirePragma一样，但是优先级低于requirePragma
  44.   // 如何包装markdown文本
  45.   // always 当超过最大宽度时进行包装
  46.   // never 从不进行包装
  47.   // preserve 按原样进行包装
  48.   proseWrap: 'preserve',
  50.   // html 空白字符的检测灵敏度
  51.   // css 尊重css中display的属性
  52.   // strict 标签周围的空格很重要
  53.   // ignore 标签周围的空格不重要
  54.   htmlWhitespaceSensitivity: 'css',
  55.   vueIndentScriptAndStyle: false, // 是否缩进vue文件script和style标签
  56.   endOfLine: 'lf', // 行尾格式 lf crlf cr auto
  58.   // 如何格式化文件中嵌入的引用代码
  59.   // auto 能识别的话就进行格式化
  60.   // off 不进行格式化
  61.   embeddedLanguageFormatting: 'auto',
  62. }

prettier同时支持其他格式的配置文件，比如.prettierrc、.prettier.json、prettier.config.js 等。

使用

通过输入命令 npx prettier --write .对所有文件进行格式化，也可以指定路径，npx prettier --write src/app。
如果只想检查是否需要格式化可以使用命令 npx prettier --check .

集成其他lint插件

一般来说我们在项目中会用到其他的lint插件，比如进行js代码质量检测的eslint，进行css样式检测的stylelint，虽然大家的侧重点不一样，但是还是可能产生冲突，可以使用一些现有的预设配置避免这些冲突，比如：

  • eslint-config-prettier
  • tslint-config-prettier
  • stylelint-config-prettier

如果想要将prettier作为lint的检测规则可以使用以下插件：

  • eslint-plugin-prettier
  • tslint-plugin-prettier
  • stylelint-prettier