Create shareable ESlint configs for Vue projects
Published: 2022-05-17 05:08:06

Linting helps projects follow the best practices, enforce coding conventions and ensure code quality. [ESlint](https://eslint.org/) is a static code analysis tool that exclusively lints Javascript code.

Any project that has an ESlint setup will adhere to code uniformity regardless of the expertise of developers. ESlint scans the code, reports the potential errors and stylistic errors then and there. Hence, developers can fix the errors on the fly even before it goes for code review. 

While ESlint fixes the coding style, [Prettier](https://prettier.io/) can accompany to fix formatting. 

In this article, Let's create a package that exposes a reusable ESlint config that can be shared across Vue projects.

Run the following command to create npm package. Make sure that the package name starts with `eslint-config` such as `eslint-config-vue-standards`, If the project has npm scope, you can name it `@scope/eslint-config` as such.

```bash
npm init
```
This will create a package.json file under our project directory.

Let's install ESlint,

```bash
npm install eslint --save-dev
``` 

ESlint is installed in `devDependencies` and add it to `peerDependencies` to ensure that consumer applications install the same version of ESlint.

Next, Let's install the ESlint plugin that supports Vue files.

```
npm install eslint-plugin-vue --save
```

ESlint rules are completely configurable based on our style guide. You can enable/disable them completely or under certain conditions. To know more, check [this guide.](https://eslint.org/docs/user-guide/configuring/rules#configuring-rules)

There are many shareable ESlint Configs used by many companies such as [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) recommended by Airbnb. Similarly, you can also create your own set of configs as a package for your project or company based on the style guide you follow and share it across for the other teams to consume. Let's install some of the existing configs that already enforce the best practices.

```bash
npm install eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vuejs-accessibility --save
```

Let's create a configuration file `index.js` where we can extend the installed configs.

```javascript
module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:vue/recommended",
    "plugin:vuejs-accessibility/recommended"
  ],
  rules: {
    "vue/camelcase": ["error"],
  },
};
``` 
There, `env` and `parserOptions` are used to define the environments such as node, browser, and parsers such as jsx, ecma. I have added `vue/camelcase` rule with `error` configuration that will throw an error when expressions inside vue `<template>` does not follow camelCase conventions.

Let's configure prettier now,
```
npm install prettier --save-dev
```

Like ESlint, Prettier also has to be a peerDependency.

Let's install prettier configs,

```
npm install eslint-config-prettier eslint-plugin-prettier --save
```

Our final configs will look like the below after prettier configs added,

```javascript
module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:vue/recommended",
    "plugin:vuejs-accessibility/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    "vue/camelcase": ["error"],
  },
};
```
It is important to note that the prettier configuration file `.prettierrc.js` must reside in the consumer application.  

```javascript
module.exports = {
  tabWidth: 2,
  singleQuote: true
}
``` 

**Yay.We are done!**
You can publish this package and start using in any vue application. To test it locally, you can install by running the following command.
```
npm install <path-to-application>/eslint-vue-blog --save-dev
```

This package is available in [Github](https://github.com/mathu-mitha/eslint-config-vue).