ESLint

ESLint is a “linter”, a genre of tool that examines our code and lets us know about potential issues.

Often, the things it catches are around “code organization”. For example, ESLint will warn you if a variable is never used:

const a = 1;
const b = 2;
const c = 3; // Warning: 'c' is assigned a value but never used

console.log(a + b);

It can also help us catch potential usability / accessibility issues. For example, if we forget to add “alt” text to an image tag in React:

function SomeComponent() {
  return (
    <img
      // Warning: img elements must have an alt prop, either with
      // meaningful text, or an empty string for decorative images
      src="/cat.jpg"
    />
  )
}

ESLint is highly configurable. It comes with dozens of built-in rules, and supports community-developed extensions. The rule shown above, about the missing “alt” text, is part of the jsx-a11y extension, which adds accessibility-focused ESLint rules for JSX files.

In general, we don't need to add/remove rules ourselves. For example, Next.js has an ESLint plugin that is fully configured out-of-the-box. You can still tweak the rules if you'd like, but no configuration is required.

On this course platform

Several React-related ESLint rules have been enabled on this course platform.

When an ESLint error occurs, a squiggly red underline will appear, and an overlay will present itself above the results pane. For example:

Code Playground

import React from 'react';

function App() {

return (

);

}

export default App;

Lint Warning

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.
Rule: jsx-a11y/alt-text
Location: Line 5, Column 5

In general, it's a good idea to resolve the lint issue, but if you're finding yourself annoyed by the disruption, you can disable lint warnings by adding /* eslint-disable */ to the top of the file:

Code Playground

/* eslint-disable */

import React from 'react';

function App() {

return (

);

}

export default App;

VS Code extension

While it's great to see ESLint warnings in the terminal logs, it can also be useful to know about these issues in the editor, while we're actually writing the code!

To help us out, we can install the official ESLint extension. This extension is maintained officially by Microsoft, and it's a super solid piece of kit.

Once you've installed the extension, there are two ways to use it:

Hover tooltips

ESLint messages will be shown with either a yellow or red squiggly underline. You can hover over the underlined code to see the warning/error:

The first code example shown earlier, with a tooltip explaining that variable “c” is never used

If you're not seeing these hover tooltips, be sure to enable the “Editor hover” setting:

The VS Code editor settings showing the “editor hover enable” setting

(Conversely, if you find the constant tooltip popups annoying, you can disable them with this setting! This is how I personally prefer to work.)

Problems tab

Alternatively, you can view any ESLint issues with the current file by popping open the “Problems” pane, at the bottom of the editor:

You can toggle this pane by selecting View → Problems, or by using the keyboard shortcut (Ctrl + shift + M). Hit the shortcut again to close it, when you're done with it.