Prettier介绍与基本用法

前言

最近在空闲时间在搭建Vue3+Ts+Vite搭建的管理后台，准备尝试一下Prettier，学习的同时也正好总结了一些经验，在这里做一些记录

什么是Prettier

prettier是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

1、安装到开发依赖上

//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier

2、在根目录下创建.prettierrc.js配置文件

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 100, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

格式化规则还可以写在如下文件中(按优先级由高至低排列)：

1. 项目的package.json文件中
2. .prettierrc.json或 .prettierrc.yml文件中

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

3. .prettierrc.js或 prettier.config.cjs文件中

module.exports = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Prettier会检查配置文件并自动读取文件中的配置，我们只需要选一种方法配置就好了，我现在选的是第三种。

3、忽略不想格式化的文件

创建 .prettierignore忽略你不希望格式化的文件，node_modules是默认会被忽略的目录。他的用法就类似于.gitignore

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

4、命令行格式化

1. 格式化全部文档

npx prettier --write .
//或
yarn prettier --write .

2. 格式化指定文档

npx prettier --write src/components/Button.js
//或
yarn prettier --write src/components/Button.js

3. 检查文档是否已格式化（检查指定文件同上）

npx prettier --check .
//或
yarn prettier --check .

5、与eslint的区别

prettier的配置项比较少（容易配置），且只专注于代码样式，而eslint还提供语法检查，现在的eslint也集成了formatter功能。

prettier相比eslint支持更多文件的格式化。

6、解决和eslint的冲突

安装 eslint-config-prettier，这个插件会把eslint中可能导致冲突的规则关掉，这样两者就能兼容使用了。

//1. 安装 eslint-config-prettier 插件
npm i -D eslint-config-prettier
//2. 在eslint的配置文件中写入以下内容
 extends: ['plugin:prettier/recommended'], // 避免与 prettier 冲突

7、git hooks

可以设置在git提交之前执行一次格式化( pre-commit hook )，这样我们仓库里的代码就都是格式化好的了。

只需要在package.json里面加入一些配置。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

如果你使用eslint，lint-staged里eslint的执行顺序要放在前面

需要安装husky 和 lint-staged这两个依赖才能实现，其中husky是帮助我们添加git hooks的工具，而lint-staged则是筛选那些staged的git文件执行lint。

执行 npx mrm lint-staged 就会把两个工具都安装好，也会自动生成package.json配置。