Configuração do ESLint

Manter o código fonte de um projeto bem organizado~seguindo alguns padrões é um desafio. Para ajudar a manter o padrão, existem ferramentas que ajudam a formatar e forçam os desenvolvedores seguirem algumas regras.

As ferramentas utilizadas para fazer essa formatação normalmente são o eslint junto com o prettier.

Para facilitar a configuração das regras, a equipe de UI/UX da Zoox criou um preset de configuração baseado nas regras do Vue para serem utilizados nos projetos.

Como utilizar

O primeiro passo é instalar o pacote e as peerDependencies dele. Para isso, rodamos o comando:

yarn add @zoox-ui/eslint-config babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue eslint-plugin-promise prettier

ou

npm install @zoox-ui/eslint-config babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue eslint-plugin-promise prettier

Depois disso, precisamos indicar no arquivo de configuração .eslintrc.js que queremos estender da configuração da zoox.

module.exports = {
  extends: ["@zoox-ui"],
};

E o .prettierrc recomendado que seja:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Dessa maneira, quando rodamos o comando de linter ou então deixamos como formatOnSave configurado no vscode, o nosso código vai seguir o padrão definido pelo eslint/prettier.