Shiny

Speed up ESLint performance 3 times in IDE

March 17, 2019 #ESLint#performance

Most of the front-end engineers will extend Airbnb’s eslint-config-airbnb rules of their ESLint configuration. It’s a nice choice at the beginning, but you may have some performance issue when your project grows up.

You can export TIMING=1 and execute ESLint to get per-rule performance report.

As below image shows, the most of time spent on import related rules.

whole repo lint whole repo lint

After we disabled the rules, the lint performance increased more than 3 times 🎉

whole repo lint without import rule whole repo lint without import rule

Can we just disable the rule in the .eslintrc🤔? No, you shouldn’t! Because the rule can make sure your code follows the standard or your team’s rules. Then, why I disable the rule in the IDE? Because most of the time spent on static analytics. Your code will not work at all if you import from the wrong path. That’s why I propose disable it in IDE. But please make sure you have CI run the lint otherwise your colleague will blame you 😅.

Below is a single file (~1k lines) lint performance comparison.

single file single file

As you can see, this is 6 times faster than the original.

single file without import rule single file without import rule

Let’s start setting up the IDE, you can choose “Sublime Text > Preferences > Package Settings > SublimeLinter > Settings”

1o1fr3kPBz63oqWC V1TPBw

Then Sublime will open the new window with two split panels, the left one is default settings with comments and the right one is user settings.

1TlVGJ4pnO7OdhxSPH8M oA

Once you saved, Sublime will reload the settings. So you can test the performance difference right away. Below is the source of settings, you can just copy and paste it.

Hope you enjoy this article, feel free to leave your comment at below. For more Sublime Text pro tips please see Why I still using Sublime Text in 2019.


Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email