前端规范(二)之Prettier

**相关章节**

前端规范(一)之ESlint以及@antfu/eslint-config
前端规范(二)之Prettier
前端规范(三)之stylelint
前端规范(四)之husky+lint-staged+commitizen+commitlint

前端规范Prettier

Prettier规范的是代码偏向于排版层面上的风格，也就是增加代码的阅读性层面上的；

ESlint,它规范的是代码偏向语法层面上的风格。比如说不能使用console，箭头函数参数必须包裹在括号中等等；

这两个工具的侧重点不同，从目前较多开源项目中开，绝大多数采用eslint+prettier来归档代码；

1. vsCode 的Prettier插件

相信很多人都已经安装过了

2. 项目中安装prettier

npm install -D prettier

3. package.json 中配置scripts

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\""
  },

4. 创建.prettierrc.js

//编写代码时，尽量符合以下规则
module.exports = {
  printWidth: 80, //单行长度,超过则自动换行
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: false, //句末使用分号
  singleQuote: true, //使用单引号
  endOfLine: 'auto', //配置换行符格式为auto
  arrowParens: 'avoid', //单参数箭头函数参数周围使用圆括号-eg: (x) => xavoid：省略括号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  jsxBracketSameLine: false, //多属性html标签的‘>’折行放置
  rangeStart: 0,
  requirePragma: false, //无需顶部注释即可格式化
  trailingComma: 'none', //多行时尽可能打印尾随逗号
  useTabs: false //使用空格代替tab缩进
}

5. 创建忽略文件.prettierignore

/dist/*
/node_modules/**
**/*.svg
**/*.sh
/public/*

6. 运行命令

npm run lint:prettier

此时你有可能出现如下报错

只需要将package.json里面的 “type”: "module"删除后重新运行命令就行了；

如下图所示，双引号将会被Prettier修复

7. 保存的时候自动格式化

此处涉及vscode的用户区设置和工作区设置
用户区设置是针对所有项目都生效，工作区设置是针对当前项目，一般在根目录下会有个.vscode的文件夹下面，工作区的优先级高于用户区，但是如果工作区没有设置某个项，用户区有设置的话，那么用户区的设置为准，同样也会作用到当前项目，所以建议设置"[vue]"的局部设置，防止被用户区的设置干扰到；

  "editor.formatOnSave": true,//开启保存的时候自动格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode",//指定格式化的插件为Prettier
    "[vue]": {//局部设置，优先级较高，此处的局部设置，是防止用户区设置干扰到工作区设置
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

8. 与ESlint冲突问题

请查看这篇文章