ESlint + Prettier in VSCode for Typescript with React
Tags: vscode, tutorial, typescript, webdev
Published: 2022-04-29 14:00:37

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.

```bash
touch tsconfig.json
```

Instale o typescript no projeto rodando o comando:

```bash
# 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:

```bash
tsc init
```

Eu ainda alterei as configurações para:

```json
{
"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](https://www.typescriptlang.org/docs/)

## Configurando o ESLint

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

```bash
npm install eslint --save-dev

# or

yarn add eslint --dev
```

Você vai poder inicializar o eslint no projeto rodando:

```bash
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](https://eslint.org/docs/user-guide/getting-started)

### 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: 

```bash
# npm 
npm install eslint-plugin-react-hooks --save-dev
 
# yarn 
yarn add eslint-plugin-react-hooks --dev
```

e adicionar nas configurações do lint: 

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

E costomizar os avisos com:

```json
{
  "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: 

```bash
# 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:

```jsx
{
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](https://prettier.io/docs/en/options.html) para personalizar da forma que você achar melhor.

Meu arquivo ficou assim:

```jsx
{
    "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](https://github.com/prettier/eslint-plugin-prettier#options) 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:

```jsx
{
	"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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

# Conclusão

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

```jsx
"@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`:

```jsx
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`:

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

O arquivo `settings.json`

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