Setting Up ESLint & Prettier in a Vue.js Project

Building a coding discipline is crucial for the long-term success of software development projects. In addition, keeping the codebase clean and consistent becomes increasingly critical as the codebase, and the development team grows. 

However, enforcing coding standards within the team manually is an impossible task. This is what linting and formatting tools like ESLint, PHP CS Fixer, Prettier, Pylint, etc., are for. They ensure the codebase is consistent.

What Tools Should We Use for Vue.js?

The two frequently used tools for maintaining the code standards in the Vue.js projects are ESLint and Prettier.

You can follow the guide in this article to set up ESLint and Prettier for your project. But first, let's talk a bit about the tools themselves. So what are ESLint and Prettier? 

What is ESLint?

Linting is an automated process for static analysis of the codebase for potential errors and inconsistencies with the project's coding standards. Usually, linter detects errors such as missed commas, unused variables, unused imports, etc. Linter can not save us from errors related to the business logic; however, it will ensure that our code is syntactically correct and follows the best practices.

The most popular linting tool for Javascript is ESLint.

What is Prettier?

Now let's talk about the formatting. What is the difference between formatting and linting?

The thing is that the linter is more focused on detecting the errors while the formatter takes care of maintaining one standard in the codebase and follows several rules like tab width, single/double quotes, and so on.

How do make formatting work? We already have particular formatting if we have installed ESLint in our project. However, to have more control over the formatting standards in the project, we should use a separate tool called Prettier. 

Prettier is a more complete and robust formatting tool oriented only on formatting. Therefore Prettier and ESLint are a perfect combination in keeping the coding standards in the codebase.

Setting Up ESLint & Prettier Configuration for a Vue.js Project

If we create a project using Vue CLI, setting up ESLint and Prettier is very easy. When creating a new project with Vue CLI, if you choose a "Default" option (see the picture below), you will already have ESLint in your project. However, if you also want to add Prettier, you should choose - the "Manually select features" option.

After that, you should go through two questions (just hit Enter twice), and then you will need to select a preset food, the linter, and the formatter. 

You can go with the "ESLint + Prettier" option. However, if our team decides so, you can also select the "ESLint + Airbnb config" option, for example, and use one of the most common coding standards in the industry. For more information, visit the Airbnb Javascript Style Guide.

Then we have to hit "Enter" several steps after, and the project will be created.

After that, you need to create a blank .prettierrc.json file with the following command:

echo {} > .prettierrc.json

Since Prettier is a very opinionated tool, we can leave the file content blank.

Now, let's discuss the cases when we create a project with Vite, have a Laravel/Vue duo, or maybe have a Vue CLI project where Prettier has not been introduced yet. The guide below will work in any of those cases.

Install Prettier with your project by running the following command:

npm install --save-dev --save-exact prettier

Create a configuration file with the following command:

echo {} > .prettierrc.json

Install ESLint:

npm install --save-dev eslint eslint-plugin-vue

Then we need to create a configuration file .eslintrc.js:

module.exports = {
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

Next, turning off ESLint formatting rules is necessary to avoid conflicting with Prettier. It's quite simple. We just need to install one more package:

npm install eslint-config-prettier --save-dev

And add "prettier" as the last plugin in .eslintrc.js.

//.eslintrc.js
extends: [
  'eslint:recommended',
  "plugin:vue/vue3-recommended",
  "prettier"
],

At this stage, you need to add the following scripts to the package.json to start using our new tools via terminal.

"scripts":{
  //...
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
  "format": "prettier .  --write"

Don't forget to run it with "npm run."

Integration with VScode

First, you will need to install the following extensions: Prettier and ESLint.

Also, if you have already installed Vetur for Vue, you should turn off the following option in settings.json:

// Code/User/settings.json
"vetur.validation.template": false

If instead of Vetur, you are using Volar (recommended for Vue 3), you will not need to change anything.

Next, you should create a .vscode/settings.json file in the root directory of the project and set the following rules:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Now you can enjoy using ESLint and Prettier with your Vue.js project and enforce the same code standard across the project.