likes
comments
collection
share

二、标准化编程规范解决方案之自动格式化工具 Prettier

作者站长头像
站长
· 阅读数 270

在上一节中，我们知道了 ESLint 可以让我们的代码格式变得更加规范，但是同样的它也会带来开发时编码复杂度上升的问题。

那么有没有办法既可以保证 ESLint 规则校验，又可以让开发者无需关注格式问题来进行顺畅的开发呢？

答案是：有的！

而解决这个问题的关键就是 prettier！（点击 这里 进入 prettier 中文官网！）

prettier 是什么？

  1. 一个代码格式化工具
  2. 开箱即用
  3. 可以直接集成到 VSCode 之中
  4. 在保存时，让代码直接符合 ESLint 标准（需要通过一些简单配置）

2-06：ESLint 与 Prettier 配合解决代码格式问题

prettier 可以在保存代码时，让我们的代码直接符合 ESLint 标准。但是想要实现这样的功能需要进行一些配置。

  1. 在 VSCode 中安装 prettier 插件（搜索 prettier），这个插件可以帮助我们在 配置 prettier 的时候获得提示二、标准化编程规范解决方案之自动格式化工具 Prettier
  1. 在项目根目录中新建 .prettierrc 文件，该文件为 perttier 默认配置文件

  1. 在该文件中写入如下配置：

    {
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none",
  // HTML 空白敏感性 "ignore"- 所有标签周围的空白（或缺少它）被认为是微不足道的。
  "htmlWhitespaceSensitivity": "ignore"
}

    二、标准化编程规范解决方案之自动格式化工具 Prettier

  1. 打开 VSCode 《设置面板》二、标准化编程规范解决方案之自动格式化工具 Prettier
  1. 在设置中，搜索 save ，勾选 Format On Save二、标准化编程规范解决方案之自动格式化工具 Prettier

至此，你即可在 VSCode 保存时，自动格式化代码！

但是！ 你只做到这样可能还不够！你可能遇到以下问题，最常见的例如：

  1. VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 希望一个 tab 为两个空格 解决办法：打开 VSCode 《设置面板》-> Tab Size 设置为 2 二、标准化编程规范解决方案之自动格式化工具 Prettier

  1. 如果你的 VSCode 安装了多个代码格式化工具解决办法：单击右键 -> 使用...格式化工具 -> 配置默认格式化程序为Prettier 二、标准化编程规范解决方案之自动格式化工具 Prettier

    二、标准化编程规范解决方案之自动格式化工具 Prettier

  1. ESLint 和 prettier 之间的冲突问题我们尝试在 Home.vue 中写入一个 created 方法，写入完成之后，打开我们的控制台我们会发 现，此时代码抛出了一个 ESLint 的错误

    二、标准化编程规范解决方案之自动格式化工具 Prettier

这个错误的意思是说：created 这个方法名和后面的小括号之间，应该有一个空格！

但是当我们加入了这个空格之后，只要一保存代码，就会发现 prettier 会自动帮助我们去除掉这个空格。

那么此时的这个问题就是 prettier 和 ESLint 的冲突问题。

解决办法：打开 .eslintrc.js 配置文件 -> 在 rules 规则下，新增一条规则 -> 'space-before-function-paren': 'off' (该规则表示关闭《方法名后增加空格》的规则)

重启项目

至此我们整个的 perttier 和 ESLint 的配合使用就全部完成了。

在之后我们写代码的过程中，只需要保存代码，那么 perttier 就会帮助我们自动格式化代码，使其符合 ESLint 的校验规则。而无需我们手动进行更改了。

在这两个小节我们通过 prettier + ESLint 解决了代码格式的问题，但是我们之前也说过 编程规范 指的不仅仅只是 代码格式规范。

除了 代码格式规范 之外，还有另外一个很重要的规范就是 git 提交规范！

请看下个章节《标准化编程规范解决方案之git 提交规范化工具 Commitizen》