Pure Vue, or How to set up linting correctly

Linting is an automated process of analyzing code and finding potential bugs. Moreover, in addition to finding errors, the linter in many cases can fix those same errors automatically.

This tool is an excellent assistant both for an individual developer and for a team and the whole project. Even the most skilled masters in the development world make mistakes, since no one has canceled the human factor. In such situations, the linter helps out by reporting a potential error.

Even if the projects use the same technology stack, each of them has its own “design knowledge”. And in this case, the linter comes to the rescue again and prompts the project participant in matters of code styling, preferred syntax, etc.

In this article, we’ll look at setting ESLint and Prettier for JavaScript, TypeScript and in particular for Vue.jswe will show what rules we are guided by in the project headquarters and why.

Installing dependencies

First you need to install the dependencies in the project environment through the package manager, we use yarn.

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-import @vue/eslint-config-typescript

Let’s look at each dependency:

• eslint-config-prettier – disables all rules that are not needed or may conflict with Prettier;

• eslint-plugin-prettier – Runs Prettier as an ESLint rule and reports differences as separate ESLint issues.

• eslint-plugin-vue – official ESLint plugin for Vue.js;

• eslint-plugin-import – designed to support import / export syntax analysis and prevent problems with spelling errors in file paths and import names;

• @vue/eslint-config-typescript is a plugin specially designed for vue/cli and create-vue. This set of rules is the base configuration for Vue-TypeScript projects.

It should be noted that there are a lot of similar plugins, configurations and combinations, it is quite possible that ready-made configurations are suitable for some teams, but we decided to immediately lay down our own settings. We always try to follow updates in linters and plugins to make development as comfortable as possible for the team.

Adding a Configuration

Next, you need to add a configuration file .eslintrc.js (or any other format file that ESLint supports)

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: [@typescript - eslintt', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    @vuee / typescript',
    'plugin:prettier/recommended',
  ],
}

.prettierrc.js

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  endOfLine: 'lf',
  printWidth: 100,
};

Detailed with options prettier can be found in documentation.

Design Rules

In addition to the basic rules vue/essentialthat offers eslint-plugin-vue we use others, some of which differ from style guidewhich offers Vue.

Below are some of them:

'vue/order-in-components': [
  'error',
  {
    order: [
      'name',
      'directives',
      'components',
      'mixins',
      ['provide', 'inject'],
      'model',
      'props',
      'filters',
      'data',
      'computed',
      'watch',
      'methods',
      'LIFECYCLE_HOOKS',
      'ROUTER_GUARDS',
    ],
  },
],
'vue/v-for-delimiter-style': ['error', 'of'],
'vue/next-tick-style': ['error', 'promise'],
'vue/require-prop-types': 'error',
'vue/prop-name-casing': ['error', 'camelCase'],
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'vue/component-definition-name-casing': ['error', 'PascalCase'],
'vue/custom-event-name-casing': ['error', 'camelCase'],
'vue/no-duplicate-attr-inheritance': 'error',
'vue/this-in-template': ['error', 'never'],
'vue/v-on-style': ['error', 'shorthand'],
'vue/no-multi-spaces': 'error',
'vue/padding-line-between-blocks': 'error',
'vue/component-tags-order': [
  'error',
  {
    order: ['template', 'script', 'style'],
  },
],
'vue/v-on-event-hyphenation': ['error', 'never'],
'vue/attribute-hyphenation': ['error', 'never'],
'vue/v-bind-style': 'error',
'vue/v-slot-style': ['error', 'shorthand'],
'vue/no-unused-properties': [
  'error',
  {
    groups: ['props', 'data', 'computed', 'methods', 'setup'],
    ignorePublicMembers: true,
  },
],

With rules eslint-plugin-vue can be found in documentation.

Integration with IDE

Most IDEs have the ability to integrate with linters, in particular, consider Microsoft’s VSCode and JetBrains’ WebStorm.

In VSCode you need to add a file in the root directory .vscode/settings.json and specify the settings for your project, for example:

{
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

In WebStorm, you need to go to the appropriate settings section and, using the graphical interface, specify the settings: Preferences → Languages ​​& Frameworks → JavaScript → Code Quality Tools → ESLint.

Conclusion

In this article, we showed our option for setting up a linter in a project. headquarters. Whatever the project is in terms of scope, timing, and purpose, a well-tuned linter will be a great help, especially if a large team is working on the project.

Always consider automating code improvement, stay tuned for updates to settings and linter rules. If the required configuration is missing for your project, consider writing your own linter rule. For example, we in our team adhere to the indentation between SFC options, our vision coincided with the community and we decided to add this rule to eslint-plugin-vueIf you are interested in learning more, you can refer to the following Pull Request.

And finally, if you have any suggestions, questions, we will be happy to answer, this should help us to make projects better.

Material prepared:

Maxim Stikharev – Technical Director of Shtab

Magomed Chemurziev – Shtab frontend developer