【前端】代码质量

前言

简单地整理和收集了一些代码质量相关的资料，并浅谈一些自己的理解。
源路线：路线图

---

什么是代码质量

在前面学习js的时候，便已经多次提到了“代码质量”这四个字。

所谓代码质量，就是你写的代码的质量，这个质量体现在它是否整洁漂亮，是否清晰易懂，是否便于维护，是否保持可靠等等。

比如注释书写规范，变量命名规范，方法命名规范，组件命名规范，等等，都是“代码质量”的一部分。

---

如何实现代码质量

参考前言中的路线图，我们可以把代码质量分为三类：

1. 类型校验
2. linter & formatter
3. 编码规范

类型校验。

使用typescript来进行代码编写。因为typescript与javascript不同，它自带了类型校验，强类型，支持静态和动态类型，可以再编译期间发现并纠正错误。而js则是一种解释型语言，只能在运行时发现错误，弱类型，没有静态类型选项。

linter & formatter

使用eslint或者prettier，或者都用。他们是一些插件/工具/依赖，能够帮你检查代码，就先word中的拼写纠正一样，帮你发现代码书写错误。最简单的例子，比如{{{{{{{一堆大括号帮你找到其对应的括尾。
事实上你大概率已经使用过了，因为在vue-cli中自带了eslint，你可以在package.json中看到。
你也可以在eslint中自定义配置你所需要的检查规则，也可以引入业界广泛推崇和使用的规则，比如airbnb的规则，而这便与后面的编码规范相关。

编码规范

写不同的代码，会有不同的编码规范。
比如写js，css，vue，react，都会有相关的编码规范，或是官方推荐的，或是个人习惯的，或是团队规定的。
良好的编码规范，可以使代码清晰易读，容易交接方便维护，其好处是显而易见的。
不过大多数情况下，我们都只是了解一部分，但不全，然后跟着自己的感觉写。这种时候规定一个编码的规范，可以大大提高集体代码成果的质量，方便代码检查。比如应用airbnb的代码规范。
具体的规范可以去前言中的路线图中点击链接查看，在文末我也会附上。

---

一些实现代码质量的帮助

这里主要会罗列一些可供继续学习的网页资源，我不保证在你点击这些链接的时候，他们依然是最有效的解决方案，此处仅供参考。

你也可以点击前言中的路线图，其中有下面的网页中的一部分，感谢创作前言中的路线图的前辈。

TypeScript部分我这里就不放了，后续会有文章更详细地写ts学习的笔记和资源。

eslint官网
eslint官方start
为vue添加eslint过程，采用airbnb规范
eslint与prettier实现代码规范自动格式化

Airbnb js
Airbnb react
Airbnb css
clean-code-javascript

---

最后

再次感谢在网络上创作高质量路线图、教程和其他资源的创作者们。