共计 1369 个字符,预计需要花费 4 分钟才能阅读完成。
在上一节中,咱们晓得了 ESLint
能够让咱们的代码格局变得更加标准,然而同样的它也会带来开发时编码复杂度回升的问题。
那么有没有方法既能够保障 ESLint
规定校验,又能够让开发者无需关注格局问题来进行顺畅的开发呢?
答案是:有的!
而解决这个问题的要害就是 prettier
!(点击 这里 进入 prettier
中武官网!)
prettier
是什么?
- 一个代码格式化工具
- 开箱即用
- 能够间接集成到
VSCode
之中 - 在保留时,让代码间接合乎
ESLint
规范(须要通过一些简略配置)
2-06:ESLint 与 Prettier 配合解决代码格局问题
prettier
能够在保留代码时,让咱们的代码间接合乎 ESLint
规范。然而想要实现这样的性能须要进行一些配置。
- 在
VSCode
中装置prettier
插件(搜寻prettier
),这个插件能够帮忙咱们在 配置prettier
的时候取得提醒
- 在我的项目根目录中新建
.prettierrc
文件,该文件为perttier
默认配置文件
在该文件中写入如下配置:
{ // 不尾随分号 "semi": false, // 应用单引号 "singleQuote": true, // 多行逗号宰割的语法中,最初一行不加逗号 "trailingComma": "none", // HTML 空白敏感性 "ignore"- 所有标签四周的空白(或短少它)被认为是微不足道的。"htmlWhitespaceSensitivity": "ignore" }
- 关上
VSCode
《设置面板》
- 在设置中,搜寻
save
,勾选Format On Save
至此,你即可在
VSCode
保留时,主动格式化代码!
然而! 你只做到这样可能还不够!
你可能遇到以下问题,最常见的例如:
- VSCode 而言,默认一个 tab 等于 4 个空格,而 ESLint 心愿一个 tab 为两个空格
解决办法:关上 VSCode《设置面板》-> Tab Size 设置为 2
如果你的 VSCode 装置了多个代码格式化工具
解决办法:单击右键 -> 应用 … 格式化工具 -> 配置默认格式化程序为 Prettier
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 提交标准!
我会在下个大节持续分享~