前言

开发项目时，为了统一代码的格式，需要调整代码的缩进、换行、空格等细节，使整个项目保持一致的代码风格。

Prettier 是一个代码格式化工具，它可以根据自定义的规则自动格式化代码

这里要说明一下，暂时不会使用另外一个流行的代码检测工具 ESLint，主要是觉得在入门学习阶段使用这个没什么必要，反而增加了学习的成本，对于 eslint 检测到各种错误，可能会陷进去，影响正常的节奏

安装 prettier

npm install prettier -D

配置

新建 prettier.config.js 文件

module.exports = {
  /** 每一行的宽度 */
  printWidth: 120,
  /** 不使用 tab 格式化 */
  useTabs: false,
  /** tab 键的空格数 */
  tabWidth: 2,
  /** 不加分号 */
  semi: false,
  /** 在对象中的括号之间用空格来间隔，效果：{ a: 1 } */
  bracketSpacing: true,
  /** 箭头函数的参数无论有几个，都要括号包裹 */
  arrowParens: 'always',
  /** 换行符的使用 */
  endOfLine: 'auto',
  /** 是否采用单引号 */
  singleQuote: true,
  /** 对象或者数组的最后一个元素后面不要加逗号 */
  trailingComma: 'none',
  /** HTML空白敏感度 */
  htmlWhitespaceSensitivity: 'strict',
  /** 换行设置 */
  proseWrap: 'never'
}

新建 .prettierignore 文件，用户忽略文件的格式化

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

使用

命令行执行 npx prettier -w . 就会使用 prettier 格式化所有文件

. 是指当前目录下的所有文件，当然不包括被忽略的文件

也可以指定文件对其进行格式化操作, 例如格式化 package.json

npx prettier --write package.json

还可以把该命令放到 package.json 中，然后执行 npm run prettier

"scripts": {
    "prettier": "prettier --write ."
}