ESLint

ESLint print-config

The command that helps you find out all the ESLint rules you are using

I usually tend to depend on popular ESLint config based on my platform I use (for example in react native “universe” and “@react-native-community” rules). Then I add some helpful rules (like my sort-export-all), and config other rules (import/order) from my experience and styles. Nobody knows all the rules, but if I find a common pattern that I want to enforce/automate, searching for ESLint rule makes you productive. Sometimes I turn off some rules that warn me while I’m coding because I don’t like them. I recently upgrade my ESLint configs (I recommend to use yarn upgrade-interactive —latest). And I got an ESLint warning:

ESLint warning

As you can see, my IDE knows that this comes from the ESLint rule named “curly”. So to turn it off, I need to change my .eslintrc.js file with

module.exports = {
...
  rules: {
      ...
+     curly: 0,
  }
}

But I wanted to know how does this rule configure? What options does this rule have? Maybe it’s better to config it in a different way instead of removing it. I could find the ESLint rules inside the configs that I extend from, but searching inside all of those repositories does not feel effective.

ESLint —print-config

A better approach is to use

eslint --print-config \".eslintrc.js\" > my-rules.txt

It tells ESLint to print the config, and if you extend other configs - it extracts all the rules from there, so the output will have the final config with all the rules that ESLint inspects. Now I could easily see that “curly” rule configured with options ["warn", "all"]. I think it can be useful to use it when I update my ESLint config dependencies again, so I will see the rules diff easily, or to create your own ESLint config.

Update: debug ESLint performance

cross-env TIMING=1 eslint \"src/**/*.{ts,tsx,js,jsx,json}\"

Will return

Rule                                         | Time (ms) | Relative
:--------------------------------------------|----------:|--------:
import/namespace                             |  1907.014 |    49.1%
prettier/prettier                            |  1431.825 |    36.9%
import/export                                |   124.513 |     3.2%
import/order                                 |    68.520 |     1.8%
import/no-duplicates                         |    57.552 |     1.5%
@typescript-eslint/prefer-nullish-coalescing |    52.768 |     1.4%
@typescript-eslint/no-unused-vars            |    30.084 |     0.8%
react/no-string-refs                         |    22.364 |     0.6%
react/jsx-no-bind                            |    15.957 |     0.4%
react/no-direct-mutation-state               |    14.866 |     0.4%
Done in 8.13s.

So you can measure your ESLint performance

Subscribe to Nir Tamir

Get the latest posts delivered right to your inbox