大型项目JavaScript编写规范_js文件多少行-CSDN博客

大型项目JavaScript编写规范

实习来到公司刚开始接触项目总是碰到 Eslink报错，查了半天也找不到原因，最后在Readme.md文件中发现原来是有js编写上的书写规范的问题。。。
看下面，我们项目中引用的是Eslint工具，简单来说就是一个代码风格检测工具，书写不符合要求就会报错。

在这里插入图片描述

这里是项目中的Eslintrc.js文件

代码规范通常包括以下几个方面:

变量和函数的命名规则
空格，缩进，注释的使用规则。
其他常用规范……
规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定，可以跟你的团队成员来协商设置。

常见的JavaScript代码规范校验工具有：

ESLint
JSLint
JSHint
（1）ESLint
官网： https://cn.eslint.org/

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代码中的模式
ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
以上来自官网。简单来说，ESLint就是一个代码风格检测工具。

如何使用：

# 安装
npm install -g eslint

# 如果你第一次使用 ESLint，你必须使用 –init 命令新建一个配置文件
eslint --init

# 使用 ESLint 检测任何 JavaScript 文件：
eslint test.js test2.js

# ESLint 中一些规则运行命令它可以帮你自动修复
eslint test.js --fix

规则定义：

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON -使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig 属性，在那里定义你的配置。
ESLint规范配置参考：https://cn.eslint.org/docs/rules/

（2）JSLint
官网： https://www.jslint.com/

JSLint是一款不错的前端javascript代码校验工具，可以检查代码规范化，压缩JS，CSS等，但是他的语法规范检查有时会比较“苛刻”。

（3）JSHint
官网： https://jshint.com/

JSHint比起JSLint而言，会更加轻量级一些。它能够找出代码中的语法错误，并且建议更好的一种编码风格。当然，它也不是强制性的非要你根据它规定的编码风格来做。因为它提供了一系列的配置，你可以随时关掉某些你觉得不必要的错误提示。

如何使用：

# 安装
npm install jshint -g

# 在要扫描的目录下运行命令
jshint . >> jshint_result.txt

这样扫描结果都写到jshint_result.txt的文件。
相比JSLint那么严格的规则，其实很多我都觉得是个人偏好问题，JSHint更加合理。

JSHint是一个全局的函数:

var result = JSHINT(source, options);
1
JSHint()方法解释：

第一个参数source : 必选项。表示需要检查的代码，js或者json，可以传一个字符串或者一个数组。如果传字符串，需要用 ’\r’ 或者 ’\n’来分隔一行一行的代码；如果传数组，则每一个数组元素表示一行的代码。
第二个参数option : 可选项。表示代码检查的配置项。大部分的都是bool类型的，也有一部分，例如predef，可以是一个array，含有全局变量或者全局方法；或者是一个object，key是全局变量或者方法，value是一个bool值，表示是否被定义过。
返回值：如果代码没有问题，JSHint会返回一个true；否则返回false。
关于第2个参数的配置项（部分）：

prop description

asi 是否使用自动插入分号
bitwise 如果是true，则禁止使用位运算符
boss 如果是true，则允许在if/for/while的条件中使用=做赋值操作
curly 如果是true，则要求在if/while的模块时使用TAB结构
debug 如果是true，则允许使用debugger的语句
eqeqeq 如果是true，则要求在所有的比较时使用=和!
eqnull 如果是true，则允许使用== null
evil 如果是true，则允许使用eval方法
forin 如果是true，则不允许for in在没有hasOwnProperty时使用
immed 如果是true，则要求“立即调用”(immediate invocations)必须使用括号包起来
laxbreak 如果是true，则不检查换行，那么自动插入分号的选项必须开启。
maxerr 默认是50。表示多少错误时，jshint停止分析代码
newcap 如果是true，则构造函数必须大写
noarg 如果是true，则不允许使用arguments.caller和arguments.callee
noempty 如果是true，则不允许使用空函数
nonew 如果是true，则不允许不做赋值的构造函数，例如new UIWindow();
nomen 如果是true，则不允许在名称首部和尾部加下划线
onevar 如果是true，则在一个函数中只能出现一次var
passfail 如果是true，则在遇到第一个错误的时候就终止
plusplus 如果是true，则不允许使用++或者- -的操作
regexp 如果是true，则正则中不允许使用.或者[^…]
undef 如果是ture，则所有的局部变量必须先声明之后才能使用
sub 如果是true，则允许使用各种写法获取属性(一般使用.来获取一个对象的属性值)
strict 如果是true，则需要使用strict的用法，详见http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
white 如果是true，则需要严格使用空格用法。
（4）三种规范工具的对比
ESLint、JSLint、JSHint这三个工具各有特色，我只是做一下对比，选择的话，看个人需求就好了。

JSLint

优点

配置是老道已经定好的，开箱即用。
不足

有限的配置选项，很多规则不能禁用
规范严格，凡是不符合老道所认为的好的风格的，都会有警告(这一项就看你是否完全认同老道了)
扩展性差
无法根据错误定位到对应的规则
JSHint

优点

有了很多参数可以配置
支持配置文件，方便使用
支持了一些常用类库
支持了基本的ES6
不足

不支持自定义规则
无法根据错误定位到对应的规则
ESLint

优点

默认规则里面包含了JSLint和JSHint的规则，易于迁移(这肯定是故意的XD)
可配置为警告和错误两个等级，或者直接禁用掉
支持插件扩展
可以自定义规则
可以根据错误定位到对应的规则
支持ES6
唯一一个支持JSX的工具
不足

需要进行一些自定义配置(因为太灵活了嘛，不过文档是很详细的)
慢 (它比其他两个都要慢)
————————————————
版权声明：本文为CSDN博主「柯晓楠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/p445098355/article/details/112946711