Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Quick, simple JSLint (or JSHint) in TextMate. Hurt your feelings in style. (See the `development` branch for the latest.)
JavaScript CSS Ruby
tag: v1.2

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Commands
Preferences
Support/lib
.gitignore
.rvmrc
HISTORY
LICENSE
README.markdown
VERSION
info.plist

README.markdown

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.

JSLintMate screenshots

(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), including keyboard navigation.
  • Support for options files that can be kept in your home directory or in project repositories. These can be read not just by JSLintMate, but also by lint tools in other editors, continuous integration systems, automated testing systems, and other tools. Great for helping your team stick to the same coding standards.
  • 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

Usage

JSLintMate has two modes:

  • Quick mode shows a tooltip with the number of 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 writing JS code, hit command-S to save changes. JSLintMate automatically runs it through JSLint, and if it finds any problems, shows the number of problems 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 enter 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,
                eqeqeq:   true,
                immed:    false,
                newcap:   true,
                nomen:    false,
                onevar:   true,
                plusplus: false,
                undef:    true,
                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 use an options file to use your favorite JSLint/JSHint options across projects. By default, JSLintMate looks in your home directory for a ~/.jslintrc or ~/.jshintrc file.

    Your options file(s) should be in YAML format. The simple YAML file used by jslint_on_rails is a good example, but check the latest JSLint docs and JSHint docs for the exact option names and values.

    If you want to keep your options file somewhere else:

    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, 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 JSLint/JSHint 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,onevar:false
      

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. Options file
  3. JSLintMate's default options

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

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

This project is adapted from:

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.

Something went wrong with that request. Please try again.