0
点赞
收藏
分享

微信扫一扫

【前端】代码质量

卿卿如梦 2022-01-23 阅读 95

前言


什么是代码质量

在前面学习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


最后

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

举报

相关推荐

0 条评论