Tools for improving productivity as a Front-end developer

Jan 18, 2020

If you work with modern JavaScript, you’re probably all too aware of the abundance of tools in the JavaScript ecosystem. It’s understandable to feel the infamous JavaScript fatigue when confronted with all these shiny technologies.

Nevertheless, some of these tools are very useful and because I’m feeling in the mood for writing some Markdown, I’m going to waffle on about some of my favourite!

How to deal with this fatigue you say? Use tools ofcourse! There are some amazing little tools that can help improve your productivity quite a lot.

ESLint

Because JavaScript is not a statically typed language, it’s very easy to make mistakes that would otherwise be caught by a compiler in a language like Java or C#. As a side-note and at risk of incurring more fatigue, I suggest you take a look at using TypeScript 🙂

You can think of ESLint almost like a compiler for JavaScript – it will statically analyse all your JS code and identify potential issues.

For example, it’ll let you know if it sees that you’re doing something silly like calling a non-existent function or declaring a variable but not using it. It’s like having a super thorough developer constantly reviewing your code and having your back 🙂

It comes with a bunch of rules that you can utilize to ensure you’re following best practices and avoiding common pitfalls. If you’ve been so unfortunate to have not benefited from the wonder of ESLint, the time has come, my non-existent reader!

Prettier

Prettier is amazing! In its own words, it’s an opinionated code formatter that takes care of make your code looking pretty.

For example, it makes sure you always have the corrent indentation (2 spaces!), consistent placing of curly braces, semi-colons and a load of other little things.

You can integrate it with your editor / IDE so that it automatically formats your code when you press a keybinding or even when you save a file.

Prettier will help you waste less time formatting your code (or worse, arguing about code style with teammates!) and more time building your next killer, industry distrupting, billion-dollar, world-changing, boring CRUD web app.

Stylelint

Similar to ESLint in ways, Stylelint wll check your CSS code to make sure you aren’t doing anything like misspelling a property or using an undefined SASS variable.

It can also be configured to enforce certain rules like always alphabetizing style rules which I love!

Lint-staged

All these tools are great and they can be integrated with your editor / IDE so that you’re immediately made aware of any violations but by themselves they won’t enforce you to follow their wonderful rules.

To enforce adherence, you can make use of lint-staged which can be configured to run the linters before committing or pushing your changes. This way, you can make sure that no code is checked in to your brilliant codebase unless it passes the necessary checks.

Conclusion

Well, now that I have another little post on my blog and am feeling quite tired, I’ll just go ahead and publish this. Putting together a well-written blog post is far too much work and I simply cannot be bothered right now to edit and polish this post.