I’ve covered using lint with TypeScript in my post Using ESLint on TypeScript files.

In this post I’m going to configure up a React application and set-up the project to use Airbnb’s ruleset for ESLint. The Airbnb ruleset appears (but I may be wrong) to be one of the most complete sets and appears to be a bit of a standard for devs.

So let’s create an application and install all the packages we need

• yarn create react-app your-app-name –typescript
• yarn add eslint -D
• yarn add eslint-config-Airbnb -D
• yarn add eslint-plugin-import -D
• yarn add eslint-plugin-jsx-a11y -D
• yarn add eslint-plugin-react -D
• Add the following to the package.json file, scripts section

  "lint": "eslint --ext .js,.jsx,.ts,.tsx ."
  

• Add file .eslintignore to the root folder with the following

  build/**/*
  **/*.d.ts
  

• Add the file .eslintrc.js to the root foldr also, with the following

  module.exports =  {
      parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
      plugins: ['@typescript-eslint'],
      extends:  [
        'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
        'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
        'airbnb-typescript',
      ],
      parserOptions:  {
          ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
          sourceType:  'module',  // Allows for the use of imports
          ecmaFeatures:  {
          jsx:  true,  // Allows for the parsing of JSX
          },
      },
      rules:  {
      },
      settings:  {
        react:  {
          version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
        },
      },
    };
  

If all worked, you can no run yarn lint and should see (probably) a fair few errors and warnings. We haven’t even added our own code yet!

Let’s clean a couple of things up first. The serviceWorker.ts file is generated via the React scaffolding, so me might simply want to add the filename to the .eslintignore file, that file looks like this now

build/**/*
**/*.d.ts
serviceWorker.ts

This will greatly reduce the errors/warnings. After re-running lint I have two errors and a warning within the file App.test.tsx, one of which suggest function it (the aliased test function) is not defined.

We have choices here, we can switch the rule to a warning or turn it off, we can add the file to the .eslintignore or we can add a comment block to the top of the file like this

/* eslint-disable */

Now, running lint will ignore this file.

In fact we could using the above with the following to disable a block of code from lint

/* eslint-enable */

We could also disable specific rules across a file/block using

/* eslint no-undef: "off" */

Next up I have index.tsx with an error, ‘document is not defined’. In this case I do not wish to ignore the whole file so we can ignore the specific line of code by placing this comment on the line above the document usage

// eslint-disable-next-line

This is fine but is fairly coarse in that it will ignore any other issues on that line, so we might prefer to disable the next line specific rule, i.e.

// eslint-disable-next-line no-undef

After these changes I ran lint again and had yet more errors and warnings, now in App.tsx. In my case lint states 1 error may be potentially fixable with the –fix option, so let’s see by running yarn lint –fix and then I fix the remaining errors and warnings myself.

At this point you may have had at least one error or warning which you consider to be too strict. The Airbnb rules are quite extensive and therefor quite strict. If you’re wanting to change the rule’s severity or turn the rule off, just go to the .eslintrc.js file and change the code specific to the rule that you want to edit. For example, if you’re coming from C# you might prefix your interfaces with I, by default this is classed as an error – let’s the rule off using

rules:  {
   '@typescript-eslint/interface-name-prefix': 'off'
}

or maybe you would prefer your project moves away from the I prefix but don’t want this to cause an error, then we can change ‘off’ to ‘warn’. So the three states we can set rules to are ‘off’, ‘warn’ and ‘error’.

References

Airbnb JavaScript Style Guide
ESLint Rules