Novidades no WebStorm 2023.1

O tão esperado suporte para Astro chegou ao WebStorm! Você pode obtê-lo com o nosso novo plug-in Astro, que pode ser instalado em Preferences / Settings | Plugins. O plug-in fornece funcionalidade básica, incluindo realce de sintaxe, complementação de código com importações automáticas, refatorações, navegação, formatação correta e muito mais.

Adicionamos suporte para TypeScript em templates do Vue. Ele é ativado quando você define o atributo lang de uma tag script com o valor ts. Anteriormente, JavaScript era sempre usado, ignorando o atributo lang na tag script. O WebStorm agora fornece suporte para inline casting, estreitamento de tipos aprimorado e informações corretas sobre tipos inferidos na documentação rápida em templates de componentes de arquivo único do Vue.

Vale a pena mencionar mais uma melhoria específica para o Vue neste lançamento. Agora, você tem complementação de código para seus eventos de componentes personalizados em templates do Vue. Isso funciona de maneira idêntica no JavaScript e no TypeScript.

Quando você copia e cola o código de um arquivo para outro, o WebStorm adiciona automaticamente todas as importações necessárias. Antes isto acontecia com JavaScript básico, linguagens TypeScript e templates do React. No WebStorm 2023.1, isto agora funciona para templates do Vue, Svelte, Astro e Angular também.

Adicionamos uma nova maneira de mostrar o tipo esperado para um prop de componente. Se você pressionar Ctrl+P onde props são passados para um componente, receberá um pop-up com informações de tipo. Antes, essas informações estavam disponíveis apenas quando se passava por cima com o mouse, o que era inconveniente para usuários que preferem usar o teclado.

O WebStorm adiciona automaticamente uma importação para símbolos globais e exportados aos seus componentes na complementação de código quando você está trabalhando em templates do Angular. O IDE também oferece suporte para a diretiva Angular 15 NgoptimizedImage, fornecendo uma inspeção que sugere o uso de ngSrc em vez de src para img.

Agora, você pode executar todos os testes em uma pasta específica através do menu de contexto com o botão direito. Esse recurso funcionou para o Vitest e agora também o implementamos para o Jest.

O WebStorm agora automaticamente transformará suas strings com aspas simples ou duplas em literais de template sempre que você digitar ${. Isto funciona para strings brutas, bem como para propriedades JSX.

Melhoramos o comportamento do IDE ao adicionar importações automáticas de diferentes bibliotecas com o mesmo nome de elemento exportado. Importações automáticas agora são adicionadas com base nas importações existentes no projeto. Se você precisar adicionar uma importação para um elemento de outra biblioteca, a instrução de importação deverá ser adicionada manualmente. O WebStorm fornecerá um pop-up como nas versões anteriores.

Alinhamos o comportamento da importação para o TypeScript e o JavaScript. No TypeScript, você verá as alternativas de importação nas ações de contexto como ocorre com o JavaScript. É possível abrir ações de contexto pressionando Alt+Enter. As configurações unificadas estão em Preferences / Settings | Editor | General | Auto Import.

Nesta versão, adicionamos suporte para opções de configuração, como complementação de nomes de classes personalizados na opção classAttributes ou experimentais como tailwindCSS.experimental.configFile. Você pode definir essas opções de configuração em Preferences / Settings | Languages & Frameworks | Style Sheets | Tailwind CSS.

O WebStorm 2021.3 introduziu a complementação para HTML que mostrava nomes de tags ou abreviações enquanto você digitava. Esse comportamento pode ser uma fonte de distração na hora de inserir texto comum no HTML, então adicionamos uma opção para desativá-lo. Você pode encontrar a nova opção em Preferences / Settings | Editor | General | Code Completion.

Agora, você pode usar uma correção rápida para corrigir a formatação de tabelas em Markdown. Além disso, há uma nova ação do editor Fill Paragraph que facilita a quebra de longos trechos de texto em várias linhas de mesma largura. Por fim, introduzimos uma página dedicada às opções de configurações de Markdown em Preferences / Settings | Editor | General | Smart Keys. Leia esta postagem do blog para saber mais.

Há uma nova opção em Preferences / Settings | Editor | Code Style | Style Sheets | CSS | PostCSS que permite especificar qual estilo de comentário de linha será usado em seus arquivos PostCSS. Para comentar linhas você pode usar Ctrl+/ que o estilo de comentário de linha que você escolheu será usado.

No ano passado, apresentamos uma IU nova e mais minimalista para o WebStorm e outros IDEs da JetBrains. Refinamos ainda mais a nova IU com base nos seus comentários e convidamos você a experimentá-la mais uma vez. Você pode fazer isso em Preferences / Settings | Appearance & Behavior | New UI. Continue lendo para conhecer as principais alterações da IU que fazem parte deste lançamento.

O WebStorm 2023.1 permite dividir a área das janelas de ferramentas e organizá-las para que você possa ver as duas ao mesmo tempo. Arraste o ícone da janela de ferramentas da barra lateral e solte-o sob o separador. Como alternativa, você pode clicar com o botão direito do mouse no ícone e selecionar o novo posicionamento da janela de ferramentas usando a ação Move to.

Para facilitar o trabalho em telas menores, introduzimos o modo compacto (Compact Mode). Ele fornece um visual mais consolidado com uma barra de ferramentas e um cabeçalho de janela de ferramentas mais enxutos, espaçamentos e preenchimentos reduzidos e ícones e botões menores. Para ativar o novo modo, acesse View | Appearance | Compact Mode no menu principal.

Implementamos uma das solicitações de recursos mais populares para a nova IU: abas de projeto para usuários do macOS. Quando há vários projetos abertos, agora você pode alternar entre eles usando as abas de projeto exibidas na barra de ferramentas principal.

Em resposta aos comentários que recebemos sobre a nova IU do IDE, reformulamos o widget Run no cabeçalho da janela principal para torná-lo menos intrusivo e mais agradável aos olhos.

Adicionamos alguns recursos populares que faltavam na nova IU. Por exemplo, o seletor Show Hidden Tabs está de volta junto com a ação Fetch no pop-up Branches. Além disso, fizemos melhorias nos modos Distraction Free e Zen, ocultando os principais elementos da barra de ferramentas e exibindo o nome do arquivo no escopo.