Category Archives: ESLint

Watching with eslint

If you have your dev environment set up like me, you’re used to having Jest in a terminal window of it’s own continuously running and watching for changes to test files, but what about eslint, there doesn’t appear to be the same option out of the box.

Whilst there are npm packages for adding this capability the easiest way is to simply use watch, although you’ll need to install it using npm install watch -g if not already installed. Our CLI command would then look something like this

yarn watch 'eslint --ext *.ts,*.tsx,*.js,*.jsx src' src

if we ignore the ‘eslint…’ section, basically we’re just telling watch to watch the folder src (the src text at the end of the command). Ofcourse if you’re working on a specific folder, for example src/components/mediaPlayer, you’ll want to watch that specific folder. Just don’t forget we’re running two separate commands, so it’s no good watching one folder but having lint run against a different folder.

Prettier with ESLint

Prettier is (as it says on their website) am opiniated code formatter.

To begin with I’m going to extend the code from the last post ESLint with airbnb rules. Carry out the following steps

  • yarn add prettier -D
  • yarn add eslint-config-prettier -D

    This line will disable rules that conflict with Prettier

  • yarn add eslint-plugin-prettier -D>
  • Open .eslintc.js and update/add the following value to each key 
    plugins: ['prettier']

extends: [
   'prettier',
   'plugin:prettier/recommended'
]

rules:  {
   'prettier/prettier': 'error'
}
  • Run yarn lint which we added in the ESLint with airbnb rules post.

The first thing you might notice, as I did, that the ESLint rules required a single quote for strings whereas Prettier requires double quotes, obviously this is not too good if you started running this tool against existing projects, so we want a way to disable such rules in Prettier.

Create a file named .prettierrc.js and place the following code in it

module.exports = {
    singleQuote: true
};

See Prettier configuration for more info.

ESLint with airbnb rules

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