How to ignore specific warnings outputted by the CSSLint extension for Brackets

Question

I'm using the CSSLint extension for Brackets. Is there a way to disable specific warnings for things like box-model and @bulletproof-font-face? The best match I've found for a discussion is here. At the moment I'm hoping to use a preamble in my CSS of the form /*csslint ignore: box-model */, but that's not working. I do know that this extension is able to work with .csslintrc files. I've attempted to put one in the same directory as where my CSS lives, with csslint ignore: box-model, but that didn't work either. Any advice or insights will be appreciated.

Update 1

Looking more into the support of .csslintrc files with Brackets, I've found this and this, which seems to suggest the use of --ignore=box-model,bulletproof-font-face. Putting this file either where my CSS lives or in the directory of the Brackets extension (~/.config/Brackets/extensions/user/camden.csslint/csslint on a Linux machine) doesn't work either.

Update 2

Putting .csslintrc in ~/.config/Brackets/extensions/user/camden.csslint/csslint/ definitely doesn't work; the file is removed after an update.

Aubrette

github.com/CSSLint/csslint/wiki/… – Argile

Answer 1

The latest version of the CSSLint plugin has added support for customization through Bracket’s Global Preferences, and this now appears the best way to ignore specific warnings. Since this response was marked as correct, I just wanted to update it to be as accurate as possible.

Customizing CSSLint is (somewhat) explained in the README.md that comes with the plugin, but it doesn’t include an example for a non-json-savvy person like me. I couldn’t figure out how to alter the settings on my own, so I contacted the developer (https://github.com/cfjedimaster/brackets-csslint/pull/40) to get more specific instructions:

Click “Debug” and select “Open Preferences File”, and that will open the brackets.json preferences file in the editor window.

Next, tell CSSLint to ignore specific listing options by including the following at the bottom of (or anywhere in) the existing code, as long as it’s contained within the preference’s all-enclosing curly-brackets:

"csslint.options": {
    "linting-option": false,
    "linting-option": false,
    "linting-option": false
}

Be sure to swap out each “linting-option” with the id name of the rule you’d like it to ignore, ensuring they’re set to false. The id name is included in round brackets each time a css-linting warning pops up in Brackets:

…or they can be found by digging through the csslint.js file mentioned above.

And that’s it! Much nicer than having to comment out each rule every time the plugin gets updated. :)

For reference/comparison, my preference file now includes the following at the bottom:

"csslint.options": {
    "adjoining-classes": false,
    "box-model": false,
    "box-sizing": false,
    "duplicate-background-images": false,
    "ids": false,
    "order-alphabetical": false,
    "qualified-headings": false,
    "unique-headings": false,
    "universal-selector": false
}

…and, so far, it’s working perfectly.

Note: The developers/contributors said this new approach was designed to survive subsequent plugin updates. However, since Global Preferences are a relatively recent addition, they can’t guarantee the preference settings will stick when updating Brackets, so creating a backup of your brackets.json preference file is recommended. On a Mac it can found here: /Users/username/Library/Application Support/Brackets/brackets.json

Sphincter

Answer 2

/*csslint box-model:false */

This works for me.

Blither

Interestingly, that doesn't work for me. Neither in Brackets or the online tool. – Aubrette

This works fine for me when every other attempt at using a .csslintrc file failed miserably. Note that the lack of white space is extremely important: it needs to be /*csslint, not /* csslint, otherwise it won't work. – Ghazi

Where exactly is this change supposed to be made? I’m really not digging the alphabetical-order warnings. – Sphincter

Can include this above the rule like so /*csslint universal-selector:false */ .my-css-class * { width: 100%; } and it suppressed the warning for me – Likelihood

Answer 3

As of a few days ago Brackets CSSLint supports global preferences. Just open it with Debug > Open Preferences File and add the rules you want to ignore like in the following example:

"csslint.options": {
    "qualified-headings": false,
    "ids": false
}

You can find the rule names by opening up the csslint code and searching for the warning you want to hide.

This is much more ideal than editing the extension code by hand every time it updates.

Odin

Crazy timing. You responded wile I was updating my “correct” answer with this exact information. You are correct this is the better way to do it. – Sphincter

Answer 4

In Sublime Text if you right click on a CSSLint page the menu will have the following path SublimeLinter > Mark Style > None.

This effectively leaves "warning" dots in the left margin without any highlighting in the code, so you don't get continually distracted by "in your face" reminders from the CSS police. You probably will remember that you're not writing perfect code, but at least won't be distracted while doing it, lol.

It's probably the same on other platforms/IDEs

"CSS... the Destroyer of Worlds, whose only remedy is a console that can interpret the insanity of Precedence, Specificity, and Inheritance."

Underarm