javascript语法检查规范工具使用及与Sublime集成

一、安装nodejs的jshint

安装Node.js环境

安装nodejs的jshint[4] csshint

二、sublime中的jshint安装配置

方式一、 使用Sublimelinter,支持css等多种语言验证

方式二、使用Sublime JSHint Gutter,仅支持js验证

三、jshint的检查规则的三种配置方式[1]

1. 自定义.jshintrc文件

2. 配置放到项目的 package.json 文件里面, jshintConfig 下面

3. 内联配置(Inline configuration)

四、在Sublimelinter或者JSHint Gutter中配置.jshintrc

五、.jshintrc配置中文详细定义[2],官方配置列表[3]

1. 强制选项(Enforcing options) 如果设为true会产生更多错误提示

2. 宽松选项(Relaxing options) 如果设为true会产生较少错误提示

3. 环境(Environments)

JSHint,发现错误和潜在问题的社区驱动的工具
JSLint 错误解析1

一、安装nodejs的jshint 安装Node.js环境

jshint其功能实现需要node.js支持,所以去node.js官网单击找到当前平台的版本进行下载安装。

javascript语法检查规范工具使用及与Sublime集成

安装nodejs的jshint2 csshint $ npm install -g jshint$ npm install -g csshint#测试$ jshint -v$ csshint -v#单独使用校验测试$ jshint myfile.jsmyfile.js: line 10, col 39, Octal literals are not allowed in strict mode.1 error 二、sublime中的jshint安装配置 方式一、 使用Sublimelinter,支持css等多种语言验证

通过sublime的package control安装Sublimelinter
在sublime中按下Cmd+Shift+P打开命令查找窗口,输入pci找到packge control install回车

javascript语法检查规范工具使用及与Sublime集成

稍等等待弹出package查找窗口,输入Sublimelinter,按下回车安装。

javascript语法检查规范工具使用及与Sublime集成

然后使用同样方法安装SublimeLinter-jshint、SublimeLinter-csshint。

此时,一般情况下,你打开编辑器,查看js文件会发现,已经有了语法校验。

javascript语法检查规范工具使用及与Sublime集成

查看SublimeLinter-jshint设置,右键 -> Sublimelinter -> Open User Settings

javascript语法检查规范工具使用及与Sublime集成

禁用Sublimelinter-jshint ,右键 -> Sublimelinter -> Toggle Linter 回车即可切换 启用状态

javascript语法检查规范工具使用及与Sublime集成

方式二、使用Sublime JSHint Gutter,仅支持js验证

在sublime中按下Cmd+Shift+P打开命令查找窗口,输入pci找到packge control install回车,稍等等待弹出package查找窗口,输入js gutter,按下回车安装。

javascript语法检查规范工具使用及与Sublime集成

JS Gutter配置

javascript语法检查规范工具使用及与Sublime集成

js gutter默认未开启检查,设置编辑,加载或保存时自动检查
右键 -> JSHint -> Set Plugin Options 将对应设置的false改为true即可开启检查

{ "lint_on_edit": true, "lint_on_load": true, "lint_on_save": true}

javascript语法检查规范工具使用及与Sublime集成

三、jshint的检查规则的三种配置方式3 1. 自定义.jshintrc文件

一般.jshintrc文件放置在模块根目录,如果没有找到,会一直向上及目录查找,直到找到文件系统的根目录/,如果没找到采用默认规则。

2. 配置放到项目的 package.json 文件里面, jshintConfig 下面

javascript语法检查规范工具使用及与Sublime集成

3. 内联配置(Inline configuration)

在js文件中的注释中配置例如:

/* jshint undef: true, unused: true *//* globals MY_GLOBAL */

javascript语法检查规范工具使用及与Sublime集成

四、在Sublimelinter或者JSHint Gutter中配置.jshintrc

JSHint Gutter 右键 -> JSHint -> set Linting Preference 默认.jshintrc文件

javascript语法检查规范工具使用及与Sublime集成

Sublimelinter 右键 -> Sublimelinter -> Open User Settings 指定.jshintrc文件路径

javascript语法检查规范工具使用及与Sublime集成

五、.jshintrc配置中文详细定义4,官方配置列表5 1. 强制选项(Enforcing options) 如果设为true会产生更多错误提示 { "bitwise": true , //禁用位运算符,位运算符&在 JavaScript 中使用较少,经常是把 && 错输成 & "curly": true , //循环或者条件语句必须使用花括号包围 "eqeqeq": true , //强制使用三等号 "es3": true , //兼容低级浏览器 IE 6/7/8/9 "freeze": true , //禁止重写原生对象的原型,比如 Array,Date /* Array.prototype.count = function (value) { return 4; }; // -> Warning: Extending prototype of native object: 'Array'. 为原生对象添加属性确实看上去很方便,但也带来了潜在的问题 一是如果项目中有多处为同一个对象添加了同样的属性(或函数),则很可能产生冲突; 二是如果某段逻辑依赖于对象属性遍历,则可能产生错误。 */ "immed": true, /** 匿名函数调用必须 (function() { // body }()); 而不是 (function() { // body })(); 这是为了表明,表达式的值是函数的结果,而不是函数本身 */ "indent": 4 , //代码缩进 "latedef": "nofunc" , //禁止定义之前使用变量,忽略 function 函数声明 "newcap": true , //构造器函数首字母大写 "noarg":true , //禁止使用 arguments.caller 和 arguments.callee,未来会被弃用, ECMAScript 5 禁止使用 arguments.callee "quotmark": false , //为 true 时,禁止单引号和双引号混用 "undef": true , //变量未定义 "unused": true , //变量未使用 "strict":true , //严格模式 "maxparams": 4 , //最多参数个数 "maxdepth": 4 , //最大嵌套深度 "maxcomplexity":true , //复杂度检测 "maxlen": 600 , //最大行数 "predef": [ "before", "beforEach", "after", "afterEach", "-toberemoved" ] // 用来自定义一些环境变量,变量前面有有-号表示从环境中移除次变量 //预定义变量为ReadOnly 不能在js文件的注释中使用} 2. 宽松选项(Relaxing options) 如果设为true会产生较少错误提示 { "asi": true , //控制“缺少分号”的警告 "boss": true , //控制“缺少分号”的警告 "debug": true ,//"debug": true "evil": true , //控制 eval 使用警告 "lastsemic": true ,//检查一行代码最后声明后面的分号是否遗漏 "laxcomma": true , //检查不安全的折行,忽略逗号在最前面的编程风格 "loopfunc": true , //检查循环内嵌套 function "multistr": true ,//检查多行字符串 "notypeof": true , //检查无效的 typeof 操作符值 "sub": true , //person['name'] vs. person.name "supernew": true , //new function () { ... } 和 new Object; "validthis": true //在非构造器函数中使用 this} 3. 环境(Environments) { "browser": true ,//预定义全局变量 document,navigator,FileReader 等 "devel": true , //定义用于调试的全局变量:console,alert "jquery": true, //定义全局变量 $ "node": true, //定义全局变量 module export等}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/15219.html