Setup SublimeLinter with Linters for Javascript and Stylus

setup-sublimelinter.md

Setup SublimeLinter with Linters for Javascript and Stylus

• What we want to achieve
• Preparations
  • NVM, zsh, oh-my-zsh
• Install Sublime Packages

---

What we want to achieve

We want live code linting in Sublime Text 3 while editing Javascript and Stylus using JSHint, JSCS and Stylint.

Preparations

Make sure Node.js is installed properly and you know your path to your node executable and global module binaries (if not, which node may help).

Install the necessary global packages:

npm install -g jshint jscs stylint

NVM, zsh, oh-my-zsh

If you are using NVM, the binary path may change often. I recommend creating a symlink to your current node version directory and update it if your node version changes:

cd ~/.nvm/versions/node
ln -s v0.12.7 current

If any Sublime Package (or other thing) needs to know the path to node and its binaries you can use this path from now on:

/Users/foo/.nvm/versions/node/current/bin

If you are using NVM in combination with zsh, make sure your source ~/.nvm/nvm.sh entry is in your ~/.zshenv and not in your ~/.zshrc (same for all necessary PATH exports you may need).

If your are using oh-my-zsh, do not use the NVM plugin to load NVM.

Install Sublime Packages

You should have setup Sublime Package Control.

Make sure other linting packages are disabled or uninstalled.

Bring up the Command Palette (⇧⌘P), type install package and install the following packages:

• SublimeLinter
• SublimeLinter-jshint
• SublimeLinter-jscs
• SublimeLinter-contrib-stylint

Open your SublimeLinter user preferences (if empty, copy contents from default preferences).

Within the paths property, add the path to node binaries for your os.

Restart sublime. After that, your SublimeLinter user preferences should contain entries for your linters like this:

{
	"user": {
		"linters": {
            "jscs": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "stylint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        }
    }
}