网站首页 > 技术教程 正文
导引
在用Visual Studio Code进行开发时,把ts编译成js后,常有不符合js规范检查的问题出现(JavaScript验证),甚至常会出现一些异常提示,类似如下所示:
let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104)
以及console、alert甚至document等等未定义诸如此类提升。对于此类问题,通常都是开发环境的配置问题。对此可以用如下两种方式来解决:
第一种方式:头部配置
也可看作为内联配置。针对文件量少的,可以直接在相应的js文件头部添加类似如下的代码解决:
/* jslint node: true */
/* jshint browser: true */
/* jshint -W117 */
要不就是在项目的根目录下添加统一配置文件:
第二种方式:json配置文件(.jshintrc)
示例配置如下:
{
"esversion": 6, //指定的ECMAScript版本代码
"sub": true, //允许 [] . 形式来访问对象
"laxbreak": true, //不检查换行
"regexp": true, //不允许使用.和[^...]的正则
"asi": true, //无视没有加分号的行尾
"bitwise": true, //会禁用位运算符
"curly": true, //要求使用if和while等结构语句时加上{}来明确代码块
"immed": true, //要求匿名函数的调用为(function(){//}());
"eqeqeq": true, //要求代码中使用===或!==,而不是使用==和!=
"eqnull": true, //允许使用"== null"作比较
"newcap": true, //要求每一个构造函数名都要大写字母开头
"noarg": true, //禁止arguments.caller和arguments.callee的使用
"undef": true, //要求所有的非全局变量,在使用前都被声明
"strict": false //要求使用use strict;语法
}
最后,配置项详解
详细的配置项说明可以参考原文描述:https://jshint.com/docs/options/。
这里给出中文描述以作实际应用的辅助参考。有误之处还望见谅^_^
JSHint配置文件中的规则有3类:
Enforcing: 这些规则被置为true,JSHint会对代码进行更严格的检查。
Relaxing: 这些规则被置为true,JSHint会容忍规则中定义的状况出现。
Environment: 这些规则被置为true,JSHint会认为代码默认有一些全局变量
下面分别介绍如下:
1.校验选项:Enforcing
bitwise
禁用位运算符,位运算符在 JavaScript 中使用较少,常常是把 && 错输成 &。
bitwise: true
camelcase
警告:此选项已被弃用,将在JSHint的下一个主要版本被删除.
此选项能够强制全部变量名称为使用驼峰风格或UPPER_CASE用下划线。
camelcase:true/false
curly
循环或者条件语句必须使用花括号包围.
这个选项须要你老是把花括号在块循环和条件。JavaScript块时能够省略括号包含只有一个语句,例如:
while (day)
shuffle();
然而,在某些状况下,它会致使错误(你可能会认为 sleep()是一个循环的一部分,而事实上它不是)
while (day)
shuffle();
sleep();
enforceall
警告:此选项已被弃用,将在JSHint的下一个主要版本被删除.
它启用全部强制执行选项和禁用该版本中定义的全部的Relaxing options;
eqeqeq
设置为true,禁止使用这个选项 ==和 !=,强制使用 ===和 !==。
eqeqeq: true
es3
警告:此选项将在JSHint的下一个主要版本被删除,使用esversion: 3代替.
使用ECMAScript 3规范。使用这个选项主要为了兼容低级浏览器 IE 6/7/8/9-and其余遗留JavaScript环境。
es5
警告:此选项将被删除在JSHint的下一个主要版本,使用 esversion: 5代替。
这个选项容许语法中定义ECMAScript 5.1规范,这包括容许保留关键字做为对象属性。
esversion
这个选项用于指定的ECMAScript版本代码必须遵循。它能够假设如下值之一:
3--若是你须要可执行程序在老这类浏览器Internet Explorer 6/7/8/9-and其余遗留JavaScript环境
5--先使语法中定义ECMAScript 5.1规范。这包括容许保留关键字做为对象属性。
6--告诉JSHint代码使用ECMAScript 6具体的语法。请注意,并非全部的浏览器都实现它们。
forin
这个选项要求全部 for in循环过滤对象的item。他在声明中容许for遍历一个对象全部属性的名称包括经过原型链继承来的属性。
for (key in obj) {
if (obj.hasOwnProperty(key)) {
// We are sure that obj[key] belongs to the object and was not inherited.
}
}
freeze
这个选项禁止重写原生对象的原型列如 Array, Date等等。
funcscope
禁止从外部访问内部声明的变量
function test() {
if (true) {
var x = 0;
}
x += 1; // Default: 'x' used out of scope.
// No warning when funcscope:true
}
futurehostile
容许警告js将来版本中定义的标识符。
globals
这个选项能够用来指定一个没有正式定义的全局变量的白名单。
配置 globals在单个文件,看看内联配置.
immed
警告:此选项已被弃用,将在JSHint的下一个主要版本被删除。
须要直接调用的函数必须被括号包围,如:(function(){}());
indent
警告:此选项将在JSHint的下一个主要版本被删除。
设置代码缩进长度
iterator
禁止iterator属性有关的警告。
此属性不支持全部浏览器因此当心使用它。
latedef
禁止定义以前使用变量。
这个选项设置为“nofunc”将容许函数声明被忽略。
maxcomplexity
设置代码文件独立直线路径最大复杂度检测。
maxdepth
设置代码最大嵌套深度。
// jshint maxdepth:2
function main(meaning) {
var day = true;
if (meaning === 42) {
while (day) {
shuffle();
if (tired) {
// JSHint: Blocks are nested too deeply (3).
sleep();
}
}
}
}
maxerr
设置JSHint最大警告数。默认50
maxlen
警告:此选项将在JSHint的下一个主要版本被删除
设置最大行数
maxparams
这个选项容许您设置每一个函数的形参最大数量
// jshint maxparams:3
function login(request, onSuccess) {
// ...
}
// JSHint: Too many parameters per function (4).
function logout(request, isManual, whereAmI, onSuccess) {
// ...
}
maxstatements
这个选项容许您设置语句容许的最大声明数:
// shint maxstatements:4
function main() {
var i = 0;
var j = 0;
// Function declarations count as one statement. Their bodies
// don't get taken into account for the outer function.
function inner() {
var i2 = 1;
var j2 = 1;
return i2 + j2;
}
j = i + j;
return j; // JSHint: Too many statements per function. (5)
}
函数也算声明。
newcap
警告此选项已被弃用,将被删除在JSHint的下一个主要版本
要求全部构造器使用new F()形式。
noarg
禁止使用这个选项 arguments.caller和 arguments.callee。这两个 .caller
和.callee将会被弃用。事实上,ECMAScript 5 严格模式禁止使用arguments.callee
nocomma
这个选项禁止使用逗号操做符。
noempty
警告此选项已被弃用,将被删除在JSHint的下一个主要版本。
空代码块警告。
nonbsp
不换行的空格警告
nonew
这个选项禁止使用new构造器函数。有些人喜欢调用构造函数,可是不赋值给任何对象:
new MyConstructor();
notypeof
检查无效 typeof操做符的值
// 'fuction' instead of 'function'
if (typeof a == "fuction") { // Invalid typeof value 'fuction'
// ...
}
predef
扩展的隐式全局变量
quotmark
警告此选项已被弃用,将被JSHint的下一个主要版本删除。
这个选项执行代码中使用引号的一致性。它接受三个值:
true-- 代码字符串禁止单引号双引号混用,
"single"--只容许单引号
"double"--只容许双引号。
shadow
检查变量重复定义
他接受4个值:
"inner" 只检查是否在相同的做用域重复定义
"outer" 检查外部做用域
false 与inne同样
true 容许变量覆盖
singleGroups
禁止使用分组操做符
// jshint singleGroups: true
delete(obj.attr); // Warning: Unnecessary grouping operator.
strict
ECMAScript 5严格模式
"global" - 全局层面的严格模式"use strict";
"implied" - 文件里面使用"use strict";
false - 禁止使用严格模式
true - 函数上面必须使用一个"use strict";
undef
变量未定义
// jshint undef:true
function test() {
var myVar = 'Hello, World';
// Oops, typoed here. JSHint with undef will complain
console.log(myvar);
}
若是你的另外一个文件中定义的变量,你可使用 global指令告诉JSHint。
unused
变量定义未使用
// jshint unused:true
function test(a, b) {
var c, d = 2;
return a + d;
}
test(1, 2);
// Line 3: 'b' was defined but never used.
// Line 4: 'c' was defined but never used
varstmt
设置为true时,禁止使用var声明变量
// jshint varstmt: true
var a; // Warning: var declarations are forbidden. Use let or const instead.
2.宽松选项:Relaxing
设置为true时,这些选项会使代码JSHint产生更少的警告。
asi
禁止缺乏分号警告
boss
禁止比较表达式的值没有达到预期警告。
一般状况下,代码 if (a = 10) {}是一个错误,但他有可能这样用
for (var i = 0, person; person = people[i]; i++) {}
你能够禁止这个错误,好比
for (var i = 0, person; (person = people[i]); i++) {}
debug
忽略 debugger
elision
告诉JSHint代码使用ES3数组省略元素,或空元素(例如, [1, , , 4, , , 7]
).
eqnull
禁止 == null比较。一般这样的比较有用,当你想检查一个变量是否null
或 undefined
eqnull
警告此选项将在JSHint的下一个主要版本被 esversion: 6代替
使用ECMAScript 6具体语法,有些浏览器不支持
evil
禁止使用eval
expr
禁止使用表达式,通常的使用函数调用。
globalstrict
下个版本中会使用 strict: "global"代替。
全局严格模式会和第三方小插件冲突,因此不推荐使用。
lastsemic
检查一行代码最后声明后面的分号是否遗漏
var name = (function() { return 'Anton' }());
laxbreak
检查不安全的折行(下个版本将被删除)
laxcomma
检查逗号在代码行最前面的编程风格
var obj = {
name: 'Anton'
, handle: 'valueof'
, role: 'SW Engineer'
};
loopfunc
禁止内部循环,定义函数的内部循环可能致使这样的错误:
var nums = [];
for (var i = 0; i < 10; i++) {
nums[i] = function (j) {
return i + j;
};
}
nums0; // Prints 12 instead of 2
解决上面的代码,你须要复制的变量 i:
var nums = [];
for (var i = 0; i < 10; i++) {
(function (i) {
nums[i] = function (j) {
return i + j;
};
}(i));
}
moz
JSHint Mozilla扩展。除非你开发专门为Firefox web浏览器不须要这个选项。
multistr
将在下个版本中被删除
这个选项会抑制警告多行字符串。容许多行字符串在JavaScript是危险的,若是你当心在一个转义字符()和一个新行之间输入一个空格,将会致使整个字符串错误。
注意,即便这个选项容许正确多行字符串,它仍然警告说对多行字符串没有转义字符之间或与任何转义字符和空格。
// jshint multistr:true
var text = "Hello\World"; // All good.
text = "HelloWorld"; // Warning, no escape character.
text = "Hello\World"; // Warning, there is a space after \
noyield
检查函数生成器没有yield声明
plusplus
禁止一元递增和递减运算符的使用
proto
禁止关于__proto__属性的警告
scripturl
禁止使用脚本URL定向,好比javascript:...
sub
下个版本将被删除
检查[]使用,可使用.代替[]
person['name'] vs.person.name.
supernew
检查怪异结构 new function () { ... }和 new Object;
这样的结构是有时用于单列在JavaScript中:
var singleton = new function() {
var privateVar;
this.publicMethod = function () {}
this.publicMethod2 = function () {}
};
validthis
注意:可使用这个选项只有在函数的范围
在非构造器函数中使用 this
withstmt
检查with使用声明。
with声明语句能够引发开发者和意外全局变量定义之间的混乱。
3.环境选项:Environment
这些选项让JSHint知道一些预先定义的全局变量。
browser
暴露浏览器属性的全局变量,列如 window,document;
注意:这个选项不暴露变量 alert或 console。
browserify
这个选项定义全局变量使用时可用Browserify工具创建一个项目
couch
这个选项定义全局暴露CouchDB。CouchDB是一个面向文档的数据库,能够查询和索引MapReduce的方式使用JavaScript
devel
这个选项定义了全局变量,一般用于日志调试: console, alert等等
dojo
这个选项定义全局暴露的Dojo Toolkit.
jasmine
这个选项定义全局暴露jasmine的单元测试框架.
jquery
这个选项定义全局暴露的jQuery库。
mocha
这个选项定义全局暴露的“BDD”和“TDD”的ui mocha单元测试框架.
module
这个选项告诉JSHint,输入代码描述了一个ECMAScript 6模块。全部模块的代码解释为严格模式代码。
mootools
这个选项定义全局暴露的MooToolsJavaScript框架。
node
这个选项定义全局变量能够当你的代码运行在node的运行时环境
nonstandard
这个选项定义非标准但普遍采用全局变量等 escape和 unescape.
phantom
这个选项定义全局可用你的核心运行时内部PhantomJS运行时环境
prototypejs
这个选项定义全局暴露的prototypejs框架。
qunit
这个选项定义全局暴露QUnit单元测试框架
rhino
这个选项定义全局变量能够当你的代码运行在rhino的运行时环境。rhino是一个开源的实现彻底用Java编写的JavaScript。
shelljs
这个选项定义全局暴露ShellJS库
typed
这个选项定义全局变量数组类型构造函数。
worker
这个选项定义全局变量能够当你的代码运行在web worker.web worker 是运行在后台的 JavaScript,独立于其余脚本,不会影响页面的性能.
全部主流浏览器均支持 web worker,除了 Internet Explorer。
wsh
这个选项定义全局变量能够当你的代码运行在Windows Script Host的运行时环境
yui
这个选项定义全局暴露的yui框架。
猜你喜欢
- 2024-10-13 Vanilla JS——世界上最轻量的JavaScript框架(没有之一)
- 2024-10-13 JQuery对象与DOM对象的关系与转换
- 2024-10-13 那些年我们用过HTML5开发工具 那些年我们用过html5开发工具的人
- 2024-10-13 Web开发者有必要拥有的最新的8款HTML5工具!
- 2024-10-13 怎么真正掌握Web前端技术 Web开发工具有哪些
- 2024-10-13 前端开发新手入门:Web开发工具有哪些?
- 2024-10-13 14款最佳的Node.js Web框架 node 框架 排行 2019
- 2024-10-13 SSL、TLS拒绝服务攻击 stride 拒绝服务
- 2024-10-13 分享几个值得学习的NodeJS开源框架
- 2024-10-13 Mac上必备的API文档管理工具 Dash For Mac 破解版
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- sd分区 (65)
- raid5数据恢复 (81)
- 地址转换 (73)
- 手机存储卡根目录 (55)
- tcp端口 (74)
- project server (59)
- 双击ctrl (55)
- 鼠标 单击变双击 (67)
- debugview (59)
- 字符动画 (65)
- flushdns (57)
- ps复制快捷键 (57)
- 清除系统垃圾代码 (58)
- web服务器的架设 (67)
- 16进制转换 (69)
- xclient (55)
- ps源文件 (67)
- filezilla server (59)
- 句柄无效 (56)
- word页眉页脚设置 (59)
- ansys实例 (56)
- 6 1 3固件 (59)
- sqlserver2000挂起 (59)
- vm虚拟主机 (55)
- config (61)
本文暂时没有评论,来添加一个吧(●'◡'●)