Novidades no WebStorm 2021.2

Você nos pediu para melhorar o recurso Live Edit, e isso foi exatamente o que fizemos! Agora, o WebStorm pode atualizar automaticamente as páginas em um navegador à medida que você edita e salva seus arquivos HTML, CSS e JavaScript. Para começar, abra um arquivo HTML no editor, passe o mouse sobre ele e clique no ícone do navegador que você deseja usar. Há suporte para todos os navegadores.

Você gosta de realizar certas operações ao salvar? Agora, o WebStorm 2021.2 oferece suporte corretamente para esse workflow! Reformulamos todas as funcionalidades existente, reunimos todas elas em um só lugar e aprimoramos tudo o com algumas novas opções, incluindo a capacidade de reformatar o código e otimizar as importações ao salvar.

Você sabia que o WebStorm pode adicionar instruções de importação ausentes conforme você complementa símbolos ES6? Agora, ele também pode fazer o mesmo para módulos CommonJS – importações require podem ser inseridas com complementação de código.

O WebStorm agora oferece suporte corretamente para a sintaxe TypeScript usada em comentários JSDoc nos seus arquivos .js. Reformulamos e expandimos o suporte existente e corrigimos muitos problemas conhecidos.

Precisa adicionar rapidamente uma função de seta ao seu código? Agora, você pode envolver um bloco de código com uma função de seta usando Ctrl+Alt+J. Você também pode digitar arf e pressionar Tab para expandir o modelo e adicionar uma função de seta vazia.

A guia de visualização, que costumava funcionar apenas para a exibição Project, agora funciona quando você depura seu aplicativo. Para ativá-la, acesse Preferences / Settings | Editor | General | Editor Tabs e marque a caixa de seleção Enable preview tab. Isso ajuda a evitar desordem no editor com vários arquivos, pois o WebStorm abre os arquivos sucessivamente em uma única guia.

Você não precisa mais perder tempo refatorando funções e valores useState um por um: agora, o WebStorm pode renomear ambos para você! Posicione o cursor em um valor de estado e pressione Shift+F6 ou acesse Refactor | Rename no menu de contexto ativado com o botão direito do mouse.

Ficou ainda mais fácil adicionar novas dependências de projeto a package.json agora que a complementação de código funciona para pacotes npm privados. O WebStorm permite verificar informações sobre as versões mais recentes do pacote, assim como ele faz com pacotes públicos.

Deseja executar testes para verificar seu código antes de o submeter? Adicionamos uma nova opção para ajudar você a fazer isso. Clique no ícone de engrenagem na janela de ferramentas Commit, selecione Run Tests e escolha a configuração de execução desejada. O WebStorm testará seus arquivos e o avisará sobre quaisquer problemas.

Começando nesta versão, você pode aproveitar a UI do WebStorm totalmente traduzida nos idiomas chinês, coreano e japonês. A tradução está disponível como plug-ins de pacote de idiomas não inclusos, que podem ser instalados em Preferences / Settings | Plugins.

Agora, ficou mais fácil reorganizar janelas de ferramentas. Passe o mouse sobre a parte superior da janela de ferramentas que você deseja mover e, em seguida, arraste-a até o local desejado e solte-a lá. Isso funciona também quando você quer desanexar uma janela de ferramentas da janela principal do WebStorm: basta arrastá-la para fora do quadro do IDE.

Você sabia que pode atribuir ícones personalizados aos seus projetos? Tornamos esse processo mais simples. Clique com o botão direito do mouse em um projeto na tela Welcome do WebStorm, selecione a opção Change Project Icon… e carregue o arquivo SVG que você deseja associar a esse projeto.

Você não perderá mais nenhuma atualização crítica de produto do Toolbox App. O WebStorm informará você se uma nova versão estiver disponível para download e oferecerá a opção de fazer upgrade: apenas certifique-se de ter o Toolbox App versão 1.20.8804 ou posterior.

Agora, há um nó com configurações avançadas na caixa de diálogo Preferences/Settings. Lá, você pode encontrar algumas novas opções de configuração, incluindo a capacidade de definir uma margem esquerda no Modo sem distrações. Além disso, agora você pode pular entre nós recém-abertos com mais rapidez: basta usar as setas no canto direito da caixa de diálogo.