用standard来管理JavaScript 代码规范

更新日期: 2017-12-22阅读: 3.4k标签: 规范

怎么才能使前端团队写的JavaScript代码都有统一的风格、符合规范呢?要解决这个问题大概要做下面几件事:

制定规范标准
写代码时执行代码规范
检查代码是否符合规范
修改不符合规范的代码

那么,到底具体应该如何实施以上几个步骤呢?我的回答是你什么都不用做了,有人已经帮你把以上四步全部做好了!是的,这个好用的工具就是本文要介绍的JavaScript规范库,standarad


关于standard

standard是什么?

一个开源的JS代码规范库,它做了以下事情

制定了所谓standard(标准)的JS代码规范
配合编辑器插件可以实时检查代码规范以及语法错误
通过执行命令检查代码规范以及语法错误
自动修复(可以直接修复的)不合规范的代码,使其符合规范


关于standard中的代码规范

可以说JS这门语言的魅力之一就是自由、开放的写法,相比python、Go等语言,JS写起来自由的多。但是这种自由本身在团队合作的项目里也带来了很多的不便,于是我们需要指定代码规范,但是应该以什么标准来制定规范呢?缩进到底是4格还是2格、结尾要不要用分号、花括号和if语句在同一行还是另起一行?诸如此类的问题,从功能和逻辑上来讲并没有标准答案,因为无论怎么选,代码都能运行,功能都能实现。所以在JS程序员的世界里经常会有诸如缩进、分号、换行等写法的争论,standard库对此给出的结论是,这种争论对于getting stuff done并无意义,我们要停止这方面的争论,把精力放在解决问题上。

standard官方给出的说法如下:

There are lots of debates online about tabs vs. spaces, etc. that will never be resolved. These debates just distract from getting stuff done. At the end of the day you have to ‘just pick something’, and that’s the whole philosophy of standard – its a bunch of sensible ‘just pick something’ opinions. Hopefully, users see the value in that over defending their own opinions.


使用standard

好了,开始使用standard吧。

新建一个项目

mkdir my-project
cd my-project


安装standard

npm init
npm install standard --save-dev


安装snazzy,让代码检查的结果输出更加美观

npm install snazzy --save-dev


配置package.json, 添加一条名为lint的npm script

"scripts": {
 "lint": "standard --verbose | snazzy"
}


在项目下新建一个app.js文件,随意输入一些代码并保存

// app.js             // 错误说明
const a = 1;          // 结尾不应该有分号,而且a定义了没有使用
const f = () => {}    // f定义了但是没有使用
log()                 // log未定义


运行代码检查

npm run lint


看到检查结果

1:7   error  'a' is assigned a value but never used  no-unused-vars
1:12  error  Extra semicolon                         semi
2:7   error  'f' is assigned a value but never used  no-unused-vars
4:1   error  'log' is not defined                    no-undef


standard的更多功能

  1. 使用编辑器插件,实时检查代码规范
  2. 忽略某些不需要执行代码规范的文件
  3. 局部禁用代码检查
  4. 指定全局变量,以避免变量未定义错误
  5. git pre-commit钩子,在每次commit之前检查代码规范
  6. 为更多最新的JS语法添加检查规范
  7. 自动修复


总结

standard应该是当前最好用的JS代码规范库,它无须更多配置,基本做到了安装即用,而且还有很多扩展功能,应该能够满足大多数项目的代码检查需求。本文转载博客

链接: https://fly63.com/article/detial/271

web开发,前后分离接口规范

目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。

js中箭头函数的编码规范,如何更好的使用箭头函数

当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

Web 前端开发代码规范(基础)

对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

Node.js的模块加载机制(CommonJS规范)

为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

编码规范_html代码规范化编写

嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;

CommonJS 规范中的 module、module.exports 区别

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口

W3C 代码标准规范

W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。

css3代码书写规范

不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

常用的JavaScript编程风格

工作中好的编程风格会更友好,不好的编程风格会让队友难受,变量的声明:使用let和const代替var(var存在变量提升等副作用),声明常量使用const

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!