Visual Studio Code

O que é

É um editor de texto criado pela Microsoft, que é amplamente utilizado por desenvolvedores por conta facilidade de customização e simplicidade de uso. Para proporcionar essa simplicidade, o Visual Studio Code, por padrão, vem com quase nada instalado. Para isso utilizamos os plugins para deixar ele com a nossa cara.

Plugins

Muitos plugins são apenas para proporcionar um produtividade maior, enquanto que outros ajudam nas padronização do código, de comentários, dentre outros. Estes útimos são quase obrigatórios para alinhar um padrão com o time inteiro. Vamos citar alguns que são indispensáveis:

• Eslint
• Prettier
• vscode-styled-components
• Code Spell Checker
• Brazilian Portuguese - Code Spell Checker

Como instalar

Para instalar qualquer plugin, bastar acessar a aba de Extensões do Visual Studio Code, pesquisar o plugin que deseja, clicar no plugin e clicar para fazer o download.

Configurando

Alguns plugins não precisam de configuração prévia para funcionarem corretamente, como é o caso do vscode-styled-components, do Code Spell Checker e doBrazilian Portuguese - Code Spell Checker. Já o Eslint e o Prettier precisam de alguns detalhes a mais

Eslint

• Após a instalação do Eslint, será necessário adicionar algumas linhas na configuração do VS Code. Para isso, aperte CTRL + SHIFT + P, digite 'json' e selecione essa opção:

  ;

• Feito isso, basta colar o código a seguir no arquivo que foi aberto:

  // Para corrigir os erros quando salvar
  "eslint.autoFixOnSave": true,
  
  // Linguagens que o Eslint irá validar
  "eslint.validate": [
      {
        "language": "javascript",
        "autoFix": true
      },
      {
        "language": "javascriptreact",
        "autoFix": true
      },
      {
        "language": "typescript",
        "autoFix": true
      },
      {
        "language": "typescriptreact",
        "autoFix": true
      }
    ],
  

• Com isso finalizamos a configuração do Eslint no VS Code, o próximo passo é configurar um determinado projeto. Para isso, é necessário instalar o Eslint no projeto.

  yarn add eslint -D
  # ou
  npm install eslint -D
  

  • Depois de instalado, basta inicializa:

  yarn eslint --init
  # ou
  npm eslint --init
  

  • Com isso irão aparecer uma série de perguntas no terminal, que deverão ser respondidas de acordo com a aplicação que deseja colocar Eslint.

    Obs: Após concluir a configuração, se foi utilizado o comando usando yarn ao invés de npm, basta excluir o arquivo package-lock.json e depois rodar yarn no terminal. Isso faz com que o yarn mapeie as novas dependências.

• Ao final deste procedimento, será gerado um arquivo .eslintrc.js, que contém as regras e plugins de validação do código do projeto. As mesmas podem ser adicionadas da seguinte forma.

    // .eslintrc.js
      // ...
      rules: {
        'class-methods-use-this': 'off', // desativa uma regra que diz que todo método de uma classe precisa usar a palavra this
        'no-param-reassign': 'off', // desativa uma regra que diz que não é permitido receber parâmetro e fazer alterações nele
        camelcase: 'off', // desativa uma regra que diz que toda variável precisa ser escrita no formato camelCase
        'no-unused-vars': ['error', { argsIgnorePattern: 'next' }], // não reclamar caso a variável utilizada seja next que é usada pelos middlewares do express
      },
      // ...
  

Prettier

A função do prettier é deixar o código bonito, quebrando linha quando é necessário, colocando parênteses, etc. Para isso precisamos fazer com que o prettier se comunique com o Eslint e siga a regras definidas pelo mesmo. Dessa forma, não precisamos configurar o prettier diretamente no VS Code, bastando apenas instala-lo. Portanto para fazer ele funcionar em um determinado projeto precisamos adiciona-lo com o seguinte comando:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D 
# ou
npm instal prettier eslint-config-prettier eslint-plugin-prettier -D

Repare que além do prettier, instalamos plugins do Eslint. Isso serve para fazer a tal comunicação entre os 2, como citado anteriormente.

• Após instalado, dentro do arquivo .eslintrc.js, em extends, adicionar "prettier" dentro do array. Depois, declarar uma propriedade chamada plugins passando o plugin do prettier que acabamos de instalar: plugins: ['prettier'], e dentro das rules, acrescentar: "prettier/prettier": "error". Ao final temos que o .eslintrc.js, fica semelhante a esse:

  module.exports = {
    env: {
      es6: true,
      node: true,
    },
    extends: ['airbnb-base', 'prettier'],
    plugins: ['prettier'],
    globals: {
      Atomics: 'readonly',
      SharedArrayBuffer: 'readonly',
    },
    parserOptions: {
      ecmaVersion: 2018,
      sourceType: 'module',
    },
    rules: {
      'prettier/prettier': 'error',
      'class-methods-use-this': 'off',
      'no-param-reassign': 'off',
      camelcase: 'off',
      'no-unused-vars': ['error', { argsIgnorePattern: 'next' }],
    },
  };
  

• Por fim, basta criar um arquivo de configuração do prettier, na raiz do projeto com o nome de .prettierrc e colocar algumas regras para não conflitar com o padrão do airbnb(caso esteja utilizando).

  // .prettierrc
  {
    "singleQuote": true,
    "trailingComma": "es5"
  }