O ESLint e o Prettier são ferramentas essenciais para manter a consistência do código em equipes de desenvolvimento. Ao padronizar estilos de escrita, elas reduzem a complexidade na leitura e manutenção de projetos, especialmente em ambientes colaborativos.

Configurando o ESLint

Para iniciar, adicione o pacote necessário ao seu projeto. Execute o comando abaixo:

npm install -D @eslint/create-config eslint

Em seguida, inicialize a configuração do ESLint respondendo às perguntas interativas:

npx eslint --init

Isso gerará um arquivo de configuração. Modifique o arquivo .eslintrc.cjs conforme as necessidades do seu projeto Vue.js 3 com TypeScript. Um exemplo de configruação personalizada:

module.exports = {
    root: true,
    env: {
        browser: true,
        es2022: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        '@typescript-eslint/no-unused-vars': 'warn',
        indent: ['error', 2],
        'vue/multi-word-component-names': 'off',
        semi: ['error', 'always']
    }
};

Crie um arquivo .eslintignore na raiz do projeto para excluir diretórios e arquivos da verificação:

node_modules/
dist/
public/
*.config.js

Adicione um script ao package.json para automatizar a correção de problemas:

{
  "scripts": {
    "lint": "eslint --fix ."
  }
}

Configurando o Prettier

Instale as dependências do Prettier e os plugins de integração com o ESLint:

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

Crie um arquivo de configuração .prettierrc.json com as preferências de formatação:

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Defina um arquivo .prettierignore para evitar a formatação de arquivos específicos:

dist/
node_modules/
public/
*.min.js

Inclua um script no package.json para aplicar a formatação em todo o projeto:

{
  "scripts": {
    "format": "prettier --write \"**/*.{js,ts,vue,json}\""
  }
}

Execute os comanods npm run lint e npm run format conforme necessário para manter o código limpo e consistente.