Blog Engineering How eslint-plugin-vue improved our code reviews
Published on: February 13, 2018
3 min read

How eslint-plugin-vue improved our code reviews

A few months ago we felt the need to build a style guide for Vue and now are using eslint-vue-plugin, which is saving us time in our code reviews.

code_cover_image.jpg

We've (finally) integrated eslint-plugin-vue successfully into our codebase!

When we added Vue to our codebase back in April 2016, eslint-plugin-vue did not yet exist and we had not yet started using eslint at all.

One of the things I love the most about GitLab being an open source tool is that anyone can contribute! Winnie Hellmann, who has since joined the team, did this amazing work adding eslint as a community contribution. Thanks Winnie! 🙇‍

The start of a style guide

As our Vue codebase grew from a few features to quite a large usage (issue boards, environments, cycle analytics, pipelines) we noticed that each of our Vue apps followed a different style. At that time we felt the need to document how to architecture a Vue application to ensure a consistent codebase. Once we defined and documented how to use the component system and Flux architecture with our codebase, we noticed that our Vue code also differed in very small things, such as indentation or the order we declared the methods. These inconsistencies, although small, increased the complexity of the review process and for maintaining a healthy codebase.

With the goal of decreasing the time we spent reviewing Vue code and debating on each of these aspects, and because at the time there wasn't an official Vue style guide, we started our own! You can check out our documentation [here](https://docs.gitlab.com/e e/development/fe_guide/style_guide_js.html#vue-js). As the Vue community grew, the need for an official style guide and for an eslint plugin for Vue grew with it. Thanks to the wonderful team Michał Sajnóg, Toru Nagashima, Armano and Chris Fritz leading the development of such a tool, we are now able to use it in production! And we even got to act as source of inspiration for the official one

Adding eslint-vue-plugin

After waiting a couple of months for a stable version of eslint-plugin-vue, we finally gave it a try once version 4.0.0 was released.

EE Conflicts

Frontend team working together to resolve all the vue eslint problems

It took a couple of days to fix all the problems eslint identified in our code, but we were able to successfully add it and thanks to a huge team effort, the second row of conflicts was solved very quickly. Thanks again Luke, Eric, Kushal and José!

Now our review process is even faster, we don't have to manually check for the style guide rules anymore! 🎉

Cover image by Free-Photos is licensed under CC0 1.0

We want to hear from you

Enjoyed reading this blog post or have questions or feedback? Share your thoughts by creating a new topic in the GitLab community forum. Share your feedback

Ready to get started?

See what your team could do with a unified DevSecOps Platform.

Get free trial

Find out which plan works best for your team

Learn about pricing

Learn about what GitLab can do for your team

Talk to an expert