简介

在做开发的时候，不可避免的需要进行团队协作，那么如何保证团队成员使用统一的代码风格呢? 因为统一团队的编码规范，有助于代码的维护。

什么是代码规范呢？

需要注意的是，这里说的代码规范，并不是某个严格的组织定义的规范，更多的是团队领导制定出来的规范。当然，在互联网上有很多的人慢慢约定俗成的也定义出来了一些好的代码规范。例如：

空格和Tab
函数后是否添加空格
参数与括号间是否有空格
对象字面量中冒号周围是否有空格
条件语句有空格
单引号、双引号 ....

为了更好的规范，互联网也提出了很多约定俗成的规范，例如：standjs.com 提出了很多规范。

StandardJS可以格式化前端代码规范 standardjs.com/readme-zhcn…

爱彼迎团队提出的前端代码规范 github.com/airbnb/java…

vscode使用 StandardJS 检查规范

以下说明其在VSCode中的安装以及使用：

全局或局部安装standard：

> npm install standard -g

在VSCODE的插件库中直接搜索standard，将相关的插件安装上
在package.json的scripts对象中加入这两条命令，以及命令覆盖的文件。

"standard": "standard \"jsbundles/**/*.js\" \"lib/**/*.js\" \"components/**/*.js\"",
"standfix": "standard \"jsbundles/**/*.js\" \"lib/**/*.js\" \"components/**/*.js\" --fix"

在package文件中加入standard和standfix命令，这样可以在命令行中

// 运行如下命令，查看格式化错误的代码
> npm run standard

// 运行如下命令，自动修复格式化问题
> npm run standfix

如何设置保存时自动格式化代码？在vscode中，点击文件>首选项>设置，在搜索框中输入“eslint.autoFixOnSave”，加入以下设置

"standard.autoFixOnSave": true

则保存时会自动格式化代码

注意点： standardJS解决箭头函数不识别问题：全局安装babel-eslint并在package.json中加入

"standard": { "parser": "babel-eslint" }

代码检查

注意，上面的standarjs.com提出的是代码书写的规范，如果团队之间有些人不遵守规范，该如何处理呢？

答：JavaScript提供了专门的代码检查工具。

1. jslint的介绍

JSLint 通过检查和分析 JavaScript 代码，将任何违反规则的代码警告给开发者，且无法通过配置关闭一些开发者认为不是问题的警告，而导致检查和开发无法继续下去。

2. jshint介绍

JSHint 发布不久并在近期才开始被逐步大量项目采用的与 JSLint 具有相同用途的 JavaScript 静态代码分析工具，JSHint 是在 JSLint 代码基础上二次开发而来的。

JSHint 设计得非常可配置，提供了丰富的指令和选项，可根据开发者以及研发团队的自身需要调整JSHint符合自己的编码规则、风格和品位。

3. JSLint 还是 JSHint ？

联系

一样的用途
均拥有大量的用户
相同的 JavaScript 代码检查和分析内核
均已成功用于多个知名的 JavaScript 项目

区别

JSLint 对代码的合规要求极为严格
JSHint 对代码的合规要求可以很宽松
JSLint 可配置的选项很少
JSHint 可配置的选项很多

4. 选择 JSHint

如果在工程中首次引入静态代码分析工具，那么本文首推使用 JSHint，该程序的启动成本以及对开发者水平的要求均较低，特别在团队中，不同的技术水平的团队成员均能够较好的适应。

极客类程序员、采用新技术新风格的开发者、具备自有编码规范的研发团队只能够采用 JSHint，因为它的高度可配置性，可以符合不同的编码风格和规范。

5. 选择 JSLint

如果开发者自己或团队中几乎所有的成员都具有较高研发水平，建议采用 JSLint，能够写出更加严谨的高品质代码，但会伴随着时间效率下降的代价，若为参与者众多的大型项目，这样的代价也是值得的。

综合考虑，如果要求不是特别严格的话，我们还是选中jshint。

javascript-代码书写规范

简介