使用 Prettier 格式化代码

OhhhCKY

发布于 2022-12-28 16:45:55

1.1K0

发布于 2022-12-28 16:45:55

文章被收录于专栏：YFun's BlogYFun's Blog

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除

html