1. 1. 安装
    1. 1.1. 插件
    2. 1.2. CLI
  2. 2. 配置
  3. 3. 效果

格式化代码可以提高代码的可读性,使代码更加美观。

Prettier 支持:

  • JavaScript (including experimental features)
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • HTML
  • JSON
  • GraphQL
  • Markdown, including GFM and MDX
  • YAML

安装

插件

你可以很方便的在 VSCode 等 IDE 上安装插件,插件名为 Prettier.

以 VSCode 为例:

如果安装了其他格式化插件,则需要点击 [格式化文档的方式],选择 Prettier

CLI

sudo npm i -g prettier

相关的文档可参见官网: https://prettier.io/docs/en/cli.html

prettier --write . # 格式化当前文件夹的所有文件

配置

参见官方文档:

Prettier 的配置文件有多种写法:

以使用 YAML 书写的 .prettierrc 为例:

# 单行最长字符数
printWidth: 80
# 制表符长度
tabWidth: 4
# 是否使用 Tab
useTabs: false
# 是否加入分号
semi: true
# 单引号
singleQuote: false

# ...

效果

格式化前:

fetch("https://blog.yfun.top/search.json").then(res=>res.json()).then((content) => {console.log(content);for (let i = 0; i < content.length; i++){console.log(content[i]['title'] + " --- https://blog.yfun.top" + content[i]['url'])}})

格式化后:

fetch("https://blog.yfun.top/search.json")
.then((res) => res.json())
.then((content) => {
console.log(content);
for (let i = 0; i < content.length; i++) {
console.log(
content[i]["title"] +
" --- https://blog.yfun.top" +
content[i]["url"]
);
}
});