Write high quality JavaScript and CSS with SublimeLinter

10,211 0
Summary

SublimeLinter integrates with Sublime Text to provide essential syntax validation for JavaScript and CSS, aiding developers in maintaining code quality. Setting up this plugin on Windows involves installing Sublime Text Package Control, SublimeLinter, and Node.js. Key configuration steps include defining an execution mode, such as "save-only" for improved performance, and mapping the JavaScript and CSS validation engines to the Node.js executable. Developers can then fine-tune their linting experience by customizing JSHint options for JavaScript and CSSLint options for CSS, ensuring adherence to specific coding standards.

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

VALIDATION SUBLIMELINTER SUBLIME TEXT

  RELATED

  COMMENTS

0

No comment for this article.