ESLint
ESLint 是一個有效的程式碼品質控制工具,它可以根據預先制定的程式碼規格來避免低階程式碼錯誤的出現,以及保證程式碼樣式風格的統一。以下由sublime使用教學欄位為大家介紹Sublime Text 中設定 ESLint的方法。
安裝
你可以使用npm 來安裝ESLint:
npm install eslint -g
用法
如果你第一次使用ESLint,那麼你需要先設定一個設定文件,你可以在專案根目錄下使用--init 選項來產生:
eslint --init
如果專案根目錄下沒有package.json 文件,它會提示你先使用npm init 來初始化一個package.json 檔案。
eslint --init 會提示你選擇使用的程式碼樣式,你可以根據需求進行選擇,這裡推薦如下選擇:
Use a popular style guide Standard JavaScript
在這個過程中eslint 會自主的進行npm install 操作來安裝相關依賴,在安裝完成之後請注意是否有UNMET PEER DEPENDENCY 項的依賴,這表示NPM 無法自動的進行這個依賴的安裝,你需要手動的去進行安裝:
# ├── UNMET PEER DEPENDENCY eslint-plugin-promise@^1.0.8 npm install eslint-plugin-promise --save-dev
集成Sublime Text
在Sublime Text 中你需要安裝兩個外掛:
SublimeLinter SublimeLinter-contrib-eslint
然後透過Preferences->Package Settings->SublimeLinter->Settings - User 進行整合:
{ "user": { "debug": true, # 开启 debug 选项 "delay": 0.25, "error_color": "D02000", "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme", "gutter_theme_excludes": [], "lint_mode": "background", "linters": { "eslint": { "@disable": false, "args": [], "excludes": [] }, "jshint": { "@disable": false, "args": [], "excludes": [] }, "php": { "@disable": false, "args": [], "excludes": [] } }, "mark_style": "outline", "no_column_highlights_line": false, "passive_warnings": false, "paths": { "linux": [], "osx": [ "/Users/wang/.nvm/versions/node/v5.0.0/bin" # 设置 node 路径 ], "windows": [] }, "python_paths": { "linux": [], "osx": [], "windows": [] }, "rc_search_limit": 3, "shell_timeout": 10, "show_errors_on_save": false, "show_marks_in_minimap": true, "syntax_map": { "html (django)": "html", "html (rails)": "html", "html 5": "html", "javascript (babel)": "javascript", "magicpython": "python", "php": "html", "python django": "python", "pythonimproved": "python" }, "warning_color": "DDB700", "wrap_find": true } }
到這裡,整合完成,如果你專案中的JavaScript 程式碼風格不符合JavaScript Standard Style 的話,Sublime Text 會給出異常提示。
以上是Sublime Text 中設定 ESLint的詳細內容。更多資訊請關注PHP中文網其他相關文章!