prettier

prettier 官方文档

bash

npm install --save-dev --save-exact prettier

yarn add --dev --exact prettier

pnpm add --save-dev --save-exact prettier

创建 .prettierignore 文件

bash

# .prettierignore 文件配置
 /dist
 /.vscode
 node_modules
 .eslintrc.js
 package.json
 package-lock.json
 components.d.ts

创建 .prettierrc 文件，在线配置 https://prettier.io/playground/

javascript

{
   "arrowParens": "always", // 箭头函数，只有一个参数的时候，也需要括号
   "bracketSameLine": true,
   "bracketSpacing": false, // 对象是否有空格,值true `{ name: 'zhongyi' }` false {name: 'zhongyi'}
   "embeddedLanguageFormatting": "auto",
   "htmlWhitespaceSensitivity": "css", // 根据显示样式决定 html 要不要折行
   "jsxSingleQuote": false, // jsx属性值是否为单引号，不为单引号
   "printWidth": 120, // 超出120个字符就换行
   "proseWrap": "preserve", // 使用默认的折行标准
   "quoteProps": "as-needed", // 对象的 key 仅在必要时用引号
   "insertPragma": false, // 不需要自动在文件开头插入 @prettier
   "requirePragma": false, // 不需要自动在文件开头插入 @prettier
   "semi": true, // 末尾增加分号";"
   "singleQuote": true,// 使用单引号
   "tabWidth": 2, // 缩进字符（两个）
   "trailingComma": "none",// 对象后面 不需要逗号","
   "useTabs": false, // 不使用tab缩进
   "vueIndentScriptAndStyle": false
 }

检查有哪些文件还没有格式化的

javascript

npx prettier --check .

使用 prettier 格式化所有的文件

bash

npx prettier --write .