代码风格统一

这里主要讲Prettier代码格式化配置项，避免代码风格不一致，导致git提交冲突。

• ESLint：JavaScript 代码检查工具，可以用来统一代码风格，发现代码中的错误。
• Prettier：代码格式化工具，可以用来统一代码格式，使其符合一定的风格规范。
• Stylelint：CSS 代码检查工具，可以用来统一 CSS 代码风格，发现 CSS 代码中的错误。

配置介绍

在项目顶层目录下创建.prettierrc文件，并添加以下配置项：

{
  "semi": true, //语句末尾添加分号
  "trailingComma": "es5", //多行输入的尾随逗号遵循ES5的规则
  "useTabs": false, //使用空格缩进,而不是制表符
  "tabWidth": 2, //表示每个缩进级别使用2个空格
  "singleQuote": false, //表示使用双引号而不是单引号
  "printWidth": 120, //表示每行代码的最大长度为120个字符
  "bracketSpacing": true, //表示在对象字面量的括号之间添加空格
  "arrowParens": "always", //表示在箭头函数的参数周围总是添加括号，即使只有一个参数
  "endOfLine": "auto", //自动检测行尾字符
  "quoteProps": "as-needed", //在必要时为对象的属性添加引号
  "bracketSameLine": true, //将多行对象的括号放在最后一行的末尾
  "vueIndentScriptAndStyle": false, //不缩进Vue文件中的<script>和<style>标签
  "htmlWhitespaceSensitivity": "css", //标签的空白敏感性遵循CSS规则
  "insertPragma": false, //不插入特殊的注释来标识文件已被Prettier格式化
  "proseWrap": "preserve", //表示保持文本的换行方式不变
  "requirePragma": false, //不需要在文件顶部添加特定的注释来标识文件已被Prettier格式化
  "singleAttributePerLine": true //每个HTML标签只使用一个属性，并且每个属性占一行
}

使用方式

vscode中使用

• 1. 安装Prettier插件
• 2. 在vscode中设置保存时自动格式化代码： Settings -> Format On Save
• 3. 在vscode中设置Prettier为默认格式化工具：Settings -> Default Formatter -> 选择Prettier
• 4. 在vscode中设置： Settings -> Prettier -> Require Config -> 选择.prettierrc文件

项目中使用

• 1. 安装Prettier

# 项目开发环境安装，不涉及打包环境
npm install  prettier -D

• 2. pagack.json中添加配置

{
  "scripts": {
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\" \"src/**/*.js\" " // 格式化所有vue、js、ts文件
    //"format": "prettier --write .", // 格式化所有文件
  }
}