Estimated reading time: 6 minutes
ESLint VSCode Extension
First you’ll want to install the VSCode ESLint extension. Navigate to the Extensions tab and search for ESlint. Look for the one with the Microsoft checkmark then hit install:
Next, as the ESLint documentation will explain, you can install eslint globally.
npm install -g eslint
To begin using it, pick one of your projects (or create a new project folder). Be sure to open your terminal in VSCode, and cd (change directory) into the correct working folder.
Create a package.json file in the root of your current working folder (aka working directory). To do this you can run this command in your terminal:
This will create a package.json file. You’ll immediatelly be prompted to fill things out like description, author, license, etc. It’s okay to leave these things blank and hit enter until it asks “is this ok?” just hit Y for yes and then hit enter.
Next create an eslint configuration file with this command in your terminal:
npm init @eslint/config
Configure your ESLint file
You’ll be asked a series of questions. I answered these like so:
Q: Ok to proceed?
A: Y + Enter
Q: How would you like to use ESLint?
A: To check syntax and find problems
Q: What type of modules does your project use?
Answer this with how you use your code. For instance, I use React so import/export modules are necessary for me to check.
Q: Which framework does your project use?
This is another optional answer. If you’re not using Vue.js or React you can choose none.
Q: Does your project use Typescript?
I actually love using Typescript in React as it is another tool to idiot proof your code. But for this project, I’m not going to use it.
Q: Where does your code run?
Q: What format do you want your config file to be in?
I use json for all my config files so this just makes it easier for me to read.
Q: Local ESLing installation not found. The config that you’ve selected requires the following dependencies do you want to install them now?
Q: Which package manager do you want to use?
You should now have an eslint configuration file in your root project folder.
To see all of your ESLint settings:
Navigate to your VSCode settings by going to Code > Preferences > Settings and in the search bar start to type in eslint
Want to format your code on save? Check out how to use the Prettier VSCode extension here.
See warnings and errors in real-time
Now here is the beauty of ESLint in action. The function below is defined, meaning it has a value. It will print something out in the console but the iDoThings function has this red squiggly line below it. If I hover over that line, ESLint and VSCode are telling me why. The problem here is that I’ve assigned a value to this function but I haven’t called it yet. Pretty neat right?
Want to find out more ways to make your coding life easier? Check out tips and tricks to make your coding life easier.