Visual Studio Code + ESLint Setup Guide

Learn how to set up Visual Studio Code with ESLint so you can visually see linting errors within your VSCode text editor.

We use a nodejs, express and react project to show how easy it is to get started with eslint inside visual studio code.

[sergiotrujillo]

Sir, Your keyboard sounds magnificent, thanks for well explained tutorial

[FordExplorer-rmew]

This makes a very good boilerplate, better than most on YT.

The more shill like dev YouTubers would have split this into 4 parts so they can keep shilling.

[plaksavladyslav]

Thank you very much for a simple clear explanation

[jlumley]

the solution is to use "npx eslint --init"

[skirllexrude]

Help me to understand why we are installing vscode extension and then npm eslint package.Vscode eslint is for visual clue I got that.I can able to create a eslint config file by ctrl+shift+p and type eslint there you can see a option create eslint configuration file and it will ask some configuration questions like which style guide you need ....If I can create config file and see visual clue by vscode eslint extension itself then why do I need eslint npm package

[TheNamesJT]

Umm, so I followed your steps but, in the botton right corner there is an icon with a stop sign then eslint i click it and it says there isn't an eslint configuration found?

[szabolcsjobbagy]

Thanks a lot!! ESLint is great, and the explanation too!!

This is how I set the config in the .eslintrc.json,
which ones do you find "dangerous" or problematic among my rules?


"rules": {
"linebreak-style": "off",
"semi": "off",
"comma-dangle": "off",
"quotes": ["error", "double"],
"quote-props": "off",
"indent": ["error", 4],
"padded-blocks": "off",
"prefer-arrow-callback": "off",
"prefer-template": "off",
"func-names": "off",
"brace-style": "off",
"prefer-const": "off",
"eqeqeq": "off",
"no-shadow": "off",
"no-irregular-whitespace": ["error", { "skipComments": true }],
"no-unused-vars": "warn",
"space-infix-ops": "warn"
}

Thanks a lot in advance! :)

[theillyri]

Great intro,
How do I configure Es Lint to do it's magic when I click save in VS Code though?

[ayushilahariya]

Did the exact steps but still eslint not working

[pgtips]

eslint --init bash: eslint: command not found

[ghostkick]

Well, you use npm command, it would be great to mention that because I dont have NPM and never heard about it. Was wondering why it doesnt work... but another problem I have is, after I installed NPM I still cant run npm commands, ugh. Will need to google all that and come back when it works :)

[kensleylewis]

very confusing. why are you installing it as an VSCode extension, if you are also installing it as an npm package?

[jlumley]

eslint --init doesn't it says "The term 'eslint' is not recognized as a name of a cmdlet.

[doktork]

My disgusting life has taught me nothing is that simple, and it was proven right once again...
So many problems and it is taking me hours to solve them.... super rare bug messed up the installation of npm, then npm installs eslint, no problem there, then eslit is not fuckign recognized and so on, barely making it through the next error. My life has always been like this... nothing works for me

[anastasiyaboiko]

after eslint -- init nothing has happened. Nice guide