We Keep Coding

Is there a way to resolve the Stylelint error for semicolons in CSS variables?

React.js
Css in JS(Emotion)
It consists of the above.
Stylelint is configured as follows.
module.exports = {
extends: [
"stylelint-config-standard",
"./node_modules/prettier-stylelint/config.js",
],
ignoreFiles: ["**/node_modules/**", "src/styles/**"],
plugins: ["stylelint-order"],
rules: {
"declaration-empty-line-before": "never",
indentation: 2,
"no-missing-end-of-source-newline": null,
"string-quotes": "single",
"order/properties-alphabetical-order": true,
},
};
CSS is as follows.
import emotionReset from "emotion-reset";
const globalStyle = css`
${emotionReset};
`;
The following error message appears for ${emotionReset};.
Unexpected extra semicolon (no-extra-semicolons)stylelint(no-extra-semicolons)
Error
Is there any way to resolve this error?
By the way, you will see the error, but the CSS is working.
I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.
no-extra-semicolons · stylelint

This looks like a valid warning. You should be able to fix it by removing the semicolon from the highlighted line.
Replace:
${emotionReset};
with:
${emotionReset}
By the way, you will see the error, but the CSS is working.
The extra semicolon generally won't break your CSS. But it doesn't add anything either, so it should be safe to remove it.
I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.
You can use null to disable a rule. See stylelint's configuration docs for more details.

I think this rule will work for you
"no-extra-semicolons": [
null,
{
"message": "Extra semi-colon."
}
],

gulp-less fails when using !important

When we use !important on a specific less variable, the build fails. We use !important all over the place and I have no idea what makes this one any different.
Setup:
customer1.less
#import "basefile";
#wrapper-height: auto !important;
...
basefile.less
#import 'variables/basefile-variables';
...
basefile-variables.less
#wrapper-height: auto;
...
Error when running gulp-less:
Error in plugin "gulp-less"
Message:
Cannot create property '_index' on string '!important' in file /<redacted>/customer1.less line no. 1
Details:
type: Syntax
filename: /<redacted>/customer1.less
index: NaN
line: 1
column: -1
callLine: NaN
callExtract: undefined
extract: ,#import "basefile";,
lineNumber: 1
fileName: /<redacted>/customer1.less

It could be that your variable #wrapper-height is hyphenated.
Try a var name like #wrapperHeight and see how Gulp handles that.
UPDATED:
Actually, you're trying to import basefile instead of basefile.less - try adding the .less file extension.

Can I enforce multiple levels for the same es lint rule. eg: error and warning for different paths

I am looking to enforce the no-restricted-imports rule in my codebase for specific imports.
However, I need to throw an error for some paths and warnings for others. Looks like I cannot do it by just doing :
'no-restricted-imports': [
'warn',
{
paths: [
{
name: 'd3',
message: 'd3 would be deprecated soon, please consider moving away from it'
}
]
},
'error',
{
paths: [
{
name: 'moment',
message: 'Use of moment is not allowed',
},
]
]
What would be the best way to achieve this behavior?
I have already tried defining the no-restricted-imports rule twice, once for error and once for warning, but since its an object, it gets overridden.

This is not possible in ESLint. A rule must either always warn or always error.

A combination of eslint-plugin-local and a small stub rule that references the no-restricted-imports rule directly from the eslint package could potentially get this working for you.
Not elegant by any stretch, but seems like it should be possible at least.

Vue eslinrc.js giving error when trying to add semi rule

I have set up the basic Vue.js 2 Quickstart app. One of the things I wanted was eslint. It's nice, but as a Java developer not having a semicolin at the end of the line is blasphemy. So I add this rule like this to my .eslintrc.js file:
// add your custom rules here
'rules': {
'semi': "always",
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
However, when I save it, I am getting this error:
Error: /asdf/code/vue/.eslintrc.js: Configuration for rule "semi" is invalid: Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"always"').
which does not match the documentation here: ESLint Rules
I am using Atom if that makes a difference.
I did try an use a "0" but that did not actually fix atom telling me there is a semi-colon everywhere.

How to change an IIFE with an argument to ES6. [duplicate]

I am using Grunt as my Build Tool and ESLint as my linting tool for an app I am working on. I am also using the Underscore Node package, and have made use of it in my app. Unfortunately, when I run ESLint on my code, it thinks that _ is an undefined variable in the following line:
return _.pluck(objects, nameColumn);
This is the error it is giving me:
78:21 error "_" is not defined no-undef
I would prefer not to disable the no-undef rule for ESLint, and I have tried installing the Underscore plugin, but I am still receiving this error. If anyone else has any ideas for what to try with this, I would be very appreciative!
If there is any further information I can give that would help anyone with helping me get this figured out, just let me know!

The official documentation should give you an idea on how to fix this.
Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/ comment, or specified in the globals key in the configuration file.
The easiest fix would be to add
/* global _ */
at the top of your file.
Or better, explicitly specify that the variable is read-only, to disallow overwriting the variable:
/* global _:readonly */
But since you'll have to do that for each new js file, it can get annoying. If you are using underscore often, I'd suggest to add globals to your .eslintrc file, for example:
{
"globals": {
"_": "readonly"
}
}
And save this as .eslintrc in your project root, or optionally in your user home directory. Although some say the latter not recommended, it can sometimes be convenient, but you have to remember that you have it there :)
Explanation of the above rule: "_": "readonly" (used to be "_": false, now deprecated) means that a variable named _ tells eslint that this variable is defined globally and it will not emit any no-undef errors for this variable. As #sebastian pointed out, "readonly" (or false - deprecated) means that the variable can't be overwritten, so the code _ = 'something else' would yield an error no-global-assign. If you were to instead use "_": "writable" (or "_": true - deprecated), this means that the value can be re-assigned and the previously mentioned error will not occur.
But keep in mind that this will only happen if you assign directly to the global variable as I have shown in the example. You can still shadow it and eslint won't say anything. For example, these snippets wouldn't yield the no-global-assign:
const _ = 'haha I broke your _'
or as function argument name, e.g.
function (_) {
console.log(_, 'might not be the _ you were looking for')
}

If you are using jest for testing - in your environment - in eslintrc.json
"env":{
"jest":true
}