1. 程式人生 > >Sublime Text 3使用SublimeLinter配置JS,CSS,HTML語法檢查

Sublime Text 3使用SublimeLinter配置JS,CSS,HTML語法檢查

  Sublime安裝外掛有兩種方式,一種是直接下載安裝包解壓縮到Packages目錄,另一種是通過Package Control元件來安裝元件,後者更加的方便。

開啟Sublime,按control + ` 開啟控制檯,貼上如下程式碼到命令列並回車;

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp =   sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open
(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

重啟Sublime,在Perferences->Package Settings 中看到 Package Control,則表示安裝成功。

  SublimeLinter是Sublime的一個程式碼檢測工具外掛。
安裝SublimeLinter前必須安裝node.js

  • 開啟Sublime,按下 Ctrl+Shift+p 進入 Command Palette;

  • 輸入install進入 Package Control: Install Package;

  • 輸入SublimeLinter,選擇SublimeLinter進行安裝。

  可以把sublimeLinter-contrib-htmlhint看成是SublimeLinter的一個外掛,sublimeLinter-contrib-htmlhint呼叫xg-htmlhint來進行語法檢查。sublimeLinter-contrib-htmlhint 1.0.1版本有問題,所以我們使用1.0.0版本。

  • 前往Releases下載1.0.0的壓縮包,解壓並重命名為“SublimeLinter-contrib-htmlhint”,並放入Sublime的Package目錄(選單->Preferences->Browse
    Packages)

找到node.js的CMD視窗,輸入以下命令;等待出現一堆數字版本號即為成功安裝。

npm install -g xg-htmlhint

  此時開啟Sublime Text3,xg-htmlhint就可以檢測程式碼了,儲存(cmd + S)的時候如果有錯誤會有錯誤提示。

安裝jshint和csslint

開啟Sublime_Txt3,按住Ctrl+Shift+P安裝

Sublime​Linter-csslint   
Sublime​Linter-jshint

開啟nodejs的CDM視窗,輸入命令安裝

npm install jshint
npm install csslint

SublimeLinter個性化配置

{
    "user": {
        "csslint_options": {
            "adjoining-classes": false,
            "box-model": false,
            "box-sizing": false,
            "compatible-vendor-prefixes": false,
            "floats": false,
            "font-sizes": false,
            "gradients": false,
            "important": false,
            "known-properties": false,
            "outline-none": false,
            "qualified-headings": false,
            "regex-selectors": false,
            "shorthand": false,
            "text-indent": false,
            "unique-headings": false,
            "universal-selector": false,
            "unqualified-attributes": false
        },
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "jshint_options": {
            "browser": true,
            "curly": true,
            "devel": true,
            "eqeqeq": true,
            "evil": true,
            "forin": true,
            "globals": {
                "$": true,
                "console": true,
                "document": true,
                "global": true,
                "grunt": true,
                "jQuery": true,
                "module": true,
                "setInterval": true,
                "setTimeout": true,
                "window": true
            },
            "jquery": true,
            "latedef": true,
            "noarg": true,
            "noempty": true,
            "quotmark": "single",
            "strict": false,
            "undef": true,
            "unused": "vars",
            "wsh": true
        },
        "lint_mode": "background",
        "linters": {
            "csslint": {
                "@disable": false,
                "args": [],
                "errors": "",
                "excludes": [],
                "ignore": "",
                "warnings": ""
            },
            "htmlhint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "sublimelinter": "save-only",
        "sublimelinter_executable_map": {
            "css": "C:/Program Files/nodejs/node.exe",
            "javascript": "C:/Program Files/nodejs/node.exe"
        },
        "sublimelinter_gutter_marks": true,
        "sublimelinter_popup_errors_on_save": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

相關推薦

Sublime Text 3使用SublimeLinter配置JS,CSS,HTML語法檢查

  Sublime安裝外掛有兩種方式,一種是直接下載安裝包解壓縮到Packages目錄,另一種是通過Package Control元件來安裝元件,後者更加的方便。 開啟Sublime,按control + ` 開啟控制檯,貼上如下程式碼到命令列並回車; import ur

【Node JS環境搭建及sublime Text 3配置Node Js環境】

1.Node Js 安裝(windows環境下) 安裝後進入控制檯輸入node -v即可檢視node js的版本,能正常檢視則表示安裝成功。如下圖所示: 2. sublime text 3安裝及配置nodejs環境 安裝好sublime t

【Nodejs】【node.js 安裝 和 配置Sublime Text的Node.js

使用 man 編輯 sql text odi environ 文件名 ren 【一】 【安裝nodejs】 第一步:下載安裝文件:     https://nodejs.org/en/download/   第二步:安裝nodejs     下載完成之後,雙擊"n

gulp es5語法轉換及js/css/html壓縮過程

開發十年,就只剩下這套架構體系了! >>>   

Sublime Text 3配置瀏覽默認路徑為localhost

技術 type project 打開 url 目錄 host ren get 1、在 Sublime Text 3 中,安裝 SideBarEnhancements 側邊欄增強插件。(註意:安裝插件之前需要安裝包管理工具,參考這裏) 2、SideBarEnhancement

Ubuntu / Debian / Deepin等 Sublime Text 3 配置C++環境(一鍵編譯&運行,格式化代碼)

all text handle hand quest urlopen 修改 rip 並運行 配置編譯環境: 進sublime,然後點擊Tools->Build System->New build System 直接用下面的替換 { "shell_c

Mac Sublime Text 3 配置Python環境及安裝插件

官網 下載 span rep nac command 設置 tel defined 一、下載安裝Sublime Text 3 官網下載地址:http://www.sublimetext.com/3 二、配置Python開發環境 1.點擊右下角,選擇python 2.添加編

Sublime Text 3 配置java程序運行環境(可進行控制臺輸入)(轉)

tro [0 回車 enc str nbsp scan bsp source 博主配置前的情況1. 64位筆記本 2. win10系統 3. 已配置好java環境 4. 已安裝好sublime並配置好Package Control組件 具體過程:   1. Sub

Sublime Text 3 配置Python3開發環境

system gin 12c auto dig instead sta none handle 首先引出我的Python之路,我是計算機技術愛好者,打造屬於自己代碼編寫的工具是一件很享受的事情,推薦用Sublime Text 3 ,關於ST3 找度娘最了解的咯。 1.下載

Sublime Text 運行js

ocs 保存 targe trac art ces doc roc and 首先安裝nodejs 當然你可以使用其它諸如jsc之類的環境來運行js, 本文使用的是nodejs. 首先確保你的電腦已經安裝好nodejs, 並已將其添加到環境變量中 (一般安裝時自動添加或者詢問

Sublime text 3配置Python3開發環境及常用插件安裝

engine 控制臺 htm cond ces real 通過 sting actions 一、環境準備 1、官方網站地址 2、Windows 10 二、安裝Sublime Text 3 1、雙擊下載的.exe文件安裝,安裝路徑不要有中文目錄 2、安裝Sublime

Sublime Text 3+node.js 前段安裝

前段安裝: 1.工具 Sublime Text 3 2.環境 node.js 3.步驟: 配置node.js環境變數 安裝初始化npm:npm init(一般自帶可不安裝) 安裝 cnpm:npm install -g cnpm --registry=https://registry.npm.tao

[go-web開發小試驗] 2-靜態資源處理--包括js css html

前言 光是能夠寫出hello world之類的程式還遠遠不夠,網站有前後之分,前端部分會有樣式表,指令碼,html靜態檔案,圖片資源,甚至有音訊視訊多媒體,pdf等等,所以,靜態資源的處理是必不可少的。 這裡提供一個參考實現: Go 語言打包靜態檔案 利用go binda

Windows下 Sublime Text 3配置java執行環境

配置java環境步驟: 下載java最新版的SDK。JDK官網下載地址 下載Sublime Text 3,  根據電腦選擇32位或64位版本,下載完成後安裝。Sublime Text 3官網下載地址 配置java環境變數,在環境變數中新建JAVA_HOME,

sublime text 3 配置terminal 啟動npm

前期工作。安裝node.js 配置全家變數  1:ctrl + shift + p 開啟 輸入intall package 回車 2:安裝node.js 外掛 3:再安裝terminal 4:Preferences - package settings -- terminal  -

VSCode uixml 使用js-css-html外掛格式化說明

/Users/**/.vscode/extensions/lonefy.vscode-js-css-html-formatter-0.2.3/out/src/extension.js中,所有 if (formatted) 新增如下程式碼 // 定製自己的格式化程式碼

js css+html實現簡單的日曆

(function(){ /* * 用於記錄日期,顯示的時候,根據dateObj中的日期的年月顯示 */ var dateObj = (function(){ var _date = new Date(); // 預設為當前系統時間 return { g

sublime text 3配置python開發環境

1.編輯python所需外掛 (1) Anaconda (2) BracketHighlighter (3) SideBarEnhancements (4) IMESupport (5) ConvertToUTF8 (6) Theme - Soda 2.外掛配置 (1) S

Sublime Text 3 配置 python3編譯環境

預設的Sublime Text 3 編譯系統中只有python編譯,沒有python3編譯,但是很多情況下,我們總是希望能在sublime text 下支援python3編譯。話不多說,直接講配置… 1、開啟sublime text 3,點選上部選單欄Tool

Ubuntu14.04 更新Python版本後,Sublime Text 3 配置 python編譯環境

Ubuntu14.04安裝的Sublime Text 3 編譯系統中只有python編譯,並且是按照系統預設的Python路徑編譯。當系統更新Python版本並更新路徑以後,原有的Python編譯便會失效,所以此時需要在sublime中重新進行Python編譯。話不多說,直接