JavaScript代码质量及eslint

京东成都研究院 · 公众号 · 成都 · 2018-09-26 18:00

正文

引言

随着前端模块化技术的引入，前端开发越来越趋向于后端的开发模式，一个页面的 JavaScript 代码量在飞速增长，特别是 WebApp 的开发。为了减少理解自己之前编写的代码的时间，或节省同事读懂自己代码的时间 (减少被吐嘈的次数），如何编写高质量的代码是码农们都需要关注的。

一、高质量代码标准

二、JS代码质量检查工具

jslint:

jshint:

1、jslint 与 jshint 的最大缺点

无法自定义

2、后起之秀-eslint

三、eslint的使用

1、本地安装

如果你想包括ESLint作为你的项目构建系统的一部分,我们建议在本地安装。你可以使用npm:

npm install eslint -D

初始化一个配置文件:

./node_modules/.bin/eslint --init

运行eslint检测文件

./node_modules/.bin/eslint yourfile.js

2、全局安装

如果你想让ESLint可用到所有的项目,我们建议安装ESLint全局安装。你可以使用npm:

npm install eslint -g

初始化一个配置文件:

eslint --init

运行eslint检测文件

eslint yourfile.js

3、在项目根目录编写配置文件： .eslintrc

4、推荐的配置和插件

四、eslint在sublime text3中使用

1、先安装两个nodejs插件 {:.text-info}

npm install eslint -g

npm install babel-eslint -g

2、在sublime里安装eslint插件

安装 SublimeLinter
调出package control搜索SublimeLinter进行安装
安装 SublimeLinter-contrib-eslint
调出package control搜索eslint安装即可，全名：SublimeLinter-contrib-eslint。注意：该插件只支持Sublime text 3
SublimeLinter-eslint 替换 SublimeLinter-contrib-eslint

3、sublime中的效果