I am importing a script in webpack, it all works but eslint is throwing the error 'modal is assigned a value but never used'. Do have to declare the const as a global or export the module to fix the error ?
modules.vanillaModal.js :
import VanillaModal from 'vanilla-modal';
// Create instance
const modal = new VanillaModal({
modal: '.c-modal',
modalInner: '.js-modal__inner',
modalContent: '.js-modal__content',
open: '[rel="js-modal:open"]',
close: '[rel="js-modal:close"]',
class: 'js-modal--visible',
loadClass: 'js-modal--loaded',
});
and my webpack entry
index.js:
require('./modules.vanillaModal.js');
This is an eslint rule http://eslint.org/docs/rules/no-unused-vars. It prevents you from creating variables that you never use, which causes code clutter or could mean you're using variables that aren't what you think they are.
If you're using a poorly designed library where the class constructor has side effects (which it isn't supposed to), and you don't need to do anything with the returned value from the class, I would disable that specific eslint rule for the create line with eslint disable comments:
// eslint-disable-next-line no-unused-vars
const modal = new VanillaModal({
modal: '.c-modal',
modalInner: '.js-modal__inner',
modalContent: '.js-modal__content',
open: '[rel="js-modal:open"]',
close: '[rel="js-modal:close"]',
class: 'js-modal--visible',
loadClass: 'js-modal--loaded',
});
You can also wrap any block of code with eslint specific comments to disable a rule for that block:
/* eslint-disable no-unused-vars */
const modal = new VanillaModal({
...
});
/* eslint-enable no-unused-vars */
According to the documentation of the no-unused-vars rule, you should be able to just add an EsLint configuration comment to declare the variable as exported to be used elsewhere.
/*exported modal*/
const modal = new VanillaModal({
modal: '.c-modal',
modalInner: '.js-modal__inner',
modalContent: '.js-modal__content',
open: '[rel="js-modal:open"]',
close: '[rel="js-modal:close"]',
class: 'js-modal--visible',
loadClass: 'js-modal--loaded',
});
It will work with constants too.
I find this better than disabling and re-enabling the rule again because I just need one comment instead of two.
Add "varsIgnorePattern:" to .eslintrc file
"no-unused-vars": ["warn", { "varsIgnorePattern": "VARIABLE_NAME"}]
https://eslint.org/docs/rules/no-unused-vars#varsignorepattern
Do you have .eslintrc.js file ?
simply add :
"rules": {
"no-unused-vars": 0
}
Related
I need to disable some variable checks in ESLint.
Currently, I am using this code, but am not getting the desired result:
/* eslint no-unused-vars: ["error", { "caughtErrorsIgnorePattern": "Hey" }] */
export type Hey = {
a: string,
b: object
}
Two questions:
Is there a variant which can enable no-unused-vars for a block of code?
Something like...
/* eslint rule disable"*/
// I want to place my block of code, here
/* eslint rule disable"*/
Or could I make Hey a global variable so that it can be ignored everywhere?
To disable the #typescript-eslint/no-unused-vars warning:
For the current line:
const unusedVar = 1; // eslint-disable-line #typescript-eslint/no-unused-vars
For the next line:
// eslint-disable-next-line #typescript-eslint/no-unused-vars
const unusedVar = 1;
For a block:
/* eslint-disable #typescript-eslint/no-unused-vars */
const unusedVar1 = 1;
const unusedVar2 = 2;
/* eslint-enable #typescript-eslint/no-unused-vars */
Original answer
Just use pair of lines:
/* eslint-disable no-unused-vars */
// ... your code here with unused vars...
/* eslint-enable no-unused-vars */
Alternatively, you can disable the rule for one line:
// Based on your Typescript example
export type Hey = { // eslint-disable-line no-unused-vars
a: string,
b: object
}
One more option...
function doStuff({
// eslint-disable-next-line no-unused-vars
unused,
usedA,
usedB
}) {
For typescript eslint users just add this at the end of line you wish to ignore:
// eslint-disable-line #typescript-eslint/no-unused-vars
If you've got multiple overlapping rules that you want to ignore (e.g. typescript and standard js), you can specify more than one rule to ignore by separating by a comma:
// eslint-disable-next-line no-unused-vars, #typescript-eslint/no-unused-vars
For anyone wondering why it doesnt work with
// eslint-disable some-rule/specific-rule
just enclose the same disable statement in multiline comment and it will work.
/* eslint-disable some-rule/specific-rule */
encapsulating eslint rules in multiline comment work for the whole block.
So if you put multiline comment at the start of a function, it will disable that rule for the whole function block. If you put it at the start of a file, it will disable that rule for the whole file.
Define ESLint configuration in package.json like this
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"no-unused-vars": "off"
}
}
I've been a long time user of Standard, and now that I'm working on a new project, I've been asked to start writing semicolons.
I'm trying to use both xo, Babel and React, but I keep getting an error when I try to lint my code:
document is not defined. no-undef
I've tried adding an env option to the xo field in my package.json file, but no success.
My xo config:
"xo": {
"esnext": true,
"extends": "xo-react",
"space": true,
"rules": {
"react/jsx-space-before-closing": 0
}
}
It is cumbersome to specify linting options such as /** global document **/ and edit a configuration file every time you use a global.
This error can be suppressed by using --env=browser option:
xo --env=browser [<file|glob> ...]
Note: Same problem comes with Node.js, where the linter will complain that require and friends are not defined. The switch has to change to --env=node in that case.
However, XO defaults the env to node, therefore this will not be a problem in most cases. You will need multiple environments if your project contains both client and server files. in that case, --env switch can be set multiple times:
xo --env=browser --env=node [<file|glob> ...]
You have to define globals in ESLint. There are two ways to accomplish this, firstly as a comment in your code:
/* global document */
Or you can configure in configuration file like so:
{
"globals": {
"var1": true,
"var2": false
}
}
See the ESLint docs for more
I have a few functions that are defined in one js file and used in others. They each have /* exported functionName */ comments and I have my eslint env set to browser/jquery. Based on my reading of the documentation that's all I should need, but it doesn't seem to be working.
What am I doing wrong here?
Here's the .eslintrc (it extends this one, although I get the same behavior without the extends):
{
"extends": "../../.eslintrc",
"env": {
"browser": true,
"jquery": true
}
}
And, here's one of the functions (here's the second and third):
/**
* Returns the next hour as Date
* #return {Date} the next hour
*/
/* exported nextHour */
function nextHour() {
var oneHour = new Date();
oneHour.setHours(oneHour.getHours() + 1);
return oneHour;
}
Finally, this is the output I get from eslint:
/Users/nfriedly/visual-recognition-nodejs/public/js/demo.js
24:10 error 'nextHour' is defined but never used no-unused-vars
37:10 error 'resize' is defined but never used no-unused-vars
/Users/nfriedly/visual-recognition-nodejs/public/js/use.js
26:10 error 'setupUse' is defined but never used no-unused-vars
It works if I replace the /* exported... comment with an // eslint-disable-next-line no-unused-vars but I know that's not the correct solution.
You can check out the complete project from https://github.com/watson-developer-cloud/visual-recognition-nodejs/tree/eslint-exported and then just run npm install; npm test if you want to see it for yourself.
Apparently the Babel-ESLint parser that the airbnb config specifies can override the parsing of config files to break the documented cascading behavior. Setting "parser": null resolves this.
Your config states that you are working in Node environment. Node has an extra scope around every module, so global variables are not really possible in Node (at least not in the same way as in browser). As such, when no-unused-vars rule sees any environment with globalReturn flag on (Node, CommonJS, shared-node-browser) or modules on, it ignores /* exported */ comments. You need to remove Node environment and enable browser environment if you want to use global variables and exported comments.
I uses RequireJS AMD in my project. When i run jshint on my project, it throws error like
In AMD Scripts
'define' is not defined.
In Mocha test cases
'describe' is not defined.
'it' is not defined.
How to remove this warning in jshint?
Just to expand a bit, here's a .jshintrc setup for Mocha:
{
....
"globals" : {
/* MOCHA */
"describe" : false,
"it" : false,
"before" : false,
"beforeEach" : false,
"after" : false,
"afterEach" : false
}
}
From the JSHint Docs - the false (the default) means the variable is read-only.
If you are defining globals only for a specific file, you can do this:
/*global describe, it, before, beforeEach, after, afterEach */
jshint: {
options: {
mocha: true,
}
}
is what you want
To avoid the not defined warning in jshint for the javascript add comments like:
/*global describe:true*/
Options
Add this in your .jshintrc
"predef" : ["define"] // Custom globals for requirejs
late to the party, but use this option in your jshintrc:
"dojo": true
and thou shall rest peacefully without red warnings...
If you are working on node js. Add these two lines in the beginning of your file
/*jslint node: true */
"use strict";
Read the docs and search for /*global
If you're trying to run JSHint in WebStorm with Mocha, as I am, go into:
WebStorm > Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > JSHint
Scroll down to "Environments" and make sure you have selected the checkbox to enable "Mocha" which will set up the definitions for JSHint for Mocha for you.
I'm trying to use lint with Grunt. I'm able to run Grunt from the command line but it is giving me a lot of errors. Mostly "'$' is not defined". Even alert is throwing an error, "'alert' is not defined".
How can I get around those?
You need to tell JSHint (which is the linter that Grunt uses by default) about the global variables available to the files being linted. I'm assuming that you're including jQuery on your pages, hence the $ identifier (could be various other libraries of course).
You can either specify global variables in each file, or in the Grunt script. To specify them in a file, you can use a global directive. Place this at the top of the file, or at the top of the function in which you use the global:
/*global $:false */
Note that the false means you'll get errors if you override $. If you need the ability to do that, change it to true.
If you'd prefer to specify globals in the Grunt script, you can add a globals property to any of the tasks in your jshint section. For example:
grunt.initConfig({
jshint: {
someTask: {
globals: {
$: false
}
}
}
});
As for the alert message you're getting, you need to tell JSHint that you're allowing the use of development functions, such as alert and console.log. To do that, you can use a jshint directive in the files (just like the global directive):
/*jshint devel:true */
Or you can add an options property to the task in the Grunt script:
someTask: {
globals: {
$: false
},
options: {
devel: true
}
}
See the JSHint docs for all of the options available to you.
globals must be inside options
someTask: {
options: {
devel: true,
globals: {
$: false
}
}
}