Prettier从0到1

prettier

prettier就是统一代码风格，只管代码格式（引号、分号、换行等），不管逻辑错误，语法错误的格式化工具

安装

pnpm add prettier -D
# 或者
npm install prettier --save-dev
# -D 和 --save-dev 都是安装到开发依赖，不会被打包进生产代码

配置

{
  "semi":true,
  // 句尾加分号
  "singleQuote":"true",
  // 使用单引号
  "trailingComma":"es5",
  // 在ES5语法下保留尾逗号
  "printWidth":100,
  // 单行最多100字符
  "tabWidth":2,
  // 缩进2空格
  "useTabs":false,
  "arrowParens":"avoid",
  // 单行箭头函数不加括号
  "endOfline":"if"
  // 统一换行符为 if
}

以及新建忽略文件 (.prettierignore)

node_modules
dist
bulid
*.log

再加格式化脚本（package.json）

"script": {
  "format":"prettier --write."
}

格式化项目

npm run format

与ESLint关系

-- eslint ：检查语法、逻辑、质量

-- 只管格式、风格

冲突解决

用 eslint-config-prettier关闭ESLint 中与 prettier冲突的规则

用 eslint-plugin-prettier把prettier变成eslint规则

一句话，如果一起用要关冲突