前端工具优化

Prettier 基础使用

Kaede2025-07-112026-01-03

引言

什么是 Prettier

根据官网的介绍, Prettier 其实就是一个用来统一代码格式的工具, 并且已经直接集成在了各种工具当中.

为什么使用 Prettier

在多人协作开发的时候, 每个人的代码风格总是不那么的统一, 所以我们需要一个工具来进行统一, 这里就可以使用 Prettier 了.

安装

在需要的项目中执行如下代码:

1
2
3

npm install --save-dev --save-exact prettier
# or
yarn add --dev --exact prettier

随后在根目录中创建一个对应的配置文件出来. 可以直接运行代码, 也可以直接手动创建一个 .prettierrc 文件.

1	node --eval "fs.writeFileSync('.prettierrc','{}\n')"

额外的, 可以创建一个 .prettierignore 文件, 可以忽略不想进行格式化的文件.

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

至此就安装完成了.

配置代码样式

我们肯定需要规定一下代码的样式, 否则这个东西就没有什么意义了. 这里可以直接前往官网的 Prettier v3.2.4 PlayGround, 直接在这里对照勾选需要的东西即可.

确认格式后, 直接点击下面的 copy config JSON, 复制到配置文件中即可.

一些常用的配置及作用如下:

module.exports = {
    // 一行最多多少个字符
    "printWidth": 150,
    // 指定每个缩进级别的空格数
    "tabWidth": 2,
    // 使用制表符而不是空格缩进行
    "useTabs": true,
    // 在语句末尾打印分号
    "semi": true,
    // 使用单引号而不是双引号
    "singleQuote": true,
    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
    "quoteProps": 'as-needed',
    // 在JSX中使用单引号而不是双引号
    "jsxSingleQuote": false,
    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
    "trailingComma": 'es5',
    // 在对象文字中的括号之间打印空格
    "bracketSpacing": true,
    // jsx 标签的反尖括号需要换行
    "jsxBracketSameLine": false,
    // 在jsx中把'>' 是否单独放一行
    "bracketSameLine": false,
    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
    "arrowParens": 'always',
    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
    "rangeStart": 0,
    "rangeEnd": Infinity,
    // 指定要使用的解析器，不需要写文件开头的 @prettier
    "requirePragma": false,
    // 不需要自动在文件开头插入 @prettier
    "insertPragma": false,
    // 使用默认的折行标准 always\never\preserve
    "proseWrap": 'preserve',
    // 指定HTML文件的全局空格敏感度 css\strict\ignore
    "htmlWhitespaceSensitivity": 'css',
    // Vue文件脚本和样式标签缩进
    "vueIndentScriptAndStyle": false,
    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
    "endOfLine": 'lf'
}