npm run lint all the time am I right?
"Would be pretty awesome to have my IDE run my linting automatically... But how?" - You.
You've come to the right place my friend! 🎉
Let's start with IntelliJ first because it's the easiest! It's usually already set up on IntelliJ (and subsequently WebStorm). In case it isn't, here are the steps to enable it.
I'm assuming you already have a
.eslintrc.* file in your project root directory. This is usually standard practice. If not, make one and put all your settings in there!
For context, the project I'll be using in this example is a Vue project.
Find your Settings (where this is differs for Windows/OSX)
Make sure that the "Automatic ESLint configuration" is checked! Like the screenshot says, it will use the ESLint package as well as the
.eslintrc.*to run the linter.
Now, in the files that you work on, the IDE will pick up any mistakes you made and highlight them for you to fix up! Easy!
VSCode is a little trickier to set up as it doesn't come with a tool to run ESLint out of a box. You have to install it as an extension.
The most popular ESLint extention by far is ESLint by Dirk Baeumer.
Once it is installed, make sure it is enabled (by clicking on the Enable button if it isn't already), and just like the setup for IntelliJ, check that your
.eslintrc.* file is in your project root!
Open the Command Palette
Search for this Command: "ESLint: Manage Library Execution"
A popup like below should show up asking if you want to allow the ESLint extension to run the ESLint you've installed in your project using the
.eslintrc.*config file. This is different to clicking the 'Enable' button after you install the ESLint Extension so make sure you don't skip this step! As for which option you should pick.
Allowwill just enable it for this project and you have to repeat these steps for all subsequent projects.
If you're linting
According to the official eslint-plugin-vue guide here, we need to create a
.vscode folder in the root directory of the project and within it, create a
Inside that file, you'll need to add a bit of extra config for the ESLint plugin to pick up
vetur setting is if you have the vetur plugin installed.
And that's it! Happy Linting!