JSLintMate

Quick, simple JSLint and JSHint in TextMate. Hurt your feelings in style.

JSLintMate uses Ruby and JSC behind the scenes; both are part
of OS X by default. No need to install anything else. Everything works
offline.

Download JSLintMate.tmbundle

(CSS geeks: Only three images are used throughout the UI. The red, striped
error uses only CSS.)

What are these things? JSLint is a powerful JS code quality tool
from expert Douglas Crockford. JSHint is a community-driven project
based on JSLint, and is more tolerant of common JS patterns. (They're not the
same as JavaScript Lint.)

Key features

• Quick JSLint/JSHint on command-S.
• Full problem details on control-L (JSLint) or control-shift-L
  (JSHint)—both customizable. Navigate the list with full
  mouse/trackpad/keyboard support.
• Support for options files that help you—and your teammates—use
  the same coding standards everywhere. Options files can live in your home
  directory or in project repositories. They use standard JSON/YAML, so they can
  be read not just by JSLintMate, but also by teammates' lint tools in other
  editors, automated testing systems, continuous integration systems, and more.
• Support for using your own custom or edge build of JSLint or JSHint.

Setup

Download JSLintMate.tmbundle and double-click it.
TextMate should install it for you automatically—that's all.

Or via Git:

# To install for the first time:
mkdir -p ~/Library/Application\ Support/TextMate/Pristine\ Copy/Bundles
cd ~/Library/Application\ Support/TextMate/Pristine\ Copy/Bundles
git clone git://github.com/rondevera/jslintmate.git "JavaScript JSLintMate.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'
  # Alternatively, switch to TextMate and select
  # Bundles > Bundle Editor > Reload Bundles.

# To update to the latest version:
cd ~/Library/Application\ Support/TextMate/Pristine\ Copy/Bundles
git pull

TextMate 2

Installation: While TextMate 2 is in development, installation is
temporarily a bit more involved:

1. Download JSLintMate.tmbundle and unzip it.
2. Create the bundles path: mkdir -p ~/Library/Application\ Support/Avian/Pristine\ Copy/Bundles/.
3. Open the same path: open ~/Library/Application\ Support/Avian/Pristine\ Copy/Bundles/.
4. Drop JavaScript JSLintMate.tmbundle into the Bundles directory.

Project setup: It's worth creating a .tm_properties file in your project
directory containing this (source):

projectDirectory     = "$CWD"
TM_PROJECT_DIRECTORY = "$projectDirectory"

This lets you use $TM_PROJECT_DIRECTORY in your JSLintMate settings, which is
useful for pointing to project-specific JSLint/JSHint options and custom builds.

Display: In TextMate 2, JSLintMate runs in a panel in the main window,
rather than in a separate window. To make TextMate 2 open JSLintMate in a
separate window, run this in Terminal
(source):

defaults write com.macromates.TextMate.preview htmlOutputPlacement window

Usage

JSLintMate has two modes:

• Quick mode shows a tooltip with a preview of the problems (if any)
  whenever you hit command-S.

• Full mode shows a full list of problems whenever you hit control-L
  (JSLint) or control-shift-L (JSHint).

Quick mode

While you're coding, hit command-S to save changes and automatically run the
file through JSLint. If any problems are found, JSLintMate shows a few of them
in a tooltip.

If you'd prefer to run JSHint on save:

1. Select Bundles > Bundle Editor > Show Bundle Editor.
2. Expand JavaScript JSLintMate and highlight Linters.
3. Change the value for TM_JSLINTMATE_DEFAULT_LINTER to jshint, then
   close the window to save changes.

If you don't want JSLintMate to do anything on save, open the Bundle Editor
window again, and remove the keyboard shortcut for the Run JSLintMate and
Save command.

To skip the tooltip and see the full list of problems, use full mode.

Full mode

To see the full list of problems in a JS file, hit control-L to run it
through JSLint, or control-shift-L to use JSHint. Click a problem to jump
to that line in the file. Fix and repeat.

You can also navigate the list of problems with your keyboard: up/down/k/j
to move up/down, and return to select.

Options

If JSLint or JSHint are too strict or lenient for your taste, you can set
options for each. These options serve as a barebones code style guide, and let
teammates stick to the same standards. Three ways to do this:

Set options at the top of each JS file

Adding options atop each JS file gives you fine-grained control. For
example:

  /*jslint  browser:  true,
            newcap:   true,
            nomen:    false,
            plusplus: false,
            undef:    false,
            vars:     false,
            white:    false */
  /*global  window, jQuery, $, MyApp */

This example is specifically for JSLint. To use it with JSHint, change
/*jslint to /*jshint and tweak options as needed.

The exact option names and values change occasionally. For the latest,
check the JSLint docs and the
JSHint docs.

Keep a personal options file

You can maintain an options file to use your favorite JSLint/JSHint options
across projects. These files can be written in JSON or YAML.

JSLintMate comes with some example options files:
jslint.json, jslint.yml,
jshint.json, and jshint.yml. To use one of
these, save a copy as ~/.jslintrc or ~/.jshintrc. JSLintMate reads from
these paths by default, and automatically detects whether they contain JSON
or YAML.

If you want to rename your options files or store them elsewhere:

1. Within TextMate, select Bundles > Bundle Editor >
   Show Bundle Editor.
2. Expand JavaScript JSLintMate and highlight Options Files.
3. Change the values for TM_JSLINTMATE_JSLINT_OPTIONS_FILE and
   TM_JSLINTMATE_JSHINT_OPTIONS_FILE to the file paths you prefer.

Keep an options file in your project

You can also store your options file in your project. This is great for
sharing options with collaborators—everyone uses the same options
for all JS files, and different projects can have different options.

To set this up:

1. Within TextMate, select Bundles > Bundle Editor >
   Show Bundle Editor.
2. Expand JavaScript JSLintMate and highlight Options Files.
3. Change the value for TM_JSLINTMATE_JSLINT_OPTIONS_FILE to
   a path in your project, e.g.,
   $TM_PROJECT_DIRECTORY/config/jslint.yml. Do the same for JSHint if
   needed, making sure to use a separate options file.

Options files are meant to be understood by a wide variety of tools, not
just JSLintMate. This includes lint tools in other editors, continuous
integration systems, and other automated testing systems.

Deprecated: Specify global options for use across projects

Here's the old way to maintain personal, cross-project options. This
feature will be removed in an upcoming version. Please use a
~/.jslintrc or ~/.jshintrc file via the "Options Files" preferences
instead. Bundle commands no longer need to be modified directly.

1. Within TextMate, select Bundles > Bundle Editor > Edit Commands >
   JavaScript JSLintMate > Run JSLintMate.

2. Add your list of options as --linter-options. For example:

     ruby "$TM_BUNDLE_SUPPORT/lib/jslintmate.rb" \
       --linter-options=browser:true,white:false
   

Options file fallbacks

TM_JSLINTMATE_JSLINT_OPTIONS_FILE and TM_JSLINTMATE_JSHINT_OPTIONS_FILE
support options file fallbacks. Change each setting to a colon-separated list of
file paths, and JSLintMate will use the first readable file in each list.

For example, $TM_PROJECT_DIRECTORY/config/jslint.json:~/.jslintrc tells
JSLintMate to first look for a project-specific options file (e.g., for options
shared with a team). If this file is not readable, JSLintMate uses your personal
options file as a fallback.

Option precedence

If you specify options in your JS files and in options files, they'll be
merged at runtime:

1. Highest precedence: Options in the JS file, e.g.,
   /*jslint browser: true */
2. First readable options file
3. JSLintMate's default options

For more info, read about JSLint's options and
JSHint's options.

Unused variables

JSLintMate reports warnings from JSLint/JSHint about variables that are declared
but not used. It's good to clean up code by removing unused variables, but if
you'd rather not see these warnings:

1. Within TextMate, select Bundles > Bundle Editor > Show Bundle Editor.
2. Expand JavaScript JSLintMate and highlight Unused Variables.
3. Change the value of TM_JSLINTMATE_WARN_ABOUT_UNUSED_VARIABLES to false.

To resume seeing warnings about unused variables, set this value back to true.

Custom JSLint/JSHint builds

JSLintMate is packaged with copies of JSLint and JSHint, but you can use your
own copies instead. This is useful for testing an edge build or using your
own modified version.

If you store a copy of your linter in your project, point your bundle prefs at
it:

1. Within TextMate, select Bundles > Bundle Editor > Show Bundle Editor.
2. Expand JavaScript JSLintMate and highlight Linters.
3. Change the value for TM_JSLINTMATE_JSLINT_FILE to point to your linter.
   This could be a path in your project (e.g.,
   $TM_PROJECT_DIRECTORY/lib/jslint.js), a path in your home directory
   (e.g., ~/lib/jslint.js), or anything else. If needed, do the same for
   JSHint, making sure to use a separate linter file.

About

• Sharing: Link to the official JSLintMate page or use the
  short URL for this repo!
• Contributing: Found a bug or have a suggestion? Please open an
  issue or ping @ronalddevera on Twitter. If you want to
  hack on some features, feel free to fork and send a pull request for the
  development branch. (The master branch is for stable builds
  only.)
• History: History/changelog for JSLintMate
• Compatibility: Tested with OS X 10.6+, Safari/WebKit 5+ (6533+), and
  TextMate 1.5.10+ (including TextMate 2.0a). Probably works with older
  software, but it's not guaranteed.

This project is adapted from:

• http://www.phpied.com/jslint-on-mac-textmate/
• http://wonko.com/post/pretty-jslint-output-for-textmate
• http://blog.pulletsforever.com/2009/07/09/running_jslint_with_safaris_javascript_core/

JSLintMate is released under the MIT License. The bundle contains
copies of JSLint and JSHint, which use their own license(s). Use JSLintMate
for good, not evil.