Forbid, or useful plugins for ESLint

I think many people know that in serious projects in our time it is common to use special tools to check the code for errors and compliance with the style adopted by the team.

Today I want to touch on the topic of ESLint, an excellent tool for checking JavaScript projects for errors.

I will not write in this article about the obvious points, such as setting eslint for your project: I hope you will be able to read the documentation on this part yourself and connect it to yourself. And here we will discuss what additional “body kit” can be connected to the original tool and how it can be customized to make it work with the greatest benefit for you.

eslint-config-airbnb

Now we use the prepared configuration with rules from the airbnb command as the basis of the rules. Their standard for writing JavaScript code now has more than 73 thousand stars on the githaba and is used by many well-known organizations . I think you can trust him.

This configuration connects to the project several important packages: eslint,  eslint-plugin-import,  eslint-plugin-react, and  eslint-plugin-jsx-a11y, containing additional rules to validate your code. It should be noted that this configuration file implies that you use in your project React.js. If this is not the case, then you can always set the eslint-config-airbnb-base configuration , which contains the same, except for the dependency on plug-ins for React.js.

Let's take a closer look at the connected packages and find out what checks they add to the code of your project:

eslint-plugin-import

This plugin will add to your project checks for all your imports and will ensure that all imported dependencies are present in the project, connected in a convenient manner for subsequent work, and so on.

eslint-plugin-react

The plugin will allow you to write more correct code on React.js and will save you from common antipatterns, and also force you to assign descriptions of the data types that they accept to all their components.

eslint-plugin-jsx-a11y

This plugin also applies to projects on React.js and it is also extremely useful in work. It will force you to write such HTML, which will be much better consistent with accessibility standards. Your projects will become much more convenient for people with disabilities.

In general, already this set of rules will make your projects much better written, and also expand your knowledge of modern standards for writing code.

But in our world there are not only these eslint plugins, but many others. There is already a wonderful awesome-eslint project on this githaba . In recent days, I decided to study this topic and I want to present to your court the most interesting thing that was found, tested personally and implemented in my current project, which I am currently working on.

Additional plugins for ESLint

You can explore the above project yourself and find interesting plugins for yourself, but I will write here what interested me.

eslint-plugin-node

Plugin designed specifically for Node.js projects. I think many can come in handy if they still do not use it at home.

eslint-plugin-lodash

This plugin will force you to “love” Lodash and rewrite most of the native JS methods for methods from Lodash, and it also contains many recommendations for writing code using lodash chains. In general, it is very interesting, but for the time being I didn’t introduce it into our project simply because now we have to rewrite too much code to comply with the rules of this plugin. But for the future I took it to myself.

eslint-plugin-compat

This plugin allows you to directly verify when developing the compatibility of the code written by you with the current browsers that you are targeting in your project at the moment. At the moment, I did not connect it to my project due to the fact that we are now using the polyfill.io service , which automatically connects all the necessary polyfiles to each individual browser, so the problem of code compatibility as a whole is missing. But I also take notes for the future: what if you need it?

eslint-plugin-optimize-regex

A plugin that tells you how to optimize your regular expressions. Why not install? The excess will not be, I thought.

eslint-plugin-sonarjs

One of the most interesting finds from this list of additional skirts. This plugin contains a whole set of checks, thanks to which it finds poorly written parts of the code, the same functions and simply meaningless constructions, and offers to rewrite them (it’s a pity that he himself still can’t rewrite them: D). If you do not like to decompose your code into small clear blocks and write intricate functions in 100+ lines - wait for warnings from this plugin that the cognitive complexity of such places in the project is too high for long-term support and should be rewritten.

eslint-plugin-no-loops

This plugin will simply swear at you in those moments when you wish to write standard cycles foror while. These days, has long been common use forEach, map, reduce, and so on. I generally agree with the author and plugged the plugin into my project.

eslint-plugin-no-use-extend-native

A plugin that will prevent you from extending the prototypes of standard JavaScript objects. Say no! monkey patches. And it is right.

eslint-plugin-promise

A plugin that helps you write the right promises and protects you from common mistakes when working with them. Also very useful, I think.

Here is a list of plugins in the end turned out. What do you use in your projects to check your code?

In conclusion, I will leave an example of the configuration of our file .eslintrcfrom the current project:

{
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:jsx-a11y/recommended",
    "plugin:sonarjs/recommended",
    "plugin:promise/recommended"
  ],
  "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"],
  "rules": {
    "react/jsx-filename-extension": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "packageDir": "./"
      }
    ],
    "allowTernary": true,
    "optimize-regex/optimize-regex": "warn",
    "sonarjs/cognitive-complexity": ["error", 30],
    "no-loops/no-loops": 2,
    "no-use-extend-native/no-use-extend-native": 2,
  },
  "settings": {
    "import/resolver": "webpack"
  }
}