ESLint is a tool that will analyze your JavaScript code and let you know if problems exist within it while you’re coding. If you want to avoid running into common syntax errors or other simple errors before you run your code in a JavaScript Runtime Environment like a browser, then you should start using ESLint today. You can use ESLint to make your coding life easier and I’ll show you how. To find out more about ESLint, check out their documentation here. In short, after setting up ESLint in VSCode, you’ll be able to find problems in your code and fix them before ever running it in the browser.
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 eslintTo 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:
npm initThis 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/configConfigure 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?
A: JavaScript modules (import/export)
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?
A: React
This is another optional answer. If you’re not using Vue.js or React you can choose none.
Q: Does your project use Typescript?
A: N
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?
A: Browser
Q: What format do you want your config file to be in?
A: JSON
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?
A: Yes
Q: Which package manager do you want to use?
A: npm
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.