Vim Eslint+Vuejs

O eslint é uma ferramenta incrível para verificar se o seu código js está em algum padrão estabelecido pela equipe (ou por você mesmo, caso esteja trabalhando solo).

Junto com o plugin de vuejs para o eslint é possível ter um padrão bem documentado e alinhado. E para melhorar tudo podemos colocar essas verificações direto no vim, assim, temos esse feedback rápido do que é necessário arrumar.

Eslint

Primeiro vamos instalar o eslint e o plugin no projeto: npm install eslint eslint-plugin-vue babel-eslint --save-dev

Depois vamos adicionar o arquivo de configuração. Deixe na raiz do projeto o arquivo .eslintrc.json, com o seguinte conteúdo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "never"],
    "indent": ["error", 2],
    "quotes": ["error", "single", {"allowTemplateLiterals": true}]
  }
}

Aqui na diretiva extends estamos usando as configurações padrões do eslint e do plugin. Na diretiva parserOptions adicionamos o parser do babel, para o eslint não jogar erros de sintaxe.

Adicionamos algumas regras também na diretiva rules. semi para prevenir o uso de ponto-e-vírgula, indent para usar 2 espaços de indentação e quotes para usar somente aspas simples.

Syntastic

Para instalar o plugin do VIM, estou usando o gerenciador de plugins vim-plug, mas fique a vontade de usar o seu preferido.

Adicione no seu .vimrc as seguintes linhas:

1
2
3
4

Plug 'vim-syntastic/syntastic'
Plug 'mtscout6/syntastic-local-eslint.vim'
let g:syntastic_javascript_checkers=['eslint']
let g:syntastic_vue_checkers=['eslint']

Aqui nos instalamos dois plugins: O syntastic roda diversas ferramentas de verificação estática, sendo o eslint uma delas. O syntastic-local-eslint permite pegar as configurações e binários do eslint local do projeto.

Depois é feita a configuração do syntastic para ele usar o eslint quando em arquivos js e vue. A verificação vai sempre rodar quando você salvar o arquivo, ou pode rodar o comando :SyntasticCheck manualmente.

E é isso. Está feito. Pode usar. Vai lá. Até a próxima!