prettierrc 介绍

简介

prettierrc 是一款代码格式化工具，具有自动化、规范化的特点，可以帮助程序员在编写代码时自动调整代码格式，增强代码的可读性和可维护性。

prettierrc 凭借其简单易用、快速高效的特点，在前端、后端、移动端等多个领域得到广泛应用。

安装

prettierrc 的安装非常简单，只需使用 npm 命令即可：

npm install prettier --save-dev

使用

prettierrc 的使用也非常简单，只需在项目中增加 .prettierrc 配置文件，即可生效，具体示例配置如下：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "lf"
}

具体配置参数含义如下：

• printWidth: 一行的最大长度，默认为 80 个字符。
• tabWidth: 缩进的空格数，默认为 2 个空格。
• useTabs: 是否使用 Tab 进行缩进，默认为 false。
• semi: 是否在语句末尾添加分号，默认为 true。
• singleQuote: 是否使用单引号，默认为 true。
• quoteProps: 对象属性的引号方式，可选值为 "as-needed"、"consistent"、"preserve"，默认为 "as-needed"。
• jsxSingleQuote: jsx 中是否使用单引号，默认为 false。
• trailingComma: 是否在对象、数组、函数参数等后面添加尾逗号，可选值为 "none"、"es5"、"all"，默认为 "es5"。
• bracketSpacing: 是否在括号内添加空格，默认为 true。
• jsxBracketSameLine: jsx 元素的 > 是否与前面的元素在同一行，默认为 false。
• arrowParens: 箭头函数的参数是否添加括号，可选值为 "avoid"、"always"，默认为 "always"。
• requirePragma: 是否在文件头部添加编译指令注释。
• insertPragma: 编译指令是否添加在文件头部。
• proseWrap: 指定有哪些个换行符被视为段落分隔符，可选值为 "always"、"never"、"preserve"。
• htmlWhitespaceSensitivity: 在文本文件中指定是否要折叠空白符。
• vueIndentScriptAndStyle: 是否将 Vue 文件中的