Write high quality JavaScript and CSS with SublimeLinter

SublimeLinter is a plugin for one of the front end editor--Sublime Text, it is used to highlight those syntax not conforming to standard or wrong, it supports JavaScript,CSS,HTML,Java,PHP,Python,Ruby and some more.This article will introduce how to configure SublimeLinter in Windows to validate JavaScript and CSS codes.

Preparation

Install Sublime Text package control tool : http://wbond.net/sublime_packages/package_control

Install SublimeLinter with Sublime Text package control tool :https://github.com/SublimeLinter/SublimeLinter

Install Node.js, recommend you to install Windows Installer version : http://nodejs.org

Configuration

Open configuration file of SublimeLinter,Preferences->Package Settings->SublimeLinter->Settings->User, then:

1. Execution mode

"sublimelinter": "save-only",

There are four execution modes in SublimeLinter:

• true--Do realtime validation at background when user types
• false -- Do validation only at initialization
• "load-save" - Do validation when file is loaded or saved
• "save-only" -- Do validation only when file is saved

Recommend to choose  "save-only, this will make the Sublime Text run smoothly.

2. Validation engine

"sublimelinter_executable_map":
{
    "javascript":"D:/nodejs/node.exe",
    "css":"D:/nodejs/node.exe"
}

Here is to configure the JS engine installation path used to validate JavaScript and CSS codes

3. JSHint option

SublimeLinter uses JSHint as the default JavaScript validator, we can change it to jslint or gjslint as well. You can refer the meaning of each option here :http://www.jshint.com/docs/#options

"jshint_options":
{
    "strict": true,
    "noarg": true,
    "noempty": true,
    "eqeqeq": true,
    "undef": true,
    "curly": true,
    "forin": true,
    "devel": true,
    "jquery": true,
    "browser": true,
    "wsh": true,
    "evil": true
}

4. CSSLint option

SublimeLinter uses CSSLint as CSS validator. You can modify it as you want:

"csslint_options":
{
    "adjoining-classes": "warning",
    "box-model": true,
    "box-sizing": "warning",
    "compatible-vendor-prefixes": "warning",
    "display-property-grouping": true,
    "duplicate-background-images": "warning",
    "duplicate-properties": true,
    "empty-rules": true,
    "errors": true,
    "fallback-colors": "warning",
    "floats": "warning",
    "font-faces": "warning",
    "font-sizes": "warning",
    "gradients": "warning",
    "ids": "warning",
    "import": "warning",
    "important": "warning",
    "known-properties": true,
    "outline-none": "warning",
    "overqualified-elements": "warning",
    "qualified-headings": "warning",
    "regex-selectors": "warning",
    "rules-count": "warning",
    "shorthand": "warning",
    "star-property-hack": "warning",
    "text-indent": "warning",
    "underscore-property-hack": "warning",
    "unique-headings": "warning",
    "universal-selector": "warning",
    "vendor-prefix": true,
    "zero-units": "warning"
}

Source : http://www.cnblogs.com/lhb25/archive/2013/05/02/sublimelinter-for-js-css-coding.html