ESlint + Prettier in VSCode for Typescript with React

Para a configuração de um projeto em Javascript ou Typescript que dê uma boa produtividade, e padrão no estilo do código, é sempre interessante utilizar ferramentas que tragam facilidades no dia a dia para validar esses erros e má formatações do código. Principalmente quando estamos desenvolvendo com um time em um mesmo projeto, fazendo com que evite muita diferenciação em como o código é escrito entre os desenvolvedores.

Para isso, existem ferramentas poderosas como o ESlint que vai fazer toda a verificação de sintax, e o Prettier que vai padronizar todo o estilo do código.

Configurando o Typescript (Caso o projeto esteja em JS)

Abra o terminal e roda o comando para criar um arquivo chamado tsconfig.json ou você pode criá-lo diretamente pelo editor.

touch tsconfig.json

Instale o typescript no projeto rodando o comando:

# with npm
npm install typescript --save-dev

# with yarn
yarn add typescript -D

Para popular as configurações padrões do Typescript, basta rodar o comando:

tsc init

Eu ainda alterei as configurações para:

{
"compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "strict": false,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "paths": {
        "@/*": ["resources/js/*"]
    }
},
"exclude": ["node_modules", "public"]
}

Para mais informações acesse a documentação oficial

Configurando o ESLint

Para instalar o eslint, você pode adicionar o pacote como dependência de desenvolvimento rodando o comando no terminal:

npm install eslint --save-dev

# or

yarn add eslint --dev

Você vai poder inicializar o eslint no projeto rodando:

yarn run eslint --init

No terminal, irá surgir um questionário para ir fazendo a configuração, e você pode ir configurando de sua preferência. Minha escolha foi o React, e gerei o arquivo usando Javascript.

Você pode verificar como instalar na documentação oficial

Adicionando plugins no Lint

Eu gosto de instalar o eslint-plugin-react-hooks para verificação de utilização dos hooks de maneira correta.

Para instalar é só rodar:

# npm 
npm install eslint-plugin-react-hooks --save-dev

# yarn 
yarn add eslint-plugin-react-hooks --dev

e adicionar nas configurações do lint:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

E costomizar os avisos com:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Configurando o Prettier com o ESlint

Para instalar a extenção do prettier pro lint, é só rodar:

# with npm
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

# with yarn 
yarn add prettier@latest eslint-plugin-prettier@latest eslint-config-prettier@latest -D

E adicione no eslintrc. estas configurações:

{
extends: [
    //...
    'prettier',
  ],
plugins: ['prettier'],
rules: {
        // ...
    'prettier/prettier': 'warn',
  },
}

Adicione o arquivo .prettierrc na raiz do projeto, e coloca as suas configurações. Você pode verificar a documentação para personalizar da forma que você achar melhor.

Meu arquivo ficou assim:

{
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "parser": "flow",
    "printWidth": 120,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

Você pode também, definir as configurações do prettier no próprio arquivo do eslint. Você pode acessar a documentação no github para saber como.

Configurando o ESLint no VSCode

Adicione uma pasta .vscode na raiz do projeto caso ela não exista.
Cria um arquivo com o nome settings.json, caso não exista.

E adicione estas configurações:

{
    "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Isso vai forçar o ESLint formatar automaticamente sempre que um arquivo for salvo.

Para a integração funcionar, é só instalado o plugin do ESLint para o VSCode:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Conclusão

De modo geral só foi preciso instalar estas dependências:

"@types/jest": "^27.0.1",
"@types/node": "^16.7.10",
"@types/react": "^17.0.19",
"@types/react-dom": "^17.0.9",
"@typescript-eslint/eslint-plugin": "^4.31.0",
"@typescript-eslint/parser": "^4.31.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.3.2",
"typescript": "^4.4.2"

O arquivo .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks', 'prettier'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'prettier/prettier': 'warn',
  },
};

O arquivo .prettierrc:

{
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "parser": "flow",
    "printWidth": 120,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

O arquivo settings.json

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}