您的位置:首页 > Web前端 > JavaScript

jshint相关的配置

2015-12-16 13:50 501 查看
jshint相关的配置


SublimeText插件推荐:JS错误检查工具 - JSHint与JSHint Gutter

NOV 28TH, 2014 9:46 AM

引言

我喜欢使用SublimeText(以下将简称为Sublime)来写JavaScript,但有时候代码量一多,难免会犯些小错误,比如变量名写错,多了一个括号等等;而Sublime是编辑器,本身没有代码检查功能,只有当JS代码在浏览器里运行报错了,才发现问题,而这样就会浪费不少的时间。所以,我就想有没有这样的插件,能使Sublime具备检测基本的JS语法错误。经过一番搜索后,终于找到,而这也是今天要介绍的:JS错误检查工具 - JSHint与JSHint Gutter。

注意:如果你是Windows用户,本文文字或图片中出现的某些指令如:which,是无法在windows命令行下运行的,你可以安装Git for windows,其附带的Git Bash可以运行大多数的linux命令。

简介

JSHint不但能检查JS代码的语法错误,还能够监控代码质量(风格),很多公司跟开源项目都在使用它,比如:Facebook、jQuery、Bootstrap等等。在Github上,使用JSHint的项目多如牛毛,如果你在某个项目里面,发现有.jshintrc文件,那它就使用了JSHint。JSHint是一个独立的工具,它不直接提供对Sublime的支持,它本身只提供基于NodeJS的命令行工具。而JSHint Gutter这个插件,它能够调用JSHint的命令行工具,执行代码检查并将结果显示到Sublime界面上。

注意:除Sublime之外,JSHint也支持其他很多编辑器与IDE,相关插件请查看 http://www.jshint.com/install/

安装JSHint

请先安装好NodeJS,然后在终端/命令行中输入 npm install -g jshint

安装过程类似下图



安装与配置JSHint Gutter

JSHint Gutter安装更加非常简单,使用Sublime命令面板的PackageControl:Install Package,搜索安装即可。

安装完成后,在Sublime的Package Settings里找到JSHint Gutter,选择Set Plugin Options:



设置NodeJS执行文件所在的路径(node_path),并将lint_on_save(文件保存时检查)选项打开



注意:不同的操作系统,不同的安装工具(我使用nvm安装node),node执行文件所在的路径都不一样,你可以使用 which node 来查看

设置.jshintrc

在项目根目录新建一个文件:.jshintrc(windows用户应该在文件管理器里面创建.jshintrc.文件,然后它会自动改名为.jshintrc),在此文件里填写你的检查规则,以下是一个典型的.jshintrc

{

“curly”: true,

“eqeqeq”: true,

“immed”: true,

“noarg”: true,

“noempty”: true,

“quotmark”: “single”,

“undef”: true,

“unused”: true,

“node”: true

}

配置讲解(配置选项 true表示打开,false表示关闭):

第二行:curly 表示所有的代码块必须使用大括号

第三行:eqeqeq 表示判断相等时,必须使用 ===

第四行:immed 表示立即执行函数必须用括号包起来
(function () { } ());


第五行:noarg 表示禁止使用
arguments.caller
arguments.callee


第六行:noempty 表示禁止出现空的代码块
{ }


第七行:quotmark 是引号的使用规则,有以下四个选项

false : 不检查

true : 检查一致性(要么都是单引号,要么都是双引号)

single : 必须都是单引号

double : 必须都是双引号

第八行:undef 表示所有的局部变量都必须先声明再使用

第九行:unused 表示禁止变量已经声明,但却不使用

第十行:node 表明你的项目是NodeJS项目,require等node特有的全局函数将通过检查

以上只是少数常见的配置项目,请到官网查看完整项目列表:JSHint Options

使用效果



我故意在代码里多添加了一个括号,然后保存文件,错误提示马上出现了,点击红色的错误标记,在底部信息栏会出现提示信息。

转载地址:http://jarontai.github.io/blog/2014/11/28/sublime-jshint/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: