CodePen & VSCode
CodePen é um editor de código on-line útil e libertador para desenvolvedores de qualquer nível de habilidade, e particularmente capacitante para pessoas que estão aprendendo a programar. Usando apenas seu navegador, permite que você escreva códigos principalmente em linguagens de front-end como HTML, CSS, JavaScript e veja os resultados à medida que os constrói. Além disso, é principalmente um ambiente de desenvolvimento social pois permite uma maneira fácil de compartilhar seu projeto com a comunidade dev.
Entretanto, em alguns casos, pode ser que você queira exportar o seu projeto para um outro editor de código-fonte, como o Visual Studio Code, desenvolvido pela Microsoft e assim praticar em um editor diferente.
Primeiros Passos
Crie uma pasta para armazenar o projeto no seu computador:
Abra a pasta com o VS code:
Clique com o botão direito do mouse em cima da pasta e escolha a opção "Abrir com --> Visual Studio Code"
Crie os arquivos para fazer a importação do conteúdo
O VS code abrirá a pasta do projeto, porém não há ainda nenhum arquivo.
Vamos então, criar 3 arquivos, referentes às 3 colunas do CodePen contendo o HTML, o CSS e o JAVASCRIPT .
- index.html;
- style.css;
- app.js;
Feito isso, cole o conteúdo do CodePen correspondente a cada arquivo.
No CodePen o conteúdo estava separado, já no VS code precisaremos referenciar os conteúdos para que fiquem interligados. Fazemos isso editando o arquivo index.html.
No arquivo index.html, editamos o <head> e adicionaremos o caminho do arquivo style.css. No <body> adicionaremos o link referente ao app.js. Veja a imagem, onde destaquei o código em amarelo:
Confira o resultado abrindo o arquivo index.html pelo seu navegador. Aqui no exemplo, usaremos o Google Chrome:
Veja como está abrindo direitinho no Google Chrome:
Agora você poderá praticar também no VS code e depois exportar seus projetos para o CodePen. Fica a seu critério!
Essa dica também é útil nos casos em que você ficará por um período sem internet, então nada melhor do que ter seus arquivos disponíveis offline =)
Top comments (1)
Nice article