As we all know, high quality code is reflected in the success of the application, but it is also one of the main factors encouraging developers to get involved with a project and has a direct impact on developers’ efficiency. Check out how easily you can improve your code even further in Ember with the new plugin and config we open-sourced recently - ‘eslint-plugin-netguru-ember’ and ‘eslint-config-netguru-ember’.
In a previous post, Kamil introduced ESlint and explained how to use it with Ember applications. If you’re already familiar with this topic that’s great, if not - I encourage you go check out his post; he did a great job.
Running multiple projects without solid style guides can be really tricky, especially when developers are changing teams and projects. We want to keep everything clean and organized so that whenever a new developer joins a team they can quickly get working at full speed. This is why we have different style guides to ensure high code quality across all our different projects.
Defining style guides is a big step forward. But, unfortunately, it’s not enough in practice. During code reviews, we repeatedly encountered deviations from Netguru’s strict style guide. Here’s where ESlint comes in. Basically, ESlint provides a really nice set of rules and checks whether our code fulfils them or not, making it dead easy to spot issues long before the code is pushed to github for review.
In one of our Ember meetings, the idea occurred: “Hey! We use ESlint and we have a great style guide for Ember apps. Why not to try do something with this? Maybe there is a way to write our own custom rules?”. We’re really proud of our involvement in the Ember community (download the free ebook), we thought - why not make something cool and open-source it for everyone?
Back then, I was in an RnD role for about a week between commercial projects and I got an opportunity to dig into this topic and see whether we would be able to do such a thing. At first, I scratched my head a little bit - but I was also very excited as I had the chance to do something great. The whole process went extremely smoothly: I managed to research and write a whole plugin along with a shareable config on time and without any obstacles. I was pleasantly surprised how fun and elegant writing new rules is, and most of all that TDD works really well here.
So here we are, presenting our new open-source project and its two repositories:
The ESlint plugin provides a set of rules able to check your Ember app based on our Ember Style Guide. Go to Github
The ESlint shareable config basically does 3 things and is really the only thing you need for ESlint:
Installation is pretty easy and boils down to:
1. Install ember-cli-eslint (if you don’t have it already)
ember install ember-cli-eslint
2. Install eslint-config-airbnb-base and its dependencies
npm install --save-dev eslint-config-airbnb-base eslint-plugin-import
3. Install eslint-config-netguru-ember and eslint-plugin-netguru-ember
npm install --save-dev eslint-config-netguru-ember eslint-plugin-netguru-ember
4. Change your .eslintrc to look like this:
As you can see - you no longer need to install eslint and babel-eslint itself, nor do you have to set up a parser because we do it all for you. But you still need to disable JSHint from the qunit test suite [Check our previous post to find out more about this].
That’s it! Now if you run ember serve, your code will be automatically checked based on AirBnB’s and Netguru’s Ember style guide rules.
If some parts of your code do not follow our Ember Style Guide you’ll see something like this:
In terms of code linting I’ve barely scratched the surface here, and if you want to find out more about linters I recommend you check out our previous post dedicated to linters. I also have a bunch of useful links for you: