A Textmate Bundle for CSSLint

CSSLint

A quick heads up, if you haven’t heard about the new CSSLint project from Nicole ## and Nicholas Zakas, you have been missing out. The project aims to take CSS to the next level and help you understand why your css isn’t performing very well. What, you didn’t know your CSS isn’t performing? Thats because most of us haven’t had a good Code Review on most of our CSS.

CSSLint for TextMate

First and foremost, I would like to say, I forked the original jsHint TextMate Bundle. If you don’t already have this, you need it. It will change the way you put together your JavaScript, just as I suspect CSSLint will do for your CSS.

I talked with Nicholas at the Velocity conference and decided I would put together a quick CSSLint TextMate Bundle that could make use of the Node Module for CSSLint. After a couple of hours playing with the way TextMate Does its bundles, I was able to get a working product. A Couple of quick emails back and forth and we have a Beta version of the CSSLint TextMate Bundle.

Installation

Installation is simple. Just download this file CSSLint TextMate Bundle. Unzip the contents, and then rename the file to csslint.tmbundle.

Once you have renamed, just double click on the icon, and it should automatically add it to TextMate.

Prerequisites

You need Node.js and TextMate, that’s all.

If you don’t have Node.js installed on your system you can also use Pierre Bertet’s fork which uses WebKit’s JavaScriptCore instead.

This bundle uses #!/usr/local/bin/node to launch the node process. If you get a node – not found error,the PATH variable is probably not setup in TextMate.

Features

A couple of quick highlights.

  • Runs automatically upon save (⌘S)
  • Can be bypassed by pressing ⇧⌘S
  • Output is only shown when errors are found
  • Based on Node.js

ScreenShot

Contributions

Feel free to contact me about any features you would like to see in the bundle. Or submit a pull request and I will take a look.

Cheers!

JC Fant

6 thoughts on “A Textmate Bundle for CSSLint”

  1. looking good.. but i got this error when i run it:

    node.js:50 throw e; // process.nextTick error, or ‘error’ event on first tick ^ Error: Cannot find module ‘https’ at resolveModuleFilename (node.js:246:13) at loadModule (node.js:212:20) at require (node.js:272:14) at Object. (/Users/rizky/Library/Application Support/TextMate/Bundles/csslint.tmbundle/Support/csslint-tm.js:3:9) at Module._compile (node.js:329:23) at Object..js (node.js:337:12) at Module.load (node.js:260:25) at loadModule (node.js:232:12) at require (node.js:272:14) at Object. (/tmp/temp_textmate.pdGmxn:4:11)

    1. Can you try doing a “which node” from the terminal and tell me where its installed?

      Here is mine:
      /usr/local/bin/node

      It seems maybe the path is incorrect? Or you two need to update to the latest nodeJS?

      JC

  2. Just downloaded this. Seems pretty awesome. One thing I’d recommend is to somehow make this SASS/LESS sensitive since those will pitch all kinds of lint errors, esp on the Save and Lint command. Depending on how you have those scoped, it may or may not be a problem. For example, SASS as source.sass wouldn’t have an issue, but source.css.sass (like I have) lints everytime I save.

    I did a little research and TM allows you to exclude selectors in the Scope Selector field for the commands and such. I found that changing the Scope Selector to “source.css – source.css.sass” works like a charm for SASS files. You may have to test and see about accommodating for the various CSS pre-processors and how they’re scoped. Might need something like (not 100% sure if this will work):

    “source.css – source.css.sass, source.css – source.css.scss, source.css – source.css.less”

  3. I might be missing something, but I get an error:

    The bundle “csslint.tmbundle” does not contain the required “info.plist” file (or that file is corrupt) and can therefore not be installed.

    Is there another dependency I’m missing?

Leave a Reply to JC Fant IV Cancel reply

Your email address will not be published. Required fields are marked *