【前端基础知识】prettierrc 统一代码格式

一、在项目根目录创建两个文件

.prettierrc.js

该文件仅供规则参考，其中多半其实都是默认值，可以根据个人习惯改写

//该文件仅供规则参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 80, //单行长度
  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', //对引用代码进行格式化
};

.prettierrc.json

该文件规定了代码的格式

{
    "printWidth": 200,
    "useTabs": true,
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true,
    "proseWrap": "preserve",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "trailingComma": "none",
    "arrowParens": "avoid",
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "ignore",
    "jsxSingleQuote": true,
    "vueIndentScriptAndStyle": false,
    "embeddedLanguageFormatting": "auto",
    "quoteProps": "as-needed"
}

二、选择性在根目录创建格式化忽略文件 .prettierignore

# Ignore artifacts:
build

# Ignore all HTML files:
*.html

三、格式化文档

1、命令行格式化

npm install --save-dev prettier

a、格式化全部文档

npx prettier --write

b、格式化指定文档

npx prettier --write src/components/App.vue

c、检查是否格式化

npx prettier --check

2、编辑器格式化

以vscode为例，在插件库中搜索 ‘Prettier - Code formatter’进行安装


这样就可以在保存（CTRL + S）的时候自动格式化代码了！！！