prettier 代码格式美化

从EditorConfig到各种***Lint, 再到 prettier。其实就是一起用

为什么要用 Prettier

用来替代*lint中的一些场景，比如说分号/tab 缩进/空格/引号，这些在 lint 工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

搞起

建议过一遍 prettier 的官方文档, 也不用太多. 主要是配置文件, 以及使用的参数

在项目中

安装完依赖, npm install --save-dev prettier后, 执行常见的.

1
2
3

node_module/.bin/prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
或
node_module/.bin/prettier -l --write 'src/**/*.{ts,tsx,less,css}' --no-semi --single-quote

当然常见的是写一个 npm script 在 package.json 中加上

1
2
3

"scripts": {
  "fmt": "prettier -l --write 'src/**/*.{ts,tsx,less,css}' --no-semi --single-quote"
},

然后建议使用 prettier.config.js js 文件来配置, 不用 json 是因为我喜欢写点注释说明.

各种不同格式的 prettier 配置文件

官网上的prettier 文件

A .prettierrc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json.
A .prettierrc.toml file, written in TOML (the .toml extension is required).
A prettier.config.js or .prettierrc.js file that exports an object.
A "prettier" key in your package.json file.

常见的 4 种吧, 首先是.prettierrc, 你可以在里面用YAML or JSON格式来写, 其次是.prettierrc.toml, 用TOML格式来写算一类吧, 我们常见的用JSON写
还有就是用prettier.config.js or .prettierrc.js这种导出一个对象来写, (推荐使用)
最后就是在package.json中的"prettier", 一般就是在script中写呗, 不会单独搞一个属性

类似其他的工具, 你也会常看到 .editorconfig, .babelrc, .eslintrc, .prettierrc 这种格式的文件.

读取顺序

配置完后你也可以修改下 vsc 格式化的快捷键
先从 vsc 的市场中可以看到, setting 会先从

prettier 的配置文件读, 也就是前面说的 4 种
没有的话从.editorconfig这个小老鼠读
最后才是从默认的 vsc 的 prettier setting

下面链接中讲了为啥用 lint 和 format

这个讲了 lint 和 format Code Formatting 6666 各种配置

对于直接使用命令 CLI 的方式的话

建议只是用 2 种方式:

-l 会打印出 prettier 格式化前后不同的文件名.
--write 就地改正, 按设置的 prettier 的格式

prettierc 常用命令参数

基本命令就是

1	prettier [opts] [filename ...]

实际中常用

1	prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/*/.js"

默认是不会访问node_modules文件夹中的, 需要访问的话加参数--with-node-modules

CLI 的一些其他参数

讲的主要是比option多一点的东西.

`--check`或`-c`

就是 check 下文件是否格式化了, 也经常配合在pre-commit hook前使用,
如果是想讲这些没格式化的文件输出给下一个命令, 就用--list-different. 两者还是有区别的

`--debug-check`

如果你怕prettier改变你正确的代码, 那么用这个. 当然--write是不能配合这个用了.

`--find-config-path` 和 `--config`

当你经常去格式化那些指定目录的文件时, prettier会先尝试读取配置文件的信息, 造成性能有点缺失, 所以你可以用这个命令配置好, 先读第一次, 之后就重用第一次的配置.

1 2	prettier --find-config-path ./my/file.js ./my/.prettierrc // 这是配置文件

而这里是, 直接提供一个配置文件路径--config, 当然可以任意指定配置文件在哪了.

1	prettier --config ./my/.prettierrc --write ./my/file.js

不想要配置文件用--no-config, 默认配置就是不查找.

`--ignore-path`

用来忽略一些不需要格式化的目录中的文件, 比如 ./.prettierignore

`--require-pragma`

pragma 指需要一些特别的 comment.

1
2
3

/**
 * @prettier  // @prettier 或 @format
 */

`--insert-pragma`

在没有 pragma 的时候会插入@format这种 pragma 到格式化文件最顶端, 配合--require-pragma一起用

`--list-different`或`-l`

这是另一个常用的 flag, 会打印出 prettier 格式化前后不同的文件名.

1	prettier --single-quote --list-different "src/*/.js"

也可以用--check, 这个打印出跟人性化的信息

`--config-precedence`

config file 文件中的配置优先级高还是 CLI options 中的高

config file 指的是配置文件
CLI options 指的是输入的命令参数
cli-override (default)
- 默认 cli 中高, 也就是默认的 prettier 的配置高
file-override
- config file 中的高
prefer-file
- 如果配置文件找到了, 就按配置文件, 没找到就用 CLI 的

常用来整合编辑器中的, 比如用户定义了自己的配置, 但还是尊重项目的定的配置.

`--no-editorconfig`

不考虑小老鼠了, 具体看API中的信息

`--with-node-modules`

默认不会访问, 加了后就去访问格式化咯.

`--write`

就地改正, 按 prettier 的格式

`--loglevel`

改一下 CLI 的 log 等级

error
warn
log (default)
debug
silent

`--stdin-filepath`

prettier CLI 当做stdin的文件路径, 比如

abc.css

1
2
3

.name {
  display: none;
}

shell

$ cat abc.css | prettier --stdin-filepath abc.css
.name {
  display: none;
}

prettier 的默认配置

前面新建了一个 prettier.config.js 配置文件后可以参考这个设置

options.

默认的 option

prettier 的配置选项（参数）官网直译

总结下就是

一行超过多少个字符换行, markdown 也需要强制换行么. 末尾加不加分号, 换行后>在哪
对象字面量前后加空格么, 最后一个属性加逗号么, 单引号代替双引号么, 箭头寒素参数括号么.
缩进用 tab 还是空格, 一个 tab 几个空格
html 默认, endOfLine 默认, parser, filePath, pragma. range 默认
关注点还是末尾 js 加分号, tsx 不加,多一个—no-semi, 然后都用单引号 比 vsc 的配置多一点点

Print Width

指定一行不能超过多少长, 长了换行, 报错是 xxlint 的事

为了可读写, 建议不要超过 80 个字符的, 因为人阅读的时候一般不会超过 100-120 的, prettier的话倒是希望每行越长越好.

Default	CLI Override	API Override
80	`--print-width <int>`	`printWidth: <int>`

如果你不想在markdown中限定换行, 可以用Prose Wrap来关闭它, 默认preserve是保持markdown的as-is

Tab Width

一个缩进等级代表几个空格

Default	CLI Override	API Override
2	`--tab-width <int>`	`tabWidth: <int>`

Tabs

缩进的行用 tab 而不是用空格

Default	CLI Override	API Override
false	`--use-tabs`	`useTabs: <bool>`

tab 常用来缩进,但在 prettier 中 tab 是用来 align 的

Semicolons

每行后面带不带分号

Default	CLI Override	API Override
true	`--no-semi`	`semi: <bool>`

true 是在每行末尾加
false 是在每行开头加,但会引入 ASI 问题.

Quotes

使用单引号而不是双引号:

注意:

jsx 的会忽略这个配置, 用的是jsx-single-quote.
如果在一个用字符串包上字符串的情况下, "I'm double quoted"变"I'm double quoted". "This \"example\" is single quoted"变'This "example" is single quoted'
更多信息看strings rationale

Default	CLI Override	API Override
false	`--single-quote`	`singleQuote: <bool>`

Quote Props

当对象中的属性用引号包上的时候改变.

Valid options:

"as-needed" - 当没有严格要求时，禁止对象字面量属性名称使用引号
"consistent" - 要求对象字面量属性名称使用一致的引号，要么全部用引号，要么都不用
"preserve" - 想用就用

Default	CLI Override	API Override
“as-needed”	—quote-props	`<as-needed	consistent	preserve> quoteProps: “<as-needed	consistent	preserve>”`

eslint 要求对象字面量属性名称使用引号 (quote-props)

JSX Quotes

在 jsx 中用单引号代替双引号

Default	CLI Override	API Override
false	`--jsx-single-quote`	`jsxSingleQuote: <bool>`

Trailing Commas

多行的时候在末尾打印逗号. 单行数组是不会有末尾逗号的.
尾逗号[a,b,c,d,] 数组项 d 后面的逗号就是尾逗号

可选项:

none, 不加
es5: 在 es5 中某些加, 比如(objects, arrays, etc.)
all: 甚至在函数参数中也加

Default	CLI Override	API Override
“none”	`—trailing-comma <none	es5	all>`	`trailingComma: “<none	es5	all>”`

Bracket Spacing

在一个对象字面量中加空格

true - Example: { foo: bar }.
false - Example: {foo: bar}.

Default	CLI Override	API Override
true	`--no-bracket-spacing`	`bracketSpacing: <bool>`

JSX Brackets

对一个 jsx 元素而言,>是加在最后一样还是换新行

Valid options:

true - Example:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

false - Example:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Default	CLI Override	API Override
false	`--jsx-bracket-same-line`	`jsxBracketSameLine: <bool>`

Arrow Function Parentheses

箭头函数的参数, 在只有一个的情况下加不加圆括号()

Valid options:

"avoid" - 忽略. Example: x => x
"always" - 加上. Example: (x) => x

Default	CLI Override	API Override
“avoid”	`—arrow-parens <avoid	always>`	`arrowParens: “<avoid	always>”`

Range

只 format 文件中的一段, [) 选一个偏移范围

不能和cursorOffset一起用

Default	CLI Override	API Override
0	`--range-start <int>`	`rangeStart: <int>`
Infinity	`--range-end <int>`	`rangeEnd: <int>`

Parser

指定用什么 parse, prettier会自动从输入的文件目录中读取, 你不需要配置这个.

但 babel 和 flow对一个 js 集来说是不同的两种, 所以可以选.

当然还要其他选项.

File Path

指定前面 parser 的路径

1	cat foo \| prettier --stdin-filepath foo.css

Default	CLI Override	API Override
None	`--stdin-filepath <string>`	`filepath: "<string>"`

Require pragma

prettier可以按照这个标志来严格指定 format 文件, 只需要在每个文件前面加上pramga

例如文件中带上下面的参数后, 使用--require-pragma就会 format

1
2
3

/**
 * @prettier
 */

1
2
3

/**
 * @format
 */

Default	CLI Override	API Override
false	`--require-pragma`	`requirePragma: <bool>`

Insert Pragma

prettier 可以在用 prettier 进行 format 的时候在文件的开头插入@format, 如果已经有其他的docblock的时候会加入一行的

Default	CLI Override	API Override
false	`--insert-pragma`	`insertPragma: <bool>`

Prose Wrap

换行问题, 最开始的是超过多少字符提示, 但不换行的.

Valid options:

"always" - Wrap prose if it exceeds the print width.
"never" - Do not wrap prose.
"preserve" - Wrap prose as-is. First available in v1.9.0

Default	CLI Override	API Override
`"preserve"`	`—prose-wrap <always	never	preserve>	`	`proseWrap: “<always	never	preserve>”`

HTML Whitespace Sensitivity

HTML 文件全局空格敏感问题, 详细看whitespace-sensitive formatting

就是空格会影响布局, 就按 css 的 display 来

Valid options:

"css" - Respect the default value of CSS display property.
"strict" - Whitespaces are considered sensitive.
"ignore" - Whitespaces are considered insensitive.

Default	CLI Override	API Override
`"css"`	`—html-whitespace-sensitivity <css	strict	ignore>`	`htmlWhitespaceSensitivity: “<css	strict	ignore>”`

End of Line

历史原因, 有两种, That is \n (or LF for Line Feed) and \r\n (or CRLF for Carriage Return + Line Feed).

在 vscode 中

首先安装vscode的插件Prettier-Code formatter

安装成功后，编辑器默认的格式化处理就会被prettier代替，默认快捷键是alt + shift + f

插件安装成功后，按cmd+,调出编辑器的配置,会出现prettier插件的相关配置节点，同时也能看到一些默认的配置信息, 在setting.json中也可以自己定义。

更多的配置方式
Configuration File

其他的 prettier

除了直接用prettier, 还有像tslint-config-prettier这种 prettier

typescript 配置 prettier

文件保存时执行一次格式化
迁移已有代码的格式
代码提交前进行一次格式化

首先确认了 Prettier 对 TypeScript 有良好的支持.

保存时格式化

但我更喜欢保存时只是做一点比如去掉多余的空格, 按alt + shift + f才进行格式化.

在 vsc 中安装完插件后, 如果前面配置prettier.config.js 文件, 临时的配置比如:

{
  "tabWidth": 4,
  "useTabs": true
}

更多配置文件方式
Configuration File

然后cmd+,调出编辑器的配置, 设置editor.formatOnSave 选项.把值设置为 true.

已经有了 ESlint 下

Prettier 介绍与基本用法 6

使用 ESLint 运行 Prettier

如果你已经在你的项目中使用ESLint并且想要只通过单独一条命令来执行你的所有的代码检查的话，你可以使用ESLint来为你运行Prettier。

只需要使用eslint-plugin-prettier来添加Prettier作为ESLint的规则配置。

1	yarn add --dev prettier eslint-plugin-prettier

.eslintrc.json:

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

关闭 ESLint 的格式规则

你是否通过ESLint来运行Prettier，又或者是单独运行两个工具，那你大概只想要每个格式问题只出现一次，而且你特别不想要ESLint仅仅是和Prettier有简单的不同和偏好而报出“问题”。

所以你大概想要禁用冲突的规则（当保留其他Prettier不关心的规则时）最简单的方式是使用eslint-config-prettier。它可以添加到任何ESLint配置上面。

vsc 中 (这个配置自定义不同语言设置不同选项的 prettier 我没设置好)

在 vsc 中多说下, 首先 vsc 有自己的格式方式, 按cmd+k m可以查看到许多语言, 然后是你可以自己配置Configure 'language_name' language based settings., 跳转到setting.json 中写这种(和你用cmd+shift+p在输入preferences: config这种快多了)

这里的保存后格式化是对当前文件吧, 而不是本项目中所有的.

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

在cmd+,中看setting.json 中可以自己直接改

vsc 的配置, workspace setting 在项目根目录.vscode中, 但我找不到. 一般我在里面写 debug 的文件, 比如 egg 的那个配置

对于我常用的配置

ts, tsx, js, jsx, md 这些文件, 在 setting.json 中可以单独配置 user 的, 还有 css, less 都可以

但是不能配合prettier用

  // js
"[javascript]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false
},
// jsx
"[javascriptreact]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false
},
// ts
"[typescript]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false
},
// tsx
"[typescriptreact]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false
}
// md
"[markdown]": {},

下面链接中讲了详细使用 prettier

Code Formatting 6666 各种配置

读取顺序

先从 vsc 的市场中可以看到, setting 会先从

prettier 的配置文件读, 也就是前面说的 4 种
没有的话从.editorconfig这个小老鼠读
最后才是从默认的 vsc 的 prettier setting

再说下一下默认在 vsc 中插件 prettier 设置

// 一行最大80个字符
prettier.printWidth (default: 80)

// 使用tab代表几个空格
prettier.tabWidth (default: 2)

// 是否使用单引号代替双引号
prettier.singleQuote (default: false)

// 末尾的逗号, 3个选项, "none"就是无, "es5"会在例如对象和数组, "all"是包括函数参数
prettier.trailingComma (default: 'none')

// 控制对象字面量里面的空格
prettier.bracketSpacing (default: true)

// 如果为true, 在多行的jsx元素中, 最后的 > 单独一行,而不是跟在最后一样的末尾
prettier.jsxBracketSameLine (default: false)

// 用什么 parser .只有 'flow' 和 'babylon'.
prettier.parser (default: 'babylon') - JavaScript only

// 在每行的末尾加上分号 true. false就是用ASI, 看链接参考
prettier.semi (default: true)

// 缩进用不用tab
prettier.useTabs (default: false)

// (Markdown) wrap prose over multiple lines.
prettier.proseWrap (default: 'preserve')

// 对只有一个参数的箭头函数的这个参数, 用不用圆括号包上
prettier.arrowParens (default: 'avoid')

// 在jsx中用单引号而不是双引号
prettier.jsxSingleQuote (default: false)

// 对html文件空格敏感, 有更多选项
prettier.htmlWhitespaceSensitivity (default: 'css')

// 对每行末尾通过prettier自己设定, 有更多选项
prettier.endOfLine (default: 'auto')

然后是 vsc 中特殊指定的, 通过setting.json可以改 User and Workspace Settings

// 使用 prettier-eslint 代替 prettier.
prettier.eslintIntegration (default: false) - JavaScript and TypeScript only

// 使用 prettier-tslint 代替 prettier.
prettier.tslintIntegration (default: false) - JavaScript and TypeScript only

// 使用 prettier-stylelint 代替 prettier.
prettier.stylelintIntegration (default: false) - CSS, SCSS and LESS only

// 需要一个 a 'prettierconfig' 文件来格式化
prettier.requireConfig (default: false)

// 支持写一个 .gitignore 或 .prettierignore 这样的文件来忽略项目中哪些路径下的不进行格式化. 需要重启下vsc
prettier.ignorePath (default: .prettierignore)

// 对一些特定语言不进行用prettier的格式化. 在父目录下设置也会组织所有子目录下的配置
prettier.disableLanguages (default: ["vue"])

vsc 中的prettier插件也是会依赖项目中的本地依赖, 就是前面的优先级.

vsc 中的 setting

按cmd+,打开, 有两种不同的设定

User Settings - 这是全局的设定
Workspace Settings - 指定的 workspace 打开才会应用, 这个优先级高. 常用在小组中分享项目设定. 在.vscode文件中 de .settings.json, launch.json是用来 debug 的

改变会需要重启下 vsc, 也有不需要重启的, 自己点着试试, 先看 Commonly Userd => workbench 看下去

对于 workspace setting 在一个文件下当然可以加一个.vacode文件夹, 但当有一个根文件下有很多项目时呢. 比如 ava
那就在根目录下写一个Global Workspace settings 叫.code-workspace文件

{
  "folders": [
    {
      "path": "vscode"
    },
    {
      "path": "vscode-docs"
    },
    {
      "path": "vscode-generator-code"
    }
  ],
  "settings": {
    "window.zoomLevel": 1,
    "files.autoSave": "afterDelay"
  }
}

比如 debugging 的东西就写在.vscode文件夹下的lounch.json中

然后就是语言指定配置, 这个在前面讲过cmd+k, m

参考

Visual Studio Code 入门(译)
VS Code 使用之基本设置与配置详解
 使用 ESLint+Prettier 来统一前端代码风格
 Prettier 插件为更漂亮快应用代码
 使用 Prettier 美化 JavaScript 代码，让编程更舒心
 vscode + prettier 专治代码洁癖（一）
笔记, TypeScript 配置 Prettier 6
Prettier 介绍与基本用法 6
为什么用 Prettier 66
我为什么推荐 Prettier 来统一代码风格 6
Code Formatting 6666 各种配置
 What are the rules for JavaScript’s automatic semicolon insertion (ASI)?

prettier 代码格式美化

搞起

在项目中

各种不同格式的 prettier 配置文件

读取顺序

下面链接中讲了为啥用 lint 和 format

对于直接使用命令 CLI 的方式的话

prettierc 常用命令参数

CLI 的一些其他参数

--check或-c

--debug-check

--find-config-path 和 --config

--ignore-path

--require-pragma

--insert-pragma

--list-different或-l

--config-precedence

--no-editorconfig

--with-node-modules

--write

--loglevel

--stdin-filepath

prettier 的默认配置

默认的 option

Print Width

Tab Width

Tabs

Semicolons

Quotes

Quote Props

JSX Quotes

Trailing Commas

Bracket Spacing

JSX Brackets

Arrow Function Parentheses

Range

Parser

File Path

Require pragma

Insert Pragma

Prose Wrap

HTML Whitespace Sensitivity

End of Line

在 vscode 中

其他的 prettier

typescript 配置 prettier

保存时格式化

已经有了 ESlint 下

使用 ESLint 运行 Prettier

关闭 ESLint 的格式规则

vsc 中 (这个配置自定义不同语言设置不同选项的 prettier 我没设置好)

对于我常用的配置

下面链接中讲了详细使用 prettier

读取顺序

vsc 中的 setting

参考

`--check`或`-c`

`--debug-check`

`--find-config-path` 和 `--config`

`--ignore-path`

`--require-pragma`

`--insert-pragma`

`--list-different`或`-l`

`--config-precedence`

`--no-editorconfig`

`--with-node-modules`

`--write`

`--loglevel`

`--stdin-filepath`