使用 Prettier 格式化代码

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

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 . # 格式化当前文件夹的所有文件

配置

参见官方文档：

• https://prettier.io/docs/en/configuration.html

• https://prettier.io/docs/en/options.html

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"]
            );
        }
    });