【学习笔记】工程师必备代码规范

2018-07-13 本文已影响4人立正小歪牙

美观的代码在面试、团队协同工作、体现个人专业程度、降低错误率等方面都有重要意义。

一、有哪些代码规范指南？

一些大厂都出了各自的规范：
1、Google Style Guide（JavaScript 直达戳这）（推荐）
2、Airbnb JavaScript Style Guide（强烈推荐）
3、jQuery JavaScript Style Guide
4、WebKit Code Style Guidelines
5、中文版代码规范（腾讯@AlloyTeam）

二、如何提高自己代码的规范性？

1、可以选择以上其中一个作为自己的代码规范准则，然后通读；
2、好记性不如烂笔头，一定要进行实践；
3、关注开源项目中别人的代码，多逛 Github；
4、学会使用工具帮助自己整理代码。

三、工具与应用

1、EditorConfig

官网描述：

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.

翻译过来就是：EditorConfig 帮助开发者们在不同开发者之间和不同的开发环境下保持定义和代码风格的一致性，抹平不同编辑器的区别。

EditorConfig 给出如下 JavaScript Code 配置：（具体用法参看：https://github.com/editorconfig/editorconfig-core-js#readme），定义了缩进方式、缩进字符、换行符、编码方式、多行注释等规范。

; http://editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
block_comment_start = /**
block_comment = *
block_comment_end = */

[*.md]
indent_size = 4

如果在你的项目中含有这份配置文件，那么其他所有人在编辑你的项目下共同工作时，提交的代码都是统一的。

2、ESLint

方法一：Node命令行工具

为了在 Node.js 上运行 ESLint，你必须先安装 npm。然后执行如下命令安装 ESLint CLI：

npm i -g eslint

检查代码时，执行如下命令：

eslint file1.js file2.js

举个栗子：
在编辑器中敲入 var x = 1; 这行代码，保存成 test.js 。然后进入 test.js 文件所在目录下，使用命令行输入 eslint test.js，得到如下结果：

敲入 eslint 命令后返回的结果
上图中提示了 var x = 1; 这行代码有 2 个错误：

不推荐使用 var，请使用 let 或 const 代替。
x 是一个从未使用的变量，建议删除。

方法二：配置文件

在你的项目中放入并修改 .eslintrc.js 文件进行配置（下载和用法戳这：https://github.com/eslint/eslint）。

方法三：编辑器插件

在编辑器中安装 ESLint 插件，就能在编辑器中看到提示，如下：

VS Vode 中的提示

四、另外一些好用的编辑器插件

1、EditorConfig for VS Code
2、Git Blame
3、Project Manager
4、.ejs
5、Document this