Configuração de Lint para projetos Vue

LintVue.md

Lint durante o desenvolvimento

Para uma melhor experiência em desenvolvimento com Vue, Prettier e Eslint foi proposta essa configuração

# Instalar as dependencias necessárias
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

Para uma melhor experiência com o VSCode instale as extensões: Prettier, Eslint e Vetur. Adicione no settings.json do VSCode:

"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.js": "prettier-eslint",

Modifique o .eslintrc.js para permitir que o prettier formate sozinho as mudanças ao salvar os arquivos. Além disso, foram adicionados rules que melhoram a legibilidade, força o erro ao não usar as boas práticas do Vue e restringe alguns comandos como console.log.

// Adicionar nas extensões
extends: [
  'plugin:vue/recommended',
  'prettier',
  'prettier/vue',
],

// Adicionar nos plugins
plugins: ['vue', ..., 'prettier'],

// Adicionar nos rules
rules: {
    ...
    'prettier/prettier': 'error',
    'prefer-promise-reject-errors': 'error',
    'no-throw-literal': 'error',
    'no-console': 'error',
    curly: 'error',
    'no-unused-vars': ['error', { args: 'none' }],
    'padding-line-between-statements': [
      'error',
      {
        blankLine: 'always',
        prev: [
          'const',
          'let',
          'var',
          'function',
          'class',
          'try',
          'throw',
          'if',
          'for',
          'do',
          'while',
          'switch',
          'return',
        ],
        next: '*',
      },
      {
        blankLine: 'always',
        prev: '*',
        next: [
          'const',
          'let',
          'var',
          'function',
          'class',
          'try',
          'throw',
          'if',
          'for',
          'do',
          'while',
          'switch',
          'return',
        ],
      },
      { blankLine: 'any', prev: ['case'], next: ['case', 'default'] },
      {
        blankLine: 'any',
        prev: ['const', 'let', 'var', 'export', 'import'],
        next: ['const', 'let', 'var', 'export', 'import'],
      },
      {
        blankLine: 'always',
        prev: ['import'],
        next: ['export'],
      },
    ],
    'vue/attributes-order': [
      'error',
      {
        order: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          'UNIQUE',
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
      },
    ],
  },
}

Lint durante qualquer commit

Para facilitar o lint do código e manter o padrão em todo commit foi adicionado o husky e o precise-commits. Husky nos ajudará a manter o padrão em todo trigger de um novo commit. Precise-commits vem para ajudar a lintar apenas as linhas modificadas/inseridas para aqueles arquivos que estão em staged.

# Instalar as dependencias necessárias
npm install --save-dev husky precise-commits

Adicionar esse trecho no final do package.json

"husky": {
  "hooks": {
    "pre-commit": "precise-commits --staged"
  }
}

Lint durante o pipeline do Github Actions

Para que tenhamos o mesmo comportamento de lint no pipeline do Github Actions e reaproveitando o precise-commits, adicione, na raiz do projeto, o arquivo seguindo o caminho .github/workflows/lint.yml.

Assim, em todo PR, esse pipeline irá rodar instalando as dependências e verificando se o lint dos arquivos modificados/inseridos estão de acordo com o padrão do projeto.

name: Lint

on: [pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - uses: actions/[email protected]
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install and Lint
        run: |
          npm ci --prefer-offline --no-audit
          npm run precise-commits
        env:
          CI: true