寫jshint代碼的簡單介紹

本文目錄一覽：

• 1、用什麼編輯器寫javascript最舒服呢？
• 2、jshint到底該怎麼用呢？sublime text3中又該怎麼使用
• 3、sublime3怎麼安裝和使用jshint
• 4、如何把 Sublime 變身為 JavaScript 編輯器
• 5、jshint怎麼忽略不輸出警告，只顯示語法錯誤

用什麼編輯器寫javascript最舒服呢？

目前前端使用率最高的就是sublime 和 webstorm了，當然了還有visual ，DW， 等等。下面僅介紹一些sublime和webstorm。

1.Sublime Text 是一個代碼編輯器（Sublime Text 2是收費軟件，但可以無限期試用），也是HTML和散文先進的文本編輯器。Sublime Text是由程序員Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴展功能的Vim。

Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。Sublime Text 是一個跨平台的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。

2.WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

功能編輯

JavaScript

· 基於DOM，特定瀏覽器完成

· 編碼導航和用法查詢

· 支持ECMAScript

· 支持CoffeeScript

· 支持結點

· JavaScript重構

· JavaScript單元測試

· 代碼檢測和快速修復

· JSLint/JSHint

· 基於 Mozilla的JavaScript調試器

其他用途

· 批量代碼分析

· 編碼語言混合或內混

· 拼寫檢查器

· 重複代碼檢測器

編輯語言

· 支持HTML5

· css/js

· 檢驗和快速修復

· Zen編碼

· 顯示內容

· 顯示應用的風格

便捷的環境

· HTML5樣本文件和其他Web應用程序模板

· FTP和遠程文件同步

· 集成了版本控制系統

· 本地記錄

優勢功能編輯

智能的代碼補全

支持不同瀏覽器的提示，還包括所有用戶自定義的函數(項目中)

代碼補全包含了所有流行的庫，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

代碼格式化

代碼不僅可以格式化，而且所有規則都可以自己來定義

html提示

大家經常在js代碼中編寫html代碼，一般來說十分痛苦，不過有了智能提示，就爽多了。而且html裡面還能有js提示。

聯想查詢

只需要按着Ctrl鍵點擊函數或者變量等，就能直接跳轉到定義；可以全

代碼導航和用法查詢 (8張)

項目查找函數或者變量，還可以查找使用並高亮。

代碼重構

這個操作有些像Resharper，熟悉Resharper的用戶應該上手很快，支持的有重命名、提取變量/函數、內聯變量/函數、移動/複製、安全刪除等等。

代碼檢查和快速修復

可以快速找到代碼中的錯誤或者需要優化的地方，並給出修改意見，快速修復。

代碼調試

支持代碼調試，界面和IDEA相似，非常方便。

代碼結構瀏覽

可以快速瀏覽和定位

代碼摺疊

功能雖小，不過勝在方便高效

包裹或者去掉外圍代碼

自動提示包裹或者去掉外圍代碼，一鍵搞定

jshint到底該怎麼用呢？sublime text3中又該怎麼使用

系統：win7 + sublime text3 + Node.JS Sublime Text需安裝插件：SublimeLinter 和 Sublimelinter-jshint。 Node.JS需安裝包：npm install -g jshint 如果都是默認安裝，以上應該就能用了。 如果Node沒有安裝在默認位置，在菜單里Tools – Subli

sublime3怎麼安裝和使用jshint

安裝 SublimeLinter

如同其他插件一樣使用 Package Control 來安裝。

按下 Ctrl+Shift+p 進入 Command Palette

輸入install進入 Package Control: Install Package

輸入SublimeLinter。進行安裝.

安裝完成後可以看到這樣一段話：

Welcome to SublimeLinter, a linter framework for Sublime Text 3.

* * * IMPORTANT! * * *

SublimeLinter 3 is NOT a drop-in replacement for

earlier versions.

Linters *NOT* included with SublimeLinter 3,

they must be installed separately.

The settings are different.

* * * READ THE DOCS! * * *

Otherwise you will never know how to install linters, nor will

you know about all of the great new features in SublimeLinter 3.

For complete documentation on how to install and use SublimeLinter,

please see:

可以看到具體的 Linters 組件不被包含在 SublimeLinter 3 中，所以我們要額外獨立安裝組件。

可以針對不同的語言安裝不同的組件。

JavaScript 語法檢查

SublimeLinter-jshint 是基於 nodeJS 下的 jshint 的插件，實際上 SublimeLinter-jshint 調用了 nodeJS 中 jshint 的接口來進行語法檢查的。

安裝 SublimeLinter-jshint

為了讓 JavaScript 代碼有語法檢查，我們安裝 SublimeLinter-jshint

同樣的方法，我們安裝 SublimeLinter-jshint

按下 Ctrl+Shift+p 進入 Command Palette

輸入install進入 Package Control: Install Package

輸入SublimeLinter-jshint。進行安裝.

如下圖

安裝完成後我們可以看到下面的一段話

SublimeLinter-jshint

——————————-

This linter plugin for SublimeLinter provides an interface to jshint.

** IMPORTANT! **

Before this plugin will activate, you *must*

follow the installation instructions here:

安裝 nodeJS 和 jshint

在插件開始工作之前，我們必須再看一下上述插件的安裝說明

通過 SublimeLinter-jshint 的說明 我們可以看到，這個組件依賴於 nodeJS 下的 jshint，所以我們安裝 nodeJS 環境和 nodeJS 下的 jshint。

安裝 Node.js

通過 npm 安裝jshint

在命令行下輸入如下代碼，完成安裝

npm install -g jshint

安裝完成後命令行中出現如下的信息

C:\Users\Administrator\AppData\Roaming\npm\jshint – C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint\bin\jshint

jshint@2.6.3 C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint

├── strip-json-comments@1.0.2

├── underscore@1.6.0

├── exit@0.1.2

├── shelljs@0.3.0

├── console-browserify@1.1.0 (date-now@0.1.4)

├── htmlparser2@3.8.2 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.13, domutils@1.5.1)

├── minimatch@1.0.0 (sigmund@1.0.0, lru-cache@2.5.0)

└── cli@0.6.6 (glob@3.2.11)

可以查看 jshint 版本，已確認安裝完成。

C:\Users\Administratorjshint -v

jshint v2.6.3

現在，恭喜你，我們使用 Sublime 編輯 JavaScript 文件，就會有語法檢查了！

在編輯過程中，會有如下提示

點擊提示點後，Sublime 狀態欄也會有相應的說明

css 語法檢查

與 jshint 同理，SublimeLinter-csslint 也是基於 nodeJS 下的 csslint 的插件，實際上 SublimeLinter-csslint 調用了 nodeJS 中 csslint 的接口來進行語法檢查的。

安裝 SublimeLinter-csslint

同樣的方法。

按下 Ctrl+Shift+p 進入 Command Palette

輸入install進入 Package Control: Install Package

輸入SublimeLinter-csslint。進行安裝.

如下圖

安裝完成後我們可以看到下面的一段話

SublimeLinter-csslint

——————————-

This linter plugin for SublimeLinter provides an interface to csslint.

** IMPORTANT! **

Before this plugin will activate, you *must*

follow the installation instructions here:

在使用插件之前，必須遵循上述網址中的安裝說明

在 nodeJS 下安裝 csslint

進入上述的 GitHub 地址，csslint 的說明頁。我們知道了和 jshint 一樣，csslint 也是基於 nodeJS 下的 csslint 來使用的。

這裡安裝 nodeJS 過程省略。

只需用 npm 安裝 csslint 即可。

在命令行中輸入

npm install -g csslint

安裝完成後命令行中出現如下的信息

C:\Users\Administrator\AppData\Roaming\npm\csslint – C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint\cli.js

csslint@0.10.0 C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint

└── parserlib@0.2.5

可以查看 csslint 版本，已確認安裝完成。

C:\Users\Administratorcsslint –version

v0.10.0

現在，恭喜你，我們使用 Sublime 編輯 css 文件，就會有語法檢查了！

在編輯過程中，會有如下提示

點擊提示點後，Sublime 狀態欄也會有相應的說明

如何把 Sublime 變身為 JavaScript 編輯器

Sublime 是一款非常流行並且強大的文本編輯工具， 除了它提供的基礎功能， 它還支持第三方插件， 配置適合我們工作流的插件可以讓使用 Sublime 的時候更加舒服。

插件控制中心

首先，我們需要安裝 Package Control, 進入它的安裝主頁

大家可以看到：

正如提示中描述的， 在 Sublime 中按下 Ctrl + ` 快捷鍵來打開控制台， 然後把頁面中的那段腳本複製進去，然後執行就 OK 了。 腳本的具體內容大家一定要從 Package Control 的主頁去獲取， 因為這個腳本隨時可能會更新， 官方主頁上的一直是最新的。

成功安裝後， 就可以看到這個提示了：

接下來， 按下 Command + Shift + P 鍵， 打開命令面板， 並且輸入 install， 可以看到 Install Package 選項：

按下回車打開它， 就可以看到可用插件的列表了

一切就緒後， 可以開始配置插件了。 給大家推薦幾個我在用的插件。

JSHint Gutter 插件

JSHint 是非常流行的 JS 語法檢查工具， 它是一套獨立的庫， 並且提供命令行版本。 它可以幫助你寫出更加符合 JS 標準規範的代碼， 我們可以調用 jshint 命令並傳入我們的代碼文件， 它就會幫我們找出不符合規範的代碼，並且給出提示。

並且 Sublime 也提供了 JSHint 的支持， 我們只需要安裝插件， 就可以將 Sublime 和 JSHint 無縫集成起來了。

按照我們剛才的方式打開插件列表， 並且輸入 jshint，就可以看到 JSHint Gutter 插件了：

直接按下回車安裝。 JSHint 插件默認不會自動執行， 但我更偏好讓他在代碼編輯中自動檢測， 那麼可以按下 Command + Shift + P 再次打開命令行面板， 然後輸入 jsHint， 選擇 Set Plugin Options 選項：

JSHint 插件的配置選項其實就是一個配置文件， 只需要將 lint_on_edit 屬性設置為 true 它就會自動執行了：

這樣， 當我們的代碼有不符合對方的時候， 插件就會給出錯誤提示：

如果想看到這些錯誤的詳細內容， 按下 Command + Shift + J 鍵來查看：

對於有代碼潔癖的同學， 或者希望寫出高質量代碼的朋友來說，JSHint 都會是一個很不錯的工具， 比較推薦。

JSDoc 插件

這個也是我比較喜歡的插件， JSDoc 顧名思義，就是一個文檔注釋插件。 比如我們可以向這樣，只輸入 /** 然後按下回車， JSDoc 就會根據下面函數定義生成注釋模板：

另外，JSDoc 本身也是一套工具體系， 除了插件能幫助我們生成方便的注釋模板之外， JSDoc 還能夠根據這些注釋輸出標準化的 API 文檔， 可謂一舉兩得。 JSDoc 插件的安裝方式也都一樣， 還是按照我們剛才的方法打開插件列表。

並且找到 DocBlockr， 然後安裝即可。

良好的注釋習慣， 也是寫出高質量代碼的一個保障。

結尾

這次跟大家聊了聊 Sublime 的插件， 插件幾乎存在於很多開發工具中， 合理的使用插件會對我們的開發過程提供很多幫助。 但插件也不是越多越好，太多的插件有時也會造成混亂。 希望大家都向大牛的方向邁進~

jshint怎麼忽略不輸出警告，只顯示語法錯誤

配置package/grunt-contrib-jshint，不需要的改成false

options :{jshintrc:{ “curly” : true, // true: Require {} for every new block or scope “eqeqeq” : true, // true: Require triple equals (===) for comparison “immed” : true, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` “latedef”: true, // true: Require variables/functions to be defined before being used “newcap” : true, // true: Require capitalization of all constructor functions e.g. `new F()` “noarg” : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` “sub” : true, // true: Prohibit use of empty blocks “undef” : true, // true: Require all non-global variables to be declared (prevents global leaks) “boss” : true, // true: Require all defined variables be used “eqnull” : true, // true: Requires all functions run in ES5 Strict Mode “globals”: { “jQuery”: true //可以使用jquery的函數

}

}

}