Last updated: 2022-03-10

Instalação dos Programas

Instalação - VS Code

Para instalar os programas você precisa começar na ordem de instalação.

Primeiro instalamos o VS Code para editar os códigos.

Clique neste link para instalar o VS Code

Durante a instalação lembre-se de marcar a opção "Abrir com VS Code"

Configuração do VS Code

O segundo passo é fazer a configuração do VS Code, nós utilizamos as configurações indicadas pela Rocketseat na hora da instalação

Extensões e Ferramentas Utilizadas no Vídeo:
Dracula OficialPara otimizar as cores do editor
Fira CodeFontes de Texto para programadores.Clique aqui
Color highlightMostrar as cores do código HEX
DotENVEle adiciona sintaxe de arquivos de variáveis de ambiente.
EditorConfigEditores em formatações diferentes.
ESLintPadrão de Códigos
GitlensAdiciona muitas funcionalidades para Git e Github
GraphQLGraphQL dentro do VS Code
LiveServerAdiciona funcionalidade de reload no navegador
LiveshareCompartilhamento de código em tempo real
Material iconMaterial Icon é uma extensão de ícones na hora da edição
Styled ComponentsParte de CSS com cores.
Rocketseat ReactJSExtensão da Rocketseat ReactJS.
Rocketseat React NativeExtensão da Rocketseat React Native.
Configuração do VS Code em Settings:

As configurações de instalação estão nogithub da Rocketseat

Você consegue alterar as configurações apertandos as teclas CTRL + SHIFT + P e logo depois apertando enter. Cole o código que está no github dentro do settings.js do VS Code.

Instalação do Git

Git é o programa de versionamento

Clique aqui para baixar o Git

Abaixo temos algumas dicas pra quem desenvolver os códigos em

Instalação do Node (Para quem programa em Javascript)

Para fazer a instalação do Node é só entrar na página do Node.org

Clique aqui para instalar o Node

Yarn

Para fazer a instalação do Yarn é só digitar o código abaixo de acordo com adocumentação do Yarn

npm install -g yarn

PowerShell - Permissões

Pode ser que você veja um erro na hora de executar o Yarn ou npm.

Isto é uma política de segurança do Powershell para evitar que scripts maliciosos sejam executados indevidamente no seu sistema. Por isso, todos os scripts que não forem assinados terão sua execução bloqueada. Ou seja, a política de execução está como Restricted (que é o padrão).

Você pode controlar estas permissões usando o cmdlet Set-ExecutionPolicy. E pode conferir qual a política de execução atual usando o cmdlet Get-ExecutionPolicy.

PS C:\Users\LINQ> Get-ExecutionPolicy Restricted PS C:\Users\LINQ> Set-ExecutionPolicy RemoteSigned PS C:\Users\LINQ> Get-ExecutionPolicy RemoteSigned

Instalação do WampServer (Para quem programa em PHP)

Para simular um servidor PHP use o Wampserver no Windows.

Clique aqui para baixar o Wampserver

Notion.so

Notion é um ótimo programa para organizar suas tarefas.

Você consegue baixá-lo através desse link:https://www.notion.so/desktop

Também indicamos otrelloe oRunrun.it

Instalação dos Programas da Adobe

Através do link do Creative Cloud você consegue instalar todos os programas baixando apenas 1 instalador.

Se você já tem assinatura entre nesse linkhttps://creativecloud.adobe.com/cc?locale=pt

Instalação do Google Chrome

Google Chrome é uma ferramenta muito importante no desenvolvimento de aplicações web.

Através desse link você consegue baixá-lohttps://www.google.com/intl/pt-BR/chrome/

Instalação do Filezilla

Há quem prefira fazer deploy via git, mas ainda há pessoas que usam o Filezilla pra administrar diretórios no servidor.

Caso queira baixá-lo, você consegue através desse linkhttps://filezilla-project.org/

Lembre-se de baixar a versão Client.

Format Factory

O maior programa de conversão de formatos/extensão de arquivos para windows.

Entre por esse link para instalá-lo:https://formatfactory.br.uptodown.com/windows

Pronto!

Agora você precisa escolher qual linguagem vai desenvolver e ir para a documentação.

No caso do desenvolvimento web, comece por HTML > CSS > JAVASCRIPT > REACT / PHP / NODE.

Sass

Trabalhando com processador de Sass via terminal do VS Code.

Para criar um projeto em sass basta criar uma pasta chamada /sass dentro da pasta /css, assim você conseguirá organizar os arquivos gerados pelo sass.

Você pode criar um arquivo style.scss para começar a trabalhar com sass e usar o @import para importar parte dos arquivos que vão ser compilados.

Após a criação você consegue desenvolver e acompanhar o resultado final utilizando o código abaixo

sass --watch css/sass/style.scss:css/style.css --style compressed

Tailwind

Trabalhando com tailwind como framework de desenvolvimento de layouts.

npx tailwindcss -i ./css/sass/style.scss -o ./css/stylecss --watch