Existem vários complementos que podemos instalar no VS code e nesse artigo vou falar sobre os que mais utilizo e ajuda na produtividade tanto em equipe e individual.

Editor Config

A primeira ferramenta é o Editor Config, a sua configuração é bem simples e ela ajuda a padronizar configurações entre diferentes editores de código, com atom, sublime e etc.

Acesse a aba de extensões e pesquise por editorconfig, após instalação basta ir na raiz do projeto e clicar com o botão direito e selecionar Generate.Config. No arquivo de configuração você pode configurar o tipo de indentação, a quantidade de espaços e outros, abaixo segue o meu arquivo de configuração.

ESLint

O ESLint e uma ferramenta que ajuda a manter os padrões de código no nosso projeto. Por exemplo no javascript o ; no final é opcional, usar as aspas simples ou duplas e opcional, lembrando que o ESLint não é exclusivo do VS Code.

Primeiro devemos instalar a dependência do ESLint no nosso projeto com o comando yarn add eslint -D, depois vamos executar o comando yarn eslint —init. A partir daí ele vai começar a ser configurado através de perguntas que devemos responder, abaixo segue as perguntas e as respostas que eu escolhi.

Lembrando que no final ele pergunta se você deseja instalar algumas dependências usando npm, você pode escolher se for o seu caso, mas se quiser utilizar o yarn basta escolher NO e instalar manualmente as dependências que ele deixa informado acima da pergunta.

Agora precisamos configurar o settings.json do vs code, adicione as seguintes linhas no config.

"[javascript]": {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        }
    },
    "[javascriptreact]": {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        }
    },
    "[typescript]": {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        }
    },
    "[typescriptreact]": {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        }
    },

Agora se você for no seu index.ts, você vai ver que é o ESLint começou a marcar o seu código com erros, mas depois de ter feito a configuração acima basta dar um ctrol+s no seu código que o ESLint vai resolver tudo para você.

Para finalizar, precisamos configurar o ESLint para reconhecer importações e arquivos typescript, para isso precisamos usar o seguinte comando yarn add -D eslint-import-resolver-typescript e depois fazer a seguinte configuração no arquivo .eslintrc.json. 

Pronto, agora o seu vs code está pronto para iniciar projetos com typescript e com o eslint configurado para você ter o máximo de produtividade.

Espero que tenha gostado desse artigo e caso queira saber como configurar um projeto em typescript, clique aqui. Para baixar o VS Code clique aqui.