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 Oficial | Para otimizar as cores do editor |
---|---|
Fira Code | Fontes de Texto para programadores.Clique aqui |
Color highlight | Mostrar as cores do código HEX |
DotENV | Ele adiciona sintaxe de arquivos de variáveis de ambiente. |
EditorConfig | Editores em formatações diferentes. |
ESLint | Padrão de Códigos |
Gitlens | Adiciona muitas funcionalidades para Git e Github |
GraphQL | GraphQL dentro do VS Code |
LiveServer | Adiciona funcionalidade de reload no navegador |
Liveshare | Compartilhamento de código em tempo real |
Material icon | Material Icon é uma extensão de ícones na hora da edição |
Styled Components | Parte de CSS com cores. |
Rocketseat ReactJS | Extensão da Rocketseat ReactJS. |
Rocketseat React Native | Extensã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
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
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.
Notion.so
Notion é um ótimo programa para organizar suas tarefas.
Você consegue baixá-lo através desse link:https://www.notion.so/desktop
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