Pick a configuration to suit your needs or open an issue to request a new configuration
Run eslint from the command line
npm
$ npm run eslint src/**/*.js
Yarn
$ yarn eslint src/**/*.js
You can also add --fix
to automatically format / fix some errors
See all options here or run
$ yarn eslint --help
I would recommend adding a lint
npm script. See here
Also consider getting an editor integration
Create a .eslintignore
at the root of your project and add any libraries or files that eslint should ignore to it (similar to .gitignore
)
node_modules
src/assets/jquery.js
...
Linters are never perfect and ESLint is no different. Sometimes it can get things wrong. You do have some options however if this happens
It if fairly likely that eslint is upset for a good reason. Before immediately using the escape hatches provided below, try to refactor the code to avoid the error all together.
// Before
window.foo = 'bar';
// ...sometime later
baz(window.foo);
// After
const FOO = 'bar';
// ...sometime later
baz(FOO);
Sometimes there are global variables in your code that you have no control over. In this case you can register the global in .eslintrc
. jquery
, for example, is a common use case for this. A side benefit is you end up with a list of the globals in your app.
{
"globals": {
"jquery": true,
"$": true
}
}
Sometimes there is more than just javascript in your file (for example in .liquid
) files and eslint will fail to parse. Here are some tricks to avoid this
Don't use liquid in javascript. No seriously, avoid if at all possible
Wrap the liquid in quotes
const foo = {{ foo }}; // ERROR
const foo = '{{ foo }}'; // VALID
Use javascript to do logical operations
{% if foo == true %}
console.log('yay!') // ERROR
{% endif %}
const foo = '{{ foo }}';
if (foo === 'true') { // VALID
console.log('yay!')
}
If all else fails you can use comments to let eslint know not to report errors. For example this disables a console warning on the proceeding line
// eslint-disable-next-line no-console
console.log(foo)
Notice that the name of the error is listed. While not strictly required it is good practice. If you need to disable multiple rules they can be separated with a comma
// eslint-disable-next-line no-console, no-undef
console.log(foo)
If you absolutely have to you can also disable a block of code
/* eslint-disable no-console */
console.log('foo')
console.log('bar')
/* eslint-enable no-console */
And yes, the type of comment matters (//
or /* */
)
Install the eslint
extension
If you are linting non .js
files add them to settings
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "liquid" },
{ "language": "my-language" }
]
Here we are linting js, jsx, and liquid
If you would like to automatically format javascript on save add
"eslint.autoFixOnSave": true,
If it is a different language add it under eslint.validate
instead
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "liquid", "autoFix": true },
{ "language": "my-language", "autoFix": true }
]
You may also want to consider disabling any other js formatters such as the "editor.formatOnSave"
setting or the prettier
extension