安裝
npm install jshint -g
項目中有可能用到的文件:
- .jshintrc jshint配置文件/或者用--config命令指定一個.json文件
- .jshintignore jshint不忽略檢測的文件 / 或者用 --exclude-path命令指定一個.gitignore
- reporter.js 自定義的jshint的輸出方法,具體可參考本文的 附件:reporter
使用
ide拓展
主流的ide都有自己的拓展插件,這里用vscode簡單的說明。
在vscode左側的應用商店搜索jshint排第一個就是。配合項目中的.jshintrc文件可以在ide中報錯。
jshint CLI
jshint自帶命令行
例子 | 解釋 |
---|---|
jshint myfile.js | 執行jshint |
jshint --reporter=myreporter.js myfile.js | 定義reporter |
jshint --verbose myfile.js | 輸出中加入錯誤碼 |
jshint --show-non-errors myfile.js | 輸出中加入錯誤信息 |
jshint --exclude path | 加入不想被linted的目錄 |
jshint --exclude-path | 指定.jshintignore |
--prereq | 指定全局變量 |
jshint --help | 幫助 |
jshint --version | 版本 |
... | ... |
屏蔽某些錯誤提示
jshint提供了option選項去根據不同的項目需求和程序員習慣開啟或屏蔽一些錯誤或警告提示。但是還是有些提示并不能通過配置去掉。(這有點煩人。。)這時可以用:
/* jshint -W034 */
去除對應的警告。這個W034就是錯誤碼。具體怎么得到:
jshint --verbose myfile.js
myfile.js: line 6, col 3, Unnecessary directive "use strict". (W034)
或者有些ide的提示也會直接提示你錯誤碼。(note: 一般警告的錯誤碼會以W開頭,錯誤的錯誤碼會以E開頭)
如果你想重新啟動被屏蔽的錯誤那就用
/* jshint +W034 */
配置方法
按照順序依次查找以下的config配置:
- 通過jshint --config ..path/myconfig.json指定config
- 在package.json里增加一個jshintConfig屬性,在屬性里配置參數。
- 在項目根目錄添加一個.jshintrc的json配置文件,jshint運行是會從代碼文件目錄往上尋找直到找到.jshintrc文件。都找不到會在全局的默認配置里找.jshintrc文件。
Inline configuration
除了以上三種方法jshint還支持行內配置。
類似這樣,在文件或函數開頭加入:
/* jshint undef: true, unused: true */
/* globals MY_GLOBAL */
行內配置有以下幾種方式:
jshint開頭,多個選項以逗號分開
/* jshint strict: true */
globals開頭,標識全局變量避免啟用undef選項時應用未定義變量報錯
/* globals MY_LIB: false */
exported,標識全局變量避免啟用unused選項時變量未使用報錯
/* exported EXPORTED_LIB */
ignore,ignore中的代碼不做jshint檢測
// Code here will be linted with JSHint.
/* jshint ignore:start */
// Code here will be ignored by JSHint.
/* jshint ignore:end */
falls through, 避免Switch statements 沒有break報錯
switch (cond) {
case "one":
doSomething(); // JSHint will warn about missing 'break' here.
/* falls through */
case "two":
doSomethingElse();
}
jshintrc參數
具體的參數可以參考上面的官方文檔。這里不做多介紹。
一個例子:
{
//加強選項:
//use es6. 3/5/6
"esversion": 6,
//循環必須用大括號包起來
"curly": true,
//設置為true,禁止使用這個選項 ==和 !=,強制使用 ===和 !==。
"eqeqeq": false,
//允許警告js未來版本中定義的標識符。
"futurehostile": true,
//檢查無效 typeof操作符的值
"notypeof": true,
//檢查變量重復定義
// 他接受4個值:"inner" 只檢查是否在相同的作用域重復定義;"outer" 檢查外部作用域;
// false 與inne一樣; true 允許變量覆蓋
"shadow": "inner",
//ECMAScript 5嚴格模式
// "global" - 全局層面的嚴格模式"use strict";
// "implied" - 文件里面使用"use strict";
// false - 禁止使用嚴格模式
// true - 函數上面必須使用一個"use strict";
"strict": "implied",
//變量未定義
"undef": true,
//變量定義未使用
"unused": true,
// 設置為true時,禁止使用var聲明變量
// "varstmt": true,
// "globals": {
// "require": true
// },
//寬松選項:
// 禁止缺少分號警告
"asi": true,
//環境選項:
//暴露瀏覽器屬性的全局變量,列如 window,document;
//注意:這個選項不暴露變量 alert或 console。
"browser": true,
//這個選項定義了全局變量,通常用于日志調試: console, alert等等
"devel": true,
//這個選項定義全局變量可以當你的代碼運行在node的運行時環境
"node": true,
//這個選項告訴JSHint,輸入代碼描述了一個ECMAScript 6模塊。所有模塊的代碼解釋為嚴格模式代碼。
"module": true,
//這個選項定義全局暴露的jQuery庫。
"jquery": true
}
這里要說的是option里除了加強選項,寬松選項,環境選項還有一些特殊選項:
entend
{
"extends": "../.jshintrc",
"globals": {
"test": false,
"assert": false
}
}
//在一些情況下你可能想要在項目配置之外加載一些已有的配置
overrides
{
"shadow": false,
"overrides": {
"lib/*-test.js": {
"expr": true
}
}
}
//在不同的文件中應用不同的配置
附件
<h3 id="reporter">reporters</h3>
JSHint Reporter.js是一個你自定義的代替jshint默認輸出方法的文件。
用jshint命令可以執行你的reporter
jshint --reporter=myreporter.js myfile.js
下面是一個例子:
"use strict";
module.exports = {
reporter: function (res) {
var len = res.length;
var str = "";
res.forEach(function (r) {
var file = r.file;
var err = r.error;
str += file + ": line " + err.line + ", col " +
err.character + ", " + err.reason + "\n";
});
if (str) {
process.stdout.write(str + "\n" + len + " error" +
((len === 1) ? "" : "s") + "\n");
}
}
};
上面的例子中res中存的error的格式為:
[
{
file: 'demo.js',
error: {
id: '(error)',
code: 'W117',
reason: '\'module\' is not defined.'
evidence: 'module.exports = {',
line: 3,
character: 1,
scope: '(main)',
// [...]
}
},
// [...]
]
如果你想用exporter禁止報某些錯誤的話可以寫個判斷,error.code === 'Wxxx' 時 return。