Now that Visual Studio Code is linting our code, let's carry out the following steps to understand how we can configure the rules that ESLint executes:

1. Let's create a file called .eslintrc.json in the frontend folder with the following code:

{
  "extends": "react-app"
}

This file defines the rules that ESLint executes. We have just told it to execute all the rules that are configured in CRA.

2. Let's check that Visual Studio Code is linting our code by adding the following highlighted line to App.tsx, just before the return statement:

const App: React.FC = () => {
  const unused = 'something';
  return (
    ...
  );
};

We'll see that ESLint immediately flags this line as being unused:

That's great—this means our code is being linted. 

3. Now, let's add a rule that CRA hasn't been configured to apply. In the .eslintrc.json file, let's add the following highlighted lines:

{
  "extends": "react-app",
  "rules": {
    "no-debugger":"warn"
  }
}

We have told ESLint to warn us about the use of debugger statements.

4. Let's add a debugger statement below our unused variable in App.tsx like so:

const App: React.FC = () => {
  const unused = 'something';
  debugger;
  return (
    ...
  );
};

We will immediately see that ESLint flags this up:

5. Now that we understand how to configure the rules that are run by ESLint, let's remove the unused line of code and debugger statement from App.tsx. Let's also remove the no-debugger rule from the .eslintrc.json file.

Now, we have linting configured in our project. In the next section, we'll look at how we can autoformat the code.