Have sass-lint ignore a certain line?
I'm using sass-lint with Gulp. How can I disable warnings for a particular style in my sass from the lint console output?
I've found a similar question but I'm using sass-lint, not scss-lint: Having scss-lint ignore a particular line
This is the one I'm using: https://www.npmjs.com/package/gulp-sass-lint
I've tried a few variations based off of the scss-lint project:
// scss-lint:disable ImportantRule
// sass-lint:disable ImportantRule
// sass-lint:disable no-important
Just to be clear, I want to disable warnings for a specific style in my SASS, not globally. I will use this when the thing triggering the warning is intentional. For instance I might set multiple background styles so one can be a fallback for older browsers. But currently this is triggering the no-duplicate-properties warning.
Disabling through comments
Update per December 2016 according to the docs this will now be possible using this syntax:
Disable more than 1 rule for entire file
// sass-lint:disable border-zero, quotes p { border: none; // No lint reported content: "hello"; // No lint reported }
Disable a rule for a single line
p { border: none; // sass-lint:disable-line border-zero }
Disable all lints within a block (and all contained blocks)
p { // sass-lint:disable-block border-zero border: none; // No result reported }
New info courtesy of commenter @IanRoutledge.
However, before, if you wanted to disable certain rules, but only for specific code blocks and/or pieces of the code. As far as I can tell from the underlying source code it would not be possible with sass-lint. I've tried a few other searches as well, and skimmed the code base in general, but found no hint that the feature you're looking for exists.
For comparison, this query for the scss-lint source code clearly shows it is implemented there, in a fashion that doesn't seem to have an analogous solution in the lib you are using.
Disabling through yml configs
You can disable rules in general though. You need to have a .sass-lint.yml
file to disable warnings.
Suppose you have this gulpfile.js
:
'use strict';
var gulp = require('gulp'),
sassLint = require('gulp-sass-lint');
gulp.task('default', [], function() {
gulp.src('sass/*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
});
And this package.json
:
{
"devDependencies": {
"gulp": "^3.9.0",
"gulp-sass": "^2.1.1",
"gulp-sass-lint": "^1.1.1"
}
}
Running on this styles.scss
file:
div { dsply: block; }
You get this output:
[23:53:33] Using gulpfile D:\experiments\myfolder\gulpfile.js
[23:53:33] Starting 'default'...
[23:53:33] Finished 'default' after 8.84 ms
sass\styles.scss
1:7 warning Property `dsply` appears to be spelled incorrectly no-misspelled-properties
1:21 warning Files must end with a new line final-newline
??? 2 problems (0 errors, 2 warnings)
Now if you add a .sass-lint.yml
file next to the gulpfile, with this content:
rules:
no-misspelled-properties: 0
You'll instead see:
[23:54:56] Using gulpfile D:\experiments\myfolder\gulpfile.js
[23:54:56] Starting 'default'...
[23:54:56] Finished 'default' after 9.32 ms
sass\styles.scss
1:21 warning Files must end with a new line final-newline
??? 1 problem (0 errors, 1 warning)
One of the warnings is now ignored.
The sass-lint readme.md links to the apparent default config which has some more examples.
As of sass-lint 1.10.0 it's been possible to disable sass-lint rules via source comments
Below are the different permutations of this, intentionally almost identical to the scss-lint way before.
Disable a rule for the entire file
// sass-lint:disable border-zero
p {
border: none; // No lint reported
}
Disable more than 1 rule
// sass-lint:disable border-zero, quotes
p {
border: none; // No lint reported
content: "hello"; // No lint reported
}
Disable a rule for a single line
p {
border: none; // sass-lint:disable-line border-zero
}
Disable all lints within a block (and all contained blocks)
p {
// sass-lint:disable-block border-zero
border: none; // No result reported
}
a {
border: none; // Failing result reported
}
Disable and enable again
// sass-lint:disable border-zero
p {
border: none; // No result reported
}
// sass-lint:enable border-zero
a {
border: none; // Failing result reported
}
Disable/enable all linters
// sass-lint:disable-all
p {
border: none; // No result reported
}
// sass-lint:enable-all
a {
border: none; // Failing result reported
}
The sass-lint readme includes all of the details and the docs have been updated too.
The grunt, gulp and atom plugins have all been updated too to require v1.10 and above so a quick reinstall of these or an update and you'll be ready to go.
We're sorry it took so long to come out but we had to fix a few issues in our AST before we were confident of them being useful.
Disabling linting rules for specific lines is supported as of sass-lint 1.10.
https://github.com/sasstools/sass-lint#disabling-linters-via-source
As yet sass-lint does not support disabling rules on a per-file or per-line basis. They have a long-standing GitHub issue tracking the feature.