用standard来管理JavaScript 代码规范

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

怎么才能使前端团队写的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

相关推荐

什么是驼峰命名?骆驼式命名法规范

骆驼式命名法(Camel-Case)又称驼峰式命名法,是电脑程式编写时的一套命名规则(惯例)。正如它的名称CamelCase所表示的那样,是指混合使用大小写字母来构成变量和函数的名字

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

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

CSS规范

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

前端变量命名规范

程序开发过程中变量命名不仅是一个头疼问题,也是一个对开发者综合素质的检验,它会直接影响到代码的最终交付质量、代码Review人员心智承受力。如何写出具有创造性、优雅性、易读性的高质量代码,需要开发者在实际工作中不断总结、提炼

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

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

Web前端开发规范手册

文件命名规则:文件名称统一用小写的英文字母、数字和下划线的组合。引文件统一使用index.htm index.html index.asp文件名(小写),图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质

W3C标准及规范

W3C的意思是万维网联盟(World Wide Web Consortium),创建于1994年10月,是一个会员组织,它的工作是对web进行标准化--->W3C 致力于实现所有的用户都能够对 web 加以利用

web前端js中ES6的规范写法

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

JavaScript 命名约定最佳实践

在开发过程中,遵循标准的命名约定可以提高代码的可读性。下面就来看看 JavaScript 中命名约定的最佳实践。JavaScript 变量名称是区分大小写的,大写和小写字母是不同的。

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

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

点击更多...

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