项目规范化2-prettier的配置与使用

閱讀時間：全文 803 字，預估用時 5 分鐘

創作日期：2020-05-04

文章標籤：

上篇文章：项目规范化3-commitlint配置和使用

下篇文章：项目规范化1-lint配置与使用

BEGIN

应用场景

一般使用在项目中使用lint后规避程序代码的不合法使用, 但每个程序员的代码都有其自己的风格, 为了让代码风格一致, 一般会在git提交之前格式化一遍代码, 而格式化代码的工具就是prettier.

文档

项目地址: prettier Github 🔗

项目官网: prettier 🔗

安装

项目中安装: yarn add prettier --dev --exact

全局安装: yarn global add prettier

CI配置

在package.json的scripts下新增"prettier": "prettier 'src/**/*.@(ts|tsx|html|json)' --write"

使用命令yarn prettier格式化代码文件

配置

配置方式

有四种配置方式:

在package.json文件中新增prettier键
项目根目录新增文件.prettierrc, 或者也可以带后缀.json、.yaml、.yml
项目根目录新增带导出对象的js文件.prettierrc.js或prettier.config.js
项目根目录新增文件.prettierrc.toml

覆盖配置

如需在不同的文件使用不同的配置, 则可使用覆盖配置特殊处理, 如:

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

共享配置

如果想使用共享的开源配置, 假设我们要使用prettier-config则可以:

在package.json文件增加配置"prettier": "@company/prettier-config"
在.prettierrc.json中包含文本"@company/prettier-config"

在.prettierrc.js中使用require导入, 如:

module.exports = {
  ...require("@company/prettier-config"),
  semi: false,
};

忽略代码

如果某一行代码不需要格式化, 则可以在代码前一行增加注释, 注释内容为prettier-ignore即可

过滤文件

如果对默写文件不使用prettier格式化代码则可生成文件.prettierignore, 里面每一行一个文件名代表需要过滤的文件

配置项

在配置文件中配置配置项, 有如下配置项

API	CLI	默认	含义
`printWidth: <int>`	`--print-width <int>`	`80`	单行最大字符数
`tabWidth: <int>`	`--tab-width <int>`	`2`	缩进空格数
`useTabs: <bool>`	`--use-tabs`	`false`	是否使用制表符缩进
`semi: <bool>`	`--no-semi`	`true`	是否句尾添加分号
`singleQuote: <bool>`	`--single-quote`	`false`	是否使用单引号
`quoteProps: “<as-needed	consistent	preserve>”`	`—quote-props <as-needed
`jsxSingleQuote: <bool>`	`--jsx-single-quote`	`false`	在jsx中是否使用单引号
`trailingComma: “<es5	none	all>”`	`—trailing-comma <es5
`bracketSpacing: <bool>`	`--no-bracket-spacing`	`true`	是否含有支架间距, 如true则`{ foo: bar }`, false则`{foo: bar}`
`jsxBracketSameLine: <bool>`	`--jsx-bracket-same-line`	`false`	jsx的`>`符号是否紧贴句尾, false时为换行
`arrowParens: “<always	avoid>”`	`—arrow-parens <always	avoid>`
`rangeStart: <int>`	`--range-start <int>`	`0`	格式化范围的开头
`rangeEnd: <int>`	`--range-end <int>`	`Infinity`	格式化范围的结尾
`parser: "<string>"`	`--parser <string>`	`None`	指定要使用的解析器
`filepath: "<string>"`	`--stdin-filepath <string>`	`None`	用于根据字符型自动选择解析器, 如: `cat foo
`requirePragma: <bool>`	`--require-pragma`	`false`	是否只格式化文件顶部带有格式化标识的文件
`insertPragma: <bool>`	`--insert-pragma`	`false`	是否在已经格式化后的文件做标记
`proseWrap: “<always	never	preserve>”`	`—prose-wrap <always
`htmlWhitespaceSensitivity: “<css	strict	ignore>”`	`—html-whitespace-sensitivity <css
`vueIndentScriptAndStyle: <bool>`	`--vue-indent-script-and-style`	`false`	是否缩进Vue文件中
`endOfLine: “<lf	crlf	cr	auto>”`

与lint结合使用

安装eslint-config-prettier和eslint-plugin-prettier: yarn add --dev eslint-config-prettier eslint-plugin-prettier

在.eslintrc.json中增加配置:

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

FINISH

上篇文章：项目规范化3-commitlint配置和使用

下篇文章：项目规范化1-lint配置与使用