# 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 a complete 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, install **[PackageControll](https://sublime.wbond.net/installation)**,
   if you haven't already.
2. Then install
   **[SublimeLinter](https://github.com/SublimeLinter/SublimeLinter3)** via
   Package Control

## JavaScript lint with JSHint

1. Install
   **[SublimeLinter-jshint](https://github.com/SublimeLinter/SublimeLinter-jshint)**
   package via Package Control.
2. Install the actual **[JSHint](http://www.jshint.com/docs/)**:
   `$ sudo npm install -g jshint`

### Configuring JSHint

Throw a `.jshintrc` in the project root, and define the options there.
[Here's a list](http://www.jshint.com/docs/options/) of available options.

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

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

## SCSS lint with scss-lint

1. Install
   **[SublimeLinter-scss-lint](https://github.com/attenzione/SublimeLinter-scss-lint)**
   via package control
2. Install the actual **[scss-lint](https://github.com/causes/scss-lint)** to
   your system: `$ sudo gem install scss-lint`

[See my post on CSScomb](/make-alphabetising-css-properties-in-sublime-text-easy-with-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 good out of the box. I 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](https://github.com/SublimeLinter/SublimeLinter-html-tidy)

[SublimeLinter-html-tidy](https://github.com/SublimeLinter/SublimeLinter-html-tidy)
comes with [HTML4](http://tidy.sourceforge.net/) or
[HTML5](http://w3c.github.io/tidy-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:

```shell
$ 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:

```shell
$ 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](https://github.com/SublimeLinter/SublimeLinter-html-tidy/issues/9)
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:

```json
"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:

```shell
$ tidy -config tidyconfig.txt
```