JavaScript tem sido classificado consistentemente como a linguagem de programação favorita da maioria dos desenvolvedores.
Mais de 63% dos entrevistados em um Pesquisa Stackoverflow 2023 disseram que usam JavaScript. Por outro lado, o código do Visual Studio é um ambiente de desenvolvimento integrado (IDE) popular. O mesmo enquete mostrou que o VS Code é o editor de código preferido, com mais de 73% dos entrevistados votando a seu favor.
O Visual Studio Code oferece suporte a JavaScript, entre muitas outras linguagens. Neste artigo, descreverei a importância de executar JavaScript no Visual Studio Code, como criar um projeto JavaScript/escrever código, fornecer um guia passo a passo para executar JavaScript no VS Code e as práticas recomendadas para executar código JavaScript no código VS.
últimas postagens
Importância de executar JavaScript no VS Code
JavaScript está entre as poucas linguagens com suporte imediato no Código VS. Estas são algumas das razões pelas quais você pode querer executar JavaScript no VS Code:
- Executar e testar código: você pode escrever e executar código JavaScript sem sair do editor. Este editor tratará tudo o que você escrever em arquivos com extensão .js como código JavaScript. Este editor de código também destacará erros em seu código conforme você escreve e facilitará a depuração.
- Possui um terminal integrado: você não precisa sair do editor de código para executar comandos para criar novas pastas ou arquivos ou fazer controle de versão. Este terminal também permite visualizar mensagens de erro.
- Um grande ecossistema: você sempre pode procurar extensões se o recurso que procura não for compatível com o VS Code pronto para uso. Você pode usar essas extensões para obter recursos extras e obter suporte para várias bibliotecas e estruturas.
- Recarregamento a quente e servidor ativo: você pode ativar o salvamento automático para seu código JavaScript no VS Code. A opção de servidor ativo também permite que você execute código JavaScript em seu navegador enquanto você codifica. O recurso de recarga a quente garante que o editor de código selecione automaticamente todas as alterações e você não precise reiniciar o servidor ativo.
- IntelliSense e preenchimento de código: às vezes, os editores de código só precisam que você comece a escrever o código e oferecerão sugestões por meio de sugestão de código inteligente e preenchimento automático. Este recurso economizará seu tempo; você só precisa se concentrar na lógica.
- Compatibilidade entre plataformas: você pode instalar o VS Code no macOS, Linux e Windows. Este editor de código também oferece suporte a TypeScript, um sobrescrito de JavaScript que apresenta tipos.
Executando JavaScript no código VS
Configurar um ambiente para executar código JavaScript é fácil, independentemente do seu sistema operacional. O ideal é que sua máquina tenha pelo menos 4 GB de RAM para essas instalações. Siga estas etapas para começar.
Configurar o Node.js
Node.js é um dos ambientes de tempo de execução JavaScript mais populares. Com o Node.js, você pode executar JavaScrpt fora de um ambiente de navegador. O Node.js também tornou possível o uso de JavaScript no desenvolvimento de back-end com suas estruturas como Express.js.
Você pode baixar Node.js gratuitamente se você ainda não o tiver em sua máquina. Você também pode verificar se ele está instalado em sua máquina usando este comando:
node -v
Se estiver instalado, você verá algo assim em seu terminal:
Configurando o código do Visual Studio para desenvolvimento Javascript
O Visual Studio Code pode ser descrito como um editor de código e um IDE, dependendo do caso de uso. O VS Code oferece suporte a JavaScript por padrão. No entanto, alguns recursos JavaScript precisarão de extensões para serem executados.
O código VS pode ser baixado gratuitamente. Você pode escolher o relevante versão para download com base no seu sistema operacional.
Criando um projeto JavaScript
Agora você tem o software básico (ambiente de execução e editor de código) para criar um aplicativo JavaScript. JavaScript é usado para adicionar interatividade a sites e é usado principalmente com HTML e CSS. No entanto, você também pode usá-lo para scripts e estruturas de dados.
Agora posso criar um aplicativo simples e chamá-lo de JavaScript-VsCode-app.
Você pode usar estes comandos:
mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .
Escrevendo código JavaScript no código do Visual Studio
Para esta demonstração, escreverei apenas código JavaScript. Esta é a aparência do nosso projeto no editor de código.
Como você pode ver, temos apenas um arquivo (app.js). Agora posso escrever um programa simples que verifica se um número é par. Escreverei meu código no arquivo app.js. Este é o meu código:
function isEven(number) {
return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
console.log(myNumber + " is even.");
} else {
console.log(myNumber + " is odd.");
}
Executando código JavaScript no Visual Studio Code
Agora estamos prontos para executar JavaScript no VS Code. No entanto, precisamos entender o que esse código faz. Temos uma função que chamamos de ‘isEven’. Nossa função pega um número e retorna ‘true’ se o número for divisível por dois. Porém, se o número não for divisível por dois, retornará ‘falso’.
Agora podemos executar este comando:
node app.js
Você pode executá-lo no diretório raiz ou no terminal do VS Code.
Depois de executar o código que fornecemos na última etapa, obtemos ‘8 é par’ como saída.
E se verificarmos se 9 é par? Podemos alterar nosso código da seguinte maneira:
function isEven(number) {
return number % 2 === 0;
}
// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
console.log(myNumber + " is even.");
} else {
console.log(myNumber + " is odd.");
}
Isto é o que obtemos depois de executar nosso código:
Como você pode ver, ‘9 é ímpar’ é o nosso resultado.
Adicione as extensões necessárias
O programa que criamos acima é simples. No entanto, você pode querer construir um aplicativo complexo onde precise limpar seu código ou até mesmo depurar. No lado esquerdo do Código VS, clique no penúltimo botão.
Você também pode usar atalhos de teclado: CTRL+Shift+X.
Agora você pode pesquisar várias extensões para usar em seu código. Por exemplo, posso pesquisar ESLint.
Você pode ver que as extensões já estão habilitadas do meu lado. Sempre verifique a descrição de várias extensões para facilitar sua configuração e uso.
Use a extensão Code Runner
O Visual Studio Code oferece suporte a centenas de linguagens de programação. Você pode usar Corredor de código para executar códigos nas linguagens de programação mais comuns. Localize a guia de extensões no lado esquerdo do seu VS Code e pesquise Code Runner.
Clique em instalar e habilitar a extensão, e agora você está pronto para executar seu código. Eu tenho uma declaração simples dizendo console.log(“Hello, World!”); no meu arquivo app.js. Posso executá-lo usando Code Runner. Usarei o atalho F1 e digitarei RUN CODE.
Isto é o que recebo no meu terminal:
[Running] node "/home/tk/JavaScript-VSCode-app/app.js" Hello, World! [Done] exited with code=0 in 2.106 seconds
Melhores práticas para escrever código JavaScript com eficiência
A configuração que temos até agora é perfeita para programas JavaScript simples. No entanto, você deve manter estas práticas recomendadas em mente se quiser executar JavaScript no VS Code sem problemas:
- Use um linter de código: a legibilidade pode se tornar um problema à medida que o tamanho do seu arquivo JavaScript aumenta. Você pode usar uma extensão como ESLint mais bonito para garantir que você detecte erros em seu código antecipadamente e aumente a legibilidade de seu código.
- Mantenha linguagens diferentes em arquivos diferentes: um projeto front-end típico pode exigir que você escreva código HTML, CSS e JavaScript. Você pode ficar tentado a escrever todo o código em um documento. No entanto, sempre certifique-se de escrever seu código HTML, CSS e JavaScript em arquivos diferentes.
- Aproveite as vantagens das extensões: o mercado VS Code possui milhares de extensões que facilitam o trabalho com diversas bibliotecas. Explore o Mercado e escolha extensões com as melhores classificações e documentação.
Configurando Git no Visual Studio Code para integração de controle de versão
Até agora, fornecemos as etapas para configurar o VS Code e executar JavaScript neste editor de código. No entanto, você pode precisar usar o controle de versão como o Git para rastrear alterações em seu código ou até mesmo enviá-las para um repositório remoto como o GitHub. Estas são as etapas a seguir:
- Instale o Git: Git é o controle de versão mais usado no desenvolvimento. Baixar Git versão que se adapta ao seu sistema operacional e às especificações da máquina. Você pode executar este comando após a instalação para verificar sua versão do Git:
git -v
Se você instalou corretamente, você terá algo semelhante a isto em seu terminal:
- Inicialize um repositório Git: você pode rastrear todas as suas alterações e confirmá-las (prepará-las) no Git. Execute este comando na raiz da pasta do seu projeto:
git init
- Configure sua identidade Git: você deve informar ao Git quem você é configurando seu nome de usuário e e-mail. Execute estes comandos para começar:
git config –global user.name “Seu nome”
git config –global user.email “[email protected]”>[email protected]”
Substitua ‘Seu nome’ e ‘[email protected]‘ com os detalhes relevantes.
- Preparar e confirmar alterações: agora você configurou o Git e agora pode preparar e confirmar suas alterações. Execute este comando para verificar todos os arquivos não rastreados:
git status
Agora você pode ver todos os arquivos não rastreados e não confirmados.
Execute este comando para preparar as alterações:
git add .
Execute git status novamente e você verá algo semelhante a isto:
Agora você pode enviar seus arquivos. Execute este comando:
git commit -m “your commit message”
Substitua “sua mensagem de commit” por algo que descreva suas ações.
Agora você pode conectar seu controle de origem a plataformas de repositório remoto, como GitHub.
Conclusão
Esperamos agora que você entenda como criar um ambiente e executar JavaScript no VS Code. Você pode precisar de extensões extras para trabalhar com bibliotecas e estruturas JavaScript neste editor de código. No entanto, mantenha sempre o Visual Studio Code atualizado se quiser aproveitar todos os recursos mais recentes.
Confira nosso artigo sobre os melhores recursos para aprender JavaScript e aprimorar seus conhecimentos.