关于前端:标准化编程规范解决方案之Prettier

37次阅读

共计 1369 个字符,预计需要花费 4 分钟才能阅读完成。

在上一节中,咱们晓得了 ESLint 能够让咱们的代码格局变得更加标准,然而同样的它也会带来开发时编码复杂度回升的问题。

那么有没有方法既能够保障 ESLint 规定校验,又能够让开发者无需关注格局问题来进行顺畅的开发呢?

答案是:有的!

而解决这个问题的要害就是 prettier!(点击 这里 进入 prettier 中武官网!)

prettier 是什么?

  1. 一个代码格式化工具
  2. 开箱即用
  3. 能够间接集成到 VSCode 之中
  4. 在保留时,让代码间接合乎 ESLint 规范(须要通过一些简略配置)

2-06:ESLint 与 Prettier 配合解决代码格局问题

prettier 能够在保留代码时,让咱们的代码间接合乎 ESLint 规范。然而想要实现这样的性能须要进行一些配置。

  1. VSCode 中装置 prettier 插件(搜寻 prettier),这个插件能够帮忙咱们在 配置 prettier 的时候取得提醒
  1. 在我的项目根目录中新建 .prettierrc 文件,该文件为 perttier 默认配置文件
  1. 在该文件中写入如下配置:

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

  1. 关上 VSCode《设置面板》
  1. 在设置中,搜寻 save,勾选 Format On Save

至此,你即可在 VSCode 保留时,主动格式化代码!

然而! 你只做到这样可能还不够!
你可能遇到以下问题,最常见的例如:

  1. VSCode 而言,默认一个 tab 等于 4 个空格,而 ESLint 心愿一个 tab 为两个空格
    解决办法:关上 VSCode《设置面板》-> Tab Size 设置为 2
  1. 如果你的 VSCode 装置了多个代码格式化工具
    解决办法:单击右键 -> 应用 … 格式化工具 -> 配置默认格式化程序为 Prettier

  1. ESLint 和 prettier 之间的抵触问题
    咱们尝试在 Home.vue 中写入一个 created 办法,写入实现之后,关上咱们的控制台咱们会发 现,此时代码抛出了一个 ESLint 的谬误

这个谬误的意思是说:created 这个办法名和前面的小括号之间,应该有一个空格!

然而当咱们退出了这个空格之后,只有一保留代码,就会发现 prettier 会主动帮忙咱们去除掉这个空格。

那么此时的这个问题就是 prettier 和 ESLint 的抵触问题。

解决办法:关上 .eslintrc.js 配置文件 -> 在 rules 规定下,新增一条规定 -> ‘space-before-function-paren’: ‘off’ (该规定示意敞开《办法名后减少空格》的规定)

重启我的项目

至此咱们整个的 perttier 和 ESLint 的配合应用就全副实现了。

在之后咱们写代码的过程中,只须要保留代码,那么 perttier 就会帮忙咱们主动格式化代码,使其合乎 ESLint 的校验规定。而无需咱们手动进行更改了。

在这两个大节咱们通过 prettier + ESLint 解决了代码格局的问题,然而咱们之前也说过 编程标准 指的不仅仅只是 代码格局标准。

除了 代码格局标准 之外,还有另外一个很重要的标准就是 git 提交标准!

我会在下个大节持续分享~

正文完
 0