ESLint

In this section, we will introduce ESLint, a powerful tool that helps you write better JavaScript code by identifying and fixing common errors.

You can find the ESLint documentation here.

What is ESLint?

ESLint is a code analysis tool for JavaScript. It examines your code without running it and flags patterns that might be mistakes or violations of certain style guidelines. This helps you catch errors early and maintain consistent coding practices across your projects.

Why Use ESLint?

If you’ve never used ESLint before, you might wonder why you need it. Here are a few reasons:

1. It helps you learn JavaScript best practices.
2. It catches common mistakes before they cause problems in your code.
3. It ensures consistency in your code style, which is especially important when working in teams.

Installing and Setting Up ESLint v9

To get started with ESLint v9, follow these steps:

1. Open your terminal or command prompt.
2. Make sure you’re in the root of your project.
3. Run the following command:

	npm init @eslint/config@latest

This command will start an interactive setup process to install and configure ESLint.

During the setup, you’ll be asked several questions about your preferred settings. You can choose the following options:

	✔ How would you like to use ESLint? · "To check syntax and find problems"
	✔ What type of modules does your project use? · "JavaScript modules (import/export)"
	✔ Which framework does your project use? · "None of these"
	✔ Does your project use TypeScript? · "No"
	✔ Where does your code run? · "Browser"

You’ll be prompted to install the necessary dependencies. Say yes to install them, and pick your package manager. If you’re using npm, choose npm.

ESLint will then create a configuration file (eslint.config.mjs) that looks like this:

	import globals from "globals";
	import pluginJs from "@eslint/js";
	
	export default [
	  { languageOptions: { globals: globals.browser } },
	  pluginJs.configs.recommended,
	];

This configuration file is used to tell ESLint which rules to use and how to use them.

Running ESLint

There are multiple ways to run ESLint:

• Run ESLint on the entire project:

	npx eslint

• Run ESLint on a specific file:

	npx eslint myFolder/myFile.js

• Run ESLint on a specific directory:

	npx eslint myFolder/**

The warnings will appear in the terminal. See below for using the VSCode extension instead.

What Problems Does ESLint Catch?

ESLint helps you find common mistakes like:

	export function logIn(name) {
	  return;
	}

ESLint will warn: ‘name’ is defined but never used

	loggedIn = true;

ESLint will warn: ‘loggedIn’ is not defined

Configuring ESLint for Our Project

When you try to lint the example repository, you’ll get a warning about module not being defined. This happens because our project uses a Tailwind configuration file that uses Node.js-style modules.

We also need to add some global variables that we’ll use later in our testing lessons.

Update your eslint.config.mjs to look like this:

	/** @type {import('eslint').Linter.Config[]} */
	export default [
	  {
	    languageOptions: {
	      globals: {
	        ...globals.browser,
	        describe: true,   // Used for grouping tests
	        test: true,       // Used to create tests
	        it: true,        // Alternative way to create tests
	        expect: true,    // Used for test assertions
	        require: true,   // Used in Node.js files like Tailwind config
	        module: true,    // Used in Node.js files like Tailwind config
	        process: true,   // Used for environment variables later
	      },
	    },
	  },
	  pluginJs.configs.recommended,
	];

This configuration keeps the browser globals we need and adds support for:

• Node.js globals needed for the Tailwind config
• Testing functions we’ll use in later lessons

Now ESLint won’t show warnings about these globals being undefined.

VSCode extension

Install the VSCode ESLint extension to get linting warnings directly in your files.