Create shareable ESlint configs for Vue projects

Linting helps projects follow the best practices, enforce coding conventions and ensure code quality. ESlint 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 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.

npm init

This will create a package.json file under our project directory.

Let's install ESlint,

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.

There are many shareable ESlint Configs used by many companies such as 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.

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.

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,

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.

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.