Com a crescente demanda por profissionais da tecnologia, um dos grandes desafios é a acessibilidade a aplicações leves que viabilizem o desenvolvimento da estrutura do código em si. Pensando em desenvolvimento web básico que é para a grande maioria a porta de entrada para a área de programação vamos utilizar alguns passos para configurarmos nosso ambiente de desenvolvimento.

Windows x Linux x MacOS

Independentemente de qual SO a pessoa utilize, da para programar em qualquer um dos três, obviamente determinado sistema irá performar melhor que outro em determinadas situações, mas não é o caso de se analisar isso sendo você um desenvolvedor iniciante.

Vamos primeiramente configurar nosso Google Chrome para que nenhuma extensão ou complemento instaladas possam vir a conflitar com o desenvolvimento em andamento. O modo que iremos usar será o incógnito ou aba anônima também.

No aplicativo Google Chrome, clicar com o botão direito e em seguida propriedades.

No campo Destino, substituir o caminho pelo seguinte:

“C:\Program Files\Google\Chrome\Application\chrome.exe”–incognito

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Após isso, clique em alterar o ícone e selecione algum de sua preferência para que fique fácil de identificar.

Logo após, crie um link do Promp de comando para  área de trabalho.

Menu inicar > promp de comando e criar atalho.

Baixar e instalar a fonte JetBrains Mono – https://www.jetbrains.com/lp/mono/

Como IDE usaremos o Visual Studio Code da Microsoft pela constância em atualizações e pela comunidade muito ativa, o que facilita tirarmos eventuais dúvidas que ocorrem no processo de uso da ferramenta. Vale destacar que apesar das constantes atualizações o layout do VSCode se mantém, o que facilita muito no uso. Outro motivo também é a sua leveza, possibilitando ser usado em máquinas mais simples no quesito hardware.

Sendo assim, o próximo passo é baixar o VSCode no formato compactado e portável (.zip) – https://code.visualstudio.com/

Siga conforme a imagem abaixo

Ao clicar, será direcionado para a seguinte página.

 

 

 

 

 

 

 

 

 

 

 

 

 

No meu caso, estou usando o Windows na versão 64 bits, caso você não saiba qual a versão do seu SO, copie e cole o seguinte código em seu prompt de comando:

wmic os get osarchitecture

Executar o comando me retornou a seguinte informação, conforme print abaixo

Caso seja do seu interesse saber mais a respeito, este link pode ajudar: https://superuser.com/a/321995

Após baixada a versão .zip do VSCode, extraia para alguma pasta de sua preferência.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Um detalhe muito importante é que ao terminar de extrair para o local se sua preferência, você deve criar uma pasta chamada “data” conforme imagem acima. É nesta pasta que serão instaladas as extensões, garantindo também a portabilidade e evitando possíveis conflitos caso você por algum motivo já tenha o VSCode instalado em sua máquina.

Próximo passo é criar um atalho do aplicativo Code para a área de trabalho e renomear o atalho criado para VSCode Portable (opcional).

Inicie o VSCode para começarmos a configurar pela primeira vez a IDE.

Abaixo a tela da primeira abertura

Na primeira abertura ele por padrão detecta o idioma que nosso SO usa e sugere alterar para o mesmo idioma usado. É opcional usar português ou inglês, porém aconselho a usar no idioma inglês. De qualquer forma, clique no Instalar e Reiniciar conforme imagem abaixo para termos sempre uma 2º opção de idioma a ser utilizado.

Pronto, já temos o idioma em português instalado.

Agora, vamos retornar o idioma para inglês e prosseguir.

Aperte F1 e comece a digitar “idioma”

Selecione o inglês.

Próximo passo é instalar as extensões que são muito úteis e nos ajudam na produtividade.

A primeira extensão que iremos instalar é a Prettier que nos auxiliará na formatação do código.

Clique no Install e aguarda a finalização. Não será pedido para reiniciar o VSCode.

A próxima extensão irá nos ajudar a identificar visualmente melhor os tipos de arquivos que estamos trabalhando.

Note que logo após instalarmos o vscode-icons a IDE nos pergunta qual modelo adotaremos. Se será o padrão ou o recém instalado.

Caso você por algum motivo tenha perdido ela tela, aperte F1 e digite “theme” e no  Preferences:File Icon Theme de enter e selecione o VSCode Icons.

A próxima extensão é a Winter is Coming Theme que visualmente é agradável e modifica o esquema de cores padrão da IDE.

Logo após instalar ele já ira pedir para que escolhamos qual o exato tema usaremos.

Recomendo o Dark Blue – No Italics por pura estética. Vá alternando e veja qual lhe é melhor.

Para trocar de tema é só apertar F1 e seguir a tela abaixo de forma parecida com o passo da extensão anterior.

Nossa última extensão é a Live Server que usa seu navegador (pretendemos que seja também no modo anônimo do Google Chrome) para visualizar as mudanças no seu código para web de forma menos burocrática tornando o processo mais rápido.

Recomendo ler a documentação para aprender a usar a extensão da forma correta, porém adianto que é muito fácil e intuitivo.

O próximo passo é muito importante pois iremos trabalhar com um arquivo no formato JSON para personalizarmos nosso settings.

O código a ser copiado para dentro da IDE será este abaixo.

{

  “extensions.ignoreRecommendations”: true,

  “debug.javascript.codelens.npmScripts”: “never”,

  “telemetry.telemetryLevel”: “off”,

  “editor.minimap.renderCharacters”: false,

  “editor.minimap.maxColumn”: 90,

  “editor.smoothScrolling”: true,

  “editor.minimap.showSlider”: “always”,

  “editor.cursorBlinking”: “phase”,

  “editor.cursorSmoothCaretAnimation”: true,

  “workbench.editor.enablePreviewFromCodeNavigation”: false,

  “workbench.editor.enablePreviewFromQuickOpen”: false,

  “workbench.startupEditor”: “newUntitledFile”,

  “workbench.colorTheme”: “Winter is Coming (Dark Blue – No Italics)”,

  “workbench.iconTheme”: “vscode-icons”,

  “workbench.editor.labelFormat”: “short”,

  “debug.console.fontFamily”: “JetBrains Mono”,

  “editor.fontFamily”: “‘JetBrains Mono’, Consolas, monospace”,

  “editor.fontLigatures”: false,

  “editor.fontSize”: 19,

  “editor.lineHeight”: 24,

  “update.mode”: “manual”,

  “editor.renderWhitespace”: “all”,  

  “editor.rulers”: [

    90

  ],

  “editor.tabSize”: 2,

  “terminal.integrated.fontSize”: 18,

  “emmet.syntaxProfiles”: {

    “javascript”: “jsx”

  },

  “emmet.includeLanguages”: {

    “javascript”: “javascriptreact”

  },

  “breadcrumbs.enabled”: false,

  “editor.parameterHints.enabled”: true,

  “vsicons.dontShowNewVersionMessage”: true,

  “files.autoSave”: “onFocusChange”,

  “terminal.integrated.fontFamily”: “JetBrains Mono”,

  “javascript.updateImportsOnFileMove.enabled”: “always”,

  “workbench.editor.enablePreview”: false,

  “[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

    }

  },

  “explorer.compactFolders”: false,

  “window.title”: “${dirty}${activeEditorShort}${separator}${rootName}${separator}VSCode (Minicamp)”,

  “editor.defaultFormatter”: “esbenp.prettier-vscode”,

  “editor.formatOnSave”: true,

  “prettier.singleQuote”: true,

  “prettier.arrowParens”: “avoid”,

  “editor.minimap.enabled”: true,

  “[json]”: {

    “editor.defaultFormatter”: “vscode.json-language-features”

  },

  “[jsonc]”: {

    “editor.defaultFormatter”: “vscode.json-language-features”

  },

  “liveServer.settings.donotShowInfoMsg”: true,

  “liveServer.settings.CustomBrowser”: “chrome:PrivateMode”

}

 

Aperte F1 e digite JSON e selecione o open user settings conforme a imagem.

Ao clicar uma aba no VS será aberta com algumas poucas linhas de código, selecione-as e apague. No lugar cole o código copiado e feche a aba. Notará que a fonte padrão ira mudar logo em seguida para a baixada e instada da JetBrains.

Com isso seu ambiente estará pronto e otimizado.

Boa sorte e bons estudos!

Caio Guilherme Chaves Jannuzzi de Souza – Vassouras – RJ Especialização em Gestão e Cálculo de Projetos de Engenharia de Estruturas e Engenheiro civil. Também é professor nos cursos de Engenharia da Universidade de Vassouras e desenvolve artigos científicos e técnicos na área de Engenharia, Educação e Computação. Desenvolvedor Back-end utilizando linguagem Python. Possui conhecimentos em HTML, CSS e Javascript.