Trabalhando com WebStorm

6.1 Estrutura da IDE

Vamos entender o que você vê aqui.

1. Árvore de pastas e arquivos do seu projeto:

Aqui é exibido o conteúdo da pasta do nosso projeto — web-storm-10.

Eu criei um arquivo para deixar mais claro como está organizado. Na próxima aula, você também vai fazer isso.

2. Arquivo atualmente aberto:

É apenas o conteúdo do arquivo index.html, com o código em destaque.

3. Menu principal na parte superior:

Botões úteis no canto superior direito:

• «Triângulo verde» — botão para executar o projeto
• «Besouro» — botão para iniciar o modo de depuração
• «Lupa» — pesquisa no projeto
• «Engrenagem» — configurações

4. Menu lateral à esquerda:

Tem alguns botões úteis. Interessante para nós, o botão Terminal.

5. Barra de status:

À esquerda na barra de status está o caminho do arquivo atualmente aberto. À direita está a codificação: CRLF, UTF-8. Logo você vai entender tudo isso direitinho.

6.2 Estrutura do projeto

1. Arquivos HTML.

Esses arquivos têm a extensão .html, e WebStorm os marca com um ícone verde de duas setas. Aqui só tem um arquivo assim — index.html

Esses arquivos têm a extensão .js, e o WebStorm os marca com um ícone amarelo. Agora não há arquivos assim na captura de tela.

2. Arquivos CSS com estilos.

Esses arquivos têm a extensão .css, e WebStorm os marca com um ícone azul. Agora não há arquivos assim na captura de tela.

3. Arquivos de mídia estáticos. São arquivos que contêm dados, mas não códigos. Podem ser arquivos de texto, imagens, arquivos de mídia, etc. No momento, nosso projeto não tem nenhum.

4. Bibliotecas externas (External libraries). Agora não há nenhuma em nosso projeto, mas quando você as baixar, o WebStorm certamente as mostrará aqui.

6.3 Trabalhando com o terminal

No WebStorm, você pode trabalhar com o terminal do sistema operacional diretamente. No Linux e MacOS, o terminal é chamado de Terminal, então no WebStorm também é chamado assim. Na verdade, isso não é apenas uma escolha do WebStorm, é um nome consagrado entre programadores.

Para abrir o Terminal, você precisa clicar no botão terminal no menu lateral:

Você deve ver esta janela:

Nesta janela, você pode digitar comandos do seu sistema operacional. Vamos nos concentrar em um deles.

Vamos descobrir a versão atual do Windows. Para isso, você deve digitar:

    
      ver
    
  

Veja o que apareceu para mim:

Se você receber um erro, digite primeiro o comando «cmd», e depois o comando «ver».

6.4 O que é o plugin CodeGym e para que serve?

É um aplicativo, um módulo de software especial que se integra ao ambiente de desenvolvimento Intellij IDEA ou WebStorm e permite que você trabalhe nele com as tarefas do curso CodeGym. Por exemplo, escrever código de solução, enviá-lo para revisão, comparar sua solução com a "padrão" e muito mais. O progresso na resolução de tarefas no plugin é sincronizado com sua conta no CodeGym, então ele vai parecer o mesmo tanto no site quanto no ambiente de desenvolvimento.

Você pode baixar o plugin CodeGym do marketplace da Jetbrains, diretamente em seu ambiente de desenvolvimento. Vamos demonstrar as etapas usando o WebStorm como exemplo, mas os mesmos passos se aplicam ao Intellij IDEA.

1. Vá para a seção "Settings", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Se não houver seção de configurações, abra qualquer projeto ou crie um novo.

2. No menu que aparece, escolha a seção Plugins e abra a aba Marketplace. Na linha de pesquisa, digite codegym

3. Selecione o plugin e clique no botão Install.
4. Reinicie (Restart IDE) o WebStorm para começar a trabalhar com o plugin.
5. Você verá uma interface um pouco diferente e um botão Entrar na conta na barra horizontal superior.

Ao clicar, uma janela para entrar em sua conta será exibida, onde você deve inserir sua chave secreta:

Vamos lembrar que a chave secreta pode ser encontrada na seção “Configurações” → “Segurança e entrada”.

Após o login, o projeto e o SDK do Codegym começarão a ser carregados (não deve ser alterado para outra versão).

6. Para abrir uma nova tarefa, clique em Tasks no painel vertical à esquerda, então na carta da tarefa no painel lateral à esquerda, e na janela pop-up clique em Abrir:

7. Uma janela com duas abas se abrirá. Uma — com a condição, outra — para inserir o código.
8. Agora escreva a solução da tarefa e clique no botão Verificar

Instalação manual do plugin

1. Baixar o plugin
2. Vá para a seção "Settings", Windows/Linux File - Settings, MacOS WebStorm - Preferences.
3. No menu que aparece, selecione a seção Plugins e clique no ícone de engrenagem (⚙️) e escolha «Install Plugins from disk»
4. Abra a pasta onde o plugin está. Selecione-o (arquivo compactado) e clique em OK (Restart IDE).

Plugin instalado! Agora você pode resolver tarefas.

Sincronização de tarefas site — plugin

A lista de tarefas e seus status é atualizada automaticamente, a cada cinco minutos ou após o envio de qualquer tarefa para verificação (servidor codegym).

Portanto, se você resolveu uma tarefa no site, no plugin ela também estará na lista de tarefas resolvidas. Se precisar atualizar as informações dos status das tarefas agora mesmo, clique no seu avatar (no canto superior direito) e no menu suspenso escolha Sincronizar tarefas:

Modo iniciante no plugin

É uma versão simplificada para usuários que não têm (ou têm pouca) experiência com WebStorm e outros ambientes de desenvolvimento. Nela, algumas funções do WebStorm estão escondidas. Para desativar esse modo, clique no seu avatar (no canto superior direito) e no menu suspenso escolha Configurações:

Como ocultar a barra de navegação do plugin no modo PRO

Clique no ícone de Configurações (⚙️) e desmarque a opção "Exibir barra de navegação do plugin":