Ferramentas extras

Para incrementar ainda mais o seu ambiente de desenvolvimento nós recomendamos instalar esses plugins e softwares.

Google Chrome (plugins)

Visual Studio (temas e plugins)

Tema

Material Theme

Plugins

Necessários

Opcionais

Configuração

Abaixo segue a configuração do editor que utilizamos na Dev Samurai.

Você poderá copiar/colar e adaptar a sua necessidade.

Para editar as configurações do VSCode basta clicar em Ctrl + , ou no MacOS CMD + , e depois no ícone superior "Open Settings (JSON)".

{
  "window.zoomLevel": 3, // torna a janela do editor bem grande
  "editor.fontSize": 18, // tamanho da fonte
  "editor.lineHeight": 24, // altura da linha
  "editor.formatOnSave": true, // formata o arquivo ao salvar
  "editor.rulers": [80, 120], // tamanho das linhas de quebra
  "editor.wordWrap": "on", // habilitar por padrão a quebra automática
  "editor.tabSize": 2, // tamanho do tab em espaços
  "editor.renderLineHighlight": "gutter", // tipo de destaque de linha
  "editor.parameterHints.enabled": false, // desabilitar documentação ao passar o mouse
  "files.eol": "\n", // terminador de linha de arquivos (ideal para quem usa windows)
  "files.trimTrailingWhitespace": true, // elimina espaços desnecessários no final da linha
  "files.insertFinalNewline": true, // insere uma nova linha no final do arquivo
  "files.trimFinalNewlines": true, // remove espaços nas novas linhas finais
  "files.exclude": { // esconde estas pastas do browser de arquivos
    "**/bower_components": true,
    "**/node_modules": true,
    "**/node_modules": true
  },
  "terminal.integrated.fontFamily": "Menlo for Powerline", // fonte do console
  "terminal.integrated.fontSize": 16, // tamanho da fonte do console
  "terminal.integrated.fontWeight": "300", // espessura da fonte no console
  "workbench.startupEditor": "newUntitledFile", // como o editor inicia (com arquivo em branco)
  "git.enableSmartCommit": true, // habilita commits inteligentes
  "git.autofetch": true, // realiza o auto fetch no plugin de git
  "workbench.iconTheme": "material-icon-theme", // tema de ícones
  "workbench.colorTheme": "Material Theme Darker High Contrast", // tema do editor
  "breadcrumbs.enabled": true, // habilita o caminho de pão no cabeçalho do editor
  "javascript.updateImportsOnFileMove.enabled": "never", // não atualiza imports
  "emmet.syntaxProfiles": { // habilita emmet para jsx
    "javascript": "jsx"
  },
  "emmet.includeLanguages": { // habilita react e css no emmet
    "javascript": ["javascriptreact", "css"]
  }
}

Insomnia REST Client

Para que possamos receber o resultado de uma API JSON precisamos ter uma ferramenta de requisições de fácil interação.

Você até pode fazer isso com o Google Chrome simplesmente acessando o endereço URL da API.

Mas é um muito mais produtivo e profissional utilizar uma ferramenta que possa facilitar o seu trabalho.

Por isso sugerimos o Insomnia.

O Insomnia pode ser baixado pelo site https://insomnia.rest/download/

Basta baixar o pacote e seguir as instruções de instalação.

Reactotron

O Reactotron é uma ferramenta para inspeção de aplicativos React e React Native.

É uma ferramenta indispensável para debugs mais avançados.

O Reactotron pode ser baixado pelo site https://github.com/infinitered/reactotron

#Google Chrome (plugins)

#Visual Studio (temas e plugins)

#Tema

#Plugins

#Necessários

#Opcionais

#Configuração

#Insomnia REST Client

#Reactotron