All Case Studies Design Development Interviews Our Way Project Management

Keep Your Code In Great Shape With The ESlint Plugin For Ember Apps

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.

TLDR

We use ESlint in most of our JavaScript applications, but unfortunately it doesn’t suit all our needs for Ember apps. We created a great Ember Style Guide and we needed custom rules that will check Ember code according to our restrictions. As a solution, we created a plugin for ESlint as well as a shareable config that extends the popular AirBnB config with rules from our plugin.

In code we trust

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.

Keeping code quality high

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.

ESlint in Netguru

We used to work on different projects using ESlint with AirBnB’s config for ESlint. Together, they provide a bunch of rules and tailor-made settings according to their JavaScript Style Guide which, by the way, is the standard in our company. It’s super useful for every JavaScript application and is definitely a must-have tool for every JavaScript development stack.

Problem - Can we make custom rules for ESlint that will cover our Ember Style Guide?

ESlint rules are great for pure JavaScript code, but when it comes to some framework specific code (in our case Ember) - they are simply not enough. We already had a great Ember Styleguide defined, but we couldn’t be sure that these rules were being followed in our Ember apps. We needed a custom set of rules that will check code based on our Style Guide.

Process

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.

Solution - ESlint plugin for Netguru’s Ember Style Guide

So here we are, presenting our new open-source project and its two repositories:

eslint-plugin-netguru-ember

The ESlint plugin provides a set of rules able to check your Ember app based on our Ember Style Guide. Go to Github

eslint-config-netguru-ember

The ESlint shareable config basically does 3 things and is really the only thing you need for ESlint:

  • It extends the AirBnB config (so we still follow their style guide).
  • It connects eslint-plugin-netguru-ember.
  • It sets appropriate restrictions on each of our rules.

Go to Github

How to use it?

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:

extends: netguru-ember

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:

image00-6.png

Want more?

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:

Key facts

  • 12 rules
  • 68 tests
  • 62 commits
  • 1706 lines of code
New Call-to-action
Follow Netguru
Join our Newsletter

Scaling SaaS
READ ALSO FROM Ember.js
Read also
Need a successful project?
Estimate project or contact us