prettier 代码美化工具

310 阅读1分钟

Prettier是一个流行的代码格式化工具,支持多种编程语言和框架。Prettier的配置可以通过.prettierrc文件进行,该文件可以使用JSON、YAML或JavaScript格式。

基本配置项

  • tabWidth:定义制表符的空格数,默认为2。
  • useTabs:决定是否使用制表符而不是空格,默认为false。
  • singleQuote:是否使用单引号,默认为false。
  • semi:语句末尾是否添加分号,默认为true。
  • trailingComma:定义尾随逗号的行为,默认为“none”。
  • bracketSpacing:在对象、数组字面量中,括号内的空格,默认为true。
  • arrowParens:箭头函数参数的括号,默认为“avoid”。

安装和使用

  1. 全局安装‌:使用npm全局安装Prettier: npm install -g prettier
  2. 项目级别安装‌:在项目目录中安装Prettier: npm install --save-dev prettier
  3. 配置文件‌:在项目根目录下创建一个.prettierignore文件,列出不需要Prettier格式化的文件或文件夹。例如:
/node_modules/
/dist/
*.log

在项目根目录下创建.prettierrc文件,并添加上述配置项。例如:

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

可以在package.json中添加以下脚本:

"scripts": {
  "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,vue,json,md}\""
}

这样可以在运行npm run format进行代码检查和格式化。

  1. 编辑器插件‌:在代码编辑器(如VSCode)中安装Prettier插件,如“Prettier - Code formatter”。