How eslint-plugin-vue improved our code reviews

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.

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