clubmate.fi

How to configure SublimeLinter

Here's how to set up SublimeLinter for SCSS and JavaScript files in Sublime Tex 3.

The SublimeLinter is:

Interactive code linting framework for Sublime Text 3

It's a framework, not an actual working package, the constituent modules need to be installed separately. It can be a bit tricky at first, here's how to do that for JS, CSS, HTML5 and PHP.

Groundwork

1. First, istall PackageControll, if you haven't already.
2. Then install SublimeLinter via Package Control

JavaScript lint with JSHint

1. Install SublimeLinter-jshint package via Package Control.
2. Install the actual JSHint: $ sudo npm install -g jshint

Configuring JSHint

Throw a .jshintrc in the project root, and define the options there. Here's a list of available options.

Here's a sample file, it's just json:

{
  "camelcase": true,
  "trailing": true,
  "eqeqeq": true,
  "curly": true,
  "indent": 4,
  "quotmark": "single"
}

SCSS lint with scss-lint

1. Install SublimeLinter-scss-lint via package control
2. Install the actual scss-lint to your system: $ sudo gem install scss-lint

See my post on CSScomb, it'll help you write perfectly formatted code.

Edit scss-lint configurations

Conf file should be in a similar location as this: /Library/Ruby/Gems/2.0.0/gems/scss-lint-0.21.0/config/default.yml

The scss-lint settings were pretty okay straight out the box, only needed to change the indentation and commenting:

Indentation:
    enabled: true
    width: 4

Comment:
    enabled: false

For project specific settings just drop .scss-lint.yml file the project directory and define settings there.

HTML lint with SublimeLinter-html-tidy

SublimeLinter-html-tidy comes with HTML4 or HTML5 version. Let's look how to install the HTML5-tidy.

It needs to be built first from the source, run the following in terminal:

$ git clone https://github.com/w3c/tidy-html5.git
$ cd tidy-html5/
$ make -C build/gmake/
$ make install -C build/gmake/

You can check where it is:

$ which tidy
/usr/local/bin/tidy

Looks good.

For me it worked out the box, but if it doesn't have a look at this thread in GitHub.

Configuring html5-tidy

Configuring needs to be done from the command line. But, we can pass the configuration commands to tidy from the Sublime Linter.

Via Sublime Text: Pop open the config file in Sublime Text > Preferences > Package Settings > SublimeLinter > Settings - User. There you'll find htmltidy block and add the setting into '"args:", it should look something like this:

"htmltidy": {
  "@disable": false,
  "args": [
    "--drop-empty-elements=false",
    "--drop-empty-paras=false",
    "--tab-size=4"
  ],
  "excludes": [],
  "osx": []
},

Via config file: you can set html5-tidy to use a config file, the file can be called anything, i.e. tidyconfig.txt. I have in my home directory. Here's an example file:

// sample config file for HTML tidy
indent: auto
indent-spaces: 2
wrap: 72
markup: yes
output-xml: no
input-xml: no
show-warnings: yes
numeric-entities: yes
quote-marks: yes
quote-nbsp: yes
quote-ampersand: no
break-before-br: no
uppercase-tags: no
uppercase-attributes: no
char-encoding: latin1
new-inline-tags: cfif, cfelse, math, mroot,
    mrow, mi, mn, mo, msqrt, mfrac, msubsup, munderover,
    munder, mover, mmultiscripts, msup, msub, mtext,
    mprescripts, mtable, mtr, mtd, mth
new-blocklevel-tags: cfoutput, cfquery
new-empty-tags: cfelse

Then tell tidy to use it:

$ tidy -config tidyconfig.txt