标准化编程规范解决方案之Prettier
在上一节中,我们知道了 ESLint
可以让我们的代码格式变得更加规范,但是同样的它也会带来开发时编码复杂度上升的问题。
那么有没有办法既可以保证 ESLint
规则校验,又可以让开发者无需关注格式问题来进行顺畅的开发呢?
答案是:有的!
而解决这个问题的关键就是 prettier
!(点击 这里 进入 prettier
中文官网!)
prettier
是什么?
- 一个代码格式化工具
- 开箱即用
- 可以直接集成到
VSCode
之中 - 在保存时,让代码直接符合
ESLint
标准(需要通过一些简单配置)
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
文章图片
文章图片
重启项目这个错误的意思是说:created 这个方法名和后面的小括号之间,应该有一个空格!
- ESLint 和 prettier 之间的冲突问题
我们尝试在 Home.vue 中写入一个 created 方法,写入完成之后,打开我们的控制台我们会发 现,此时代码抛出了一个 ESLint 的错误
文章图片
但是当我们加入了这个空格之后,只要一保存代码,就会发现 prettier 会自动帮助我们去除掉这个空格。
那么此时的这个问题就是 prettier 和 ESLint 的冲突问题。
解决办法:打开 .eslintrc.js 配置文件 -> 在 rules 规则下,新增一条规则 -> 'space-before-function-paren': 'off' (该规则表示关闭《方法名后增加空格》的规则)
至此我们整个的 perttier 和 ESLint 的配合使用就全部完成了。
在之后我们写代码的过程中,只需要保存代码,那么 perttier 就会帮助我们自动格式化代码,使其符合 ESLint 的校验规则。而无需我们手动进行更改了。
在这两个小节我们通过 prettier + ESLint 解决了代码格式的问题,但是我们之前也说过 编程规范 指的不仅仅只是 代码格式规范。
除了 代码格式规范 之外,还有另外一个很重要的规范就是 git 提交规范!
【标准化编程规范解决方案之Prettier】我会在下个小节继续分享~
推荐阅读
- openssl客户端编程(一个不起眼的函数导致的SSL会话失败问题)
- windows内核驱动开发|【windows内核编程】vs2013+WDK8.1+winDbg+vmware win7虚拟机联调
- TCP/IP|《TCP/IP详解》笔记——网络编程常用指令:ipconfig/ ping/ tracert/ netstat
- 个人技能学习|8种提升程序猿编程能力的方法+编程思维四个核心(分解、抽象、模式识别和算法)
- 知识总结|【Shell】编程之文本处理工具sed(7)
- 知识总结|【Shell】编程之文本处理工具awk(8)
- JS异步编程Promise对象详解
- 前端学习 linux —— shell 编程
- OpenAPI|OpenAPI 3.0 规范-食用指南
- 面向对象编程导论|桥接模式的优点