JSHint-javascript語法檢查規(guī)范工具使用及與Sublime集成


JSHint腐巢,發(fā)現(xiàn)錯誤和潛在問題的社區(qū)驅(qū)動的工具
JSLint 錯誤解析[1]

一身冬、安裝nodejs的jshint

安裝Node.js環(huán)境

jshint其功能實現(xiàn)需要node.js支持,所以去node.js官網(wǎng)單擊找到當(dāng)前平臺的版本進行下載安裝卒茬。

安裝nodejs的jshint[2] csshint

$ npm   install -g jshint
$ npm   install -g csshint
#測試
$ jshint -v
$ csshint  -v
#單獨使用校驗測試
$ jshint myfile.js
myfile.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回車

稍等等待彈出package查找窗口馍管,輸入Sublimelinter,按下回車安裝薪韩。

然后使用同樣方法安裝SublimeLinter-jshint确沸、SublimeLinter-csshint。

此時俘陷,一般情況下罗捎,你打開編輯器,查看js文件會發(fā)現(xiàn)拉盾,已經(jīng)有了語法校驗宛逗。

查看SublimeLinter-jshint設(shè)置,右鍵 -> Sublimelinter -> Open User Settings

禁用Sublimelinter-jshint ,右鍵 -> Sublimelinter -> Toggle Linter 回車即可切換 啟用狀態(tài)

方式二盾剩、使用Sublime JSHint Gutter雷激,僅支持js驗證

在sublime中按下Cmd+Shift+P打開命令查找窗口,輸入pci找到packge control install回車告私,稍等等待彈出package查找窗口屎暇,輸入js gutter,按下回車安裝驻粟。

JS Gutter配置

js gutter默認(rèn)未開啟檢查根悼,設(shè)置編輯,加載或保存時自動檢查
右鍵 -> JSHint -> Set Plugin Options 將對應(yīng)設(shè)置的false改為true即可開啟檢查

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

三蜀撑、jshint的檢查規(guī)則的三種配置方式[3]

1. 自定義.jshintrc文件

一般.jshintrc文件放置在模塊根目錄挤巡,如果沒有找到,會一直向上及目錄查找酷麦,直到找到文件系統(tǒng)的根目錄/矿卑,如果沒找到采用默認(rèn)規(guī)則。

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

3. 內(nèi)聯(lián)配置(Inline configuration)

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

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

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

JSHint Gutter 右鍵 -> JSHint -> set Linting Preference 默認(rèn).jshintrc文件

Sublimelinter 右鍵 -> Sublimelinter -> Open User Settings 指定.jshintrc文件路徑

五、.jshintrc配置中文詳細(xì)定義[4]糊肤,官方配置列表[5]

1. 強制選項(Enforcing options) 如果設(shè)為true會產(chǎn)生更多錯誤提示

{
    "bitwise": true ,  //禁用位運算符琴昆,位運算符&在 JavaScript 中使用較少,經(jīng)常是把 && 錯輸成 &
    "curly": true , //循環(huán)或者條件語句必須使用花括號包圍
    "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'.
            為原生對象添加屬性確實看上去很方便,但也帶來了潛在的問題
            一是如果項目中有多處為同一個對象添加了同樣的屬性(或函數(shù)),則很可能產(chǎn)生沖突舷暮;
            二是如果某段邏輯依賴于對象屬性遍歷蟋座,則可能產(chǎn)生錯誤。  
        */
    "immed": true,
        /** 匿名函數(shù)調(diào)用必須
            (function() {
               // body 
            }());
            而不是
            (function() {
               // body
            })();
            這是為了表明脚牍,表達式的值是函數(shù)的結(jié)果向臀,而不是函數(shù)本身
        */
    "indent": 4 , //代碼縮進
    "latedef": "nofunc" , //禁止定義之前使用變量,忽略 function 函數(shù)聲明
    "newcap": true , //構(gòu)造器函數(shù)首字母大寫
    "noarg":true , //禁止使用 arguments.caller 和 arguments.callee诸狭,未來會被棄用券膀, ECMAScript 5 禁止使用 arguments.callee
    "quotmark": false , //為 true 時,禁止單引號和雙引號混用
    "undef": true , //變量未定義
    "unused": true , //變量未使用
    "strict":true , //嚴(yán)格模式
    "maxparams": 4 , //最多參數(shù)個數(shù)
    "maxdepth": 4  , //最大嵌套深度
    "maxcomplexity":true , //復(fù)雜度檢測
    "maxlen": 600 ,  //最大行數(shù)
    "predef": [
        "before",
        "beforEach",
        "after",
        "afterEach",
        "-toberemoved"
    ]  // 用來自定義一些環(huán)境變量驯遇,變量前面有有-號表示從環(huán)境中移除次變量
    //預(yù)定義變量為ReadOnly 不能在js文件的注釋中使用
}

2. 寬松選項(Relaxing options) 如果設(shè)為true會產(chǎn)生較少錯誤提示

{
    "asi": true , //控制“缺少分號”的警告
    "boss": true , //控制“缺少分號”的警告
    "debug": true ,//"debug": true
    "evil": true , //控制 eval 使用警告
    "lastsemic": true ,//檢查一行代碼最后聲明后面的分號是否遺漏
    "laxcomma": true , //檢查不安全的折行芹彬,忽略逗號在最前面的編程風(fēng)格
    "loopfunc": true , //檢查循環(huán)內(nèi)嵌套 function
    "multistr": true ,//檢查多行字符串
    "notypeof": true , //檢查無效的 typeof 操作符值
    "sub": true , //person['name'] vs. person.name
    "supernew": true , //new function () { ... } 和 new Object;
    "validthis": true //在非構(gòu)造器函數(shù)中使用 this
}

3. 環(huán)境(Environments)

{
    "browser": true ,//預(yù)定義全局變量 document,navigator叉庐,F(xiàn)ileReader 等
    "devel": true , //定義用于調(diào)試的全局變量:console舒帮,alert
    "jquery": true, //定義全局變量 $
    "node": true, //定義全局變量  module export等
}

  1. JSLint與JSHint的關(guān)系 ?

  2. JSHint Node模塊的命令行接口CLI,包括參數(shù)特殊選項等 ?

  3. JSHint 官方手冊 ?

  4. JSHint 配置淺析(中文) JSHint中文DOC ?

  5. JSHint 官方所有配置選項 ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末陡叠,一起剝皮案震驚了整個濱河市玩郊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌枉阵,老刑警劉巖译红,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異兴溜,居然都是意外死亡侦厚,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門拙徽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來刨沦,“玉大人,你說我怎么就攤上這事膘怕∠胱纾” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵淳蔼,是天一觀的道長侧蘸。 經(jīng)常有香客問我裁眯,道長鹉梨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任穿稳,我火速辦了婚禮存皂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己旦袋,他們只是感情好骤菠,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疤孕,像睡著了一般商乎。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上祭阀,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天鹉戚,我揣著相機與錄音,去河邊找鬼专控。 笑死抹凳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的伦腐。 我是一名探鬼主播赢底,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼柏蘑!你這毒婦竟也來了幸冻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤咳焚,失蹤者是張志新(化名)和其女友劉穎嘁扼,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體黔攒,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡趁啸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了督惰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片不傅。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖赏胚,靈堂內(nèi)的尸體忽然破棺而出访娶,到底是詐尸還是另有隱情,我是刑警寧澤觉阅,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布崖疤,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜锭亏,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一贷揽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦肢扯、人聲如沸辫秧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至板祝,卻和暖如春宫静,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背券时。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工囊嘉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人革为。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓扭粱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親震檩。 傳聞我的和親對象是個殘疾皇子琢蛤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容