Novidades no WebStorm 2020.1

O WebStorm 2020.1 vem com um visual mais refinado, suporte para o Vuex e a Composition do Vue, uma opção para executar o Prettier ao salvar e algumas melhorias para JavaScript e TypeScript.

Visual

JetBrains Mono

Nova fonte para o editor padrão

No ano passado, desenvolvemos uma fonte que permite codificar com mais conforto, sem forçar muito a visão. Vamos dar as boas-vindas à JetBrains Mono, um novo tipo de fonte open source criada especificamente para codificação! O WebStorm 2020.1 acompanha esse novo tipo de letra selecionado por padrão.

Modo Zen para codificação concentrada

Codificação sem distração

Adicionamos um novo modo de visualização Zen para ajudar você a se concentrar completamente no seu código. Use-o sempre que quiser trabalhar em um editor de tela cheia com o código fonte centralizado e os elementos de UI ocultos para minimizar a distração.

Documentação rápida ao passar o mouse

Exibindo a documentação ao passar o mouse

Você não precisa mais chamar explicitamente o pop-up Documentation. Agora, ele aparece automaticamente quando você passa o mouse sobre um símbolo, agilizando a localização da documentação relacionada. Se houver um problema no seu código, o pop-up também oferecerá uma correção rápida que pode ser aplicada para resolvê-lo.

Usando o IDE para edição rápida

Você sempre quis usar o IDE para editar um arquivo rapidamente? Com o novo modo LightEdit, você pode abrir um arquivo individual na janela do editor de texto, sem precisar carregar o projeto inteiro.

Personalizando a barra de status

Se você não tem a barra de status oculta e a usa só de vez em quando, agora pode decidir o que gostaria de ver nela exatamente. Clique com o botão direito do mouse na barra de status e remova os elementos que você considera desnecessários.

Estruturas

Preenchimento de código da API Composition do Vue

Trabalhando com a API Composition

No WebStorm 2020.1, você encontrará suporte para os componentes definidos usando a API Composition do Vue 3. Na seção de modelo do componente, o IDE resolverá corretamente e preencherá automaticamente os símbolos retornados da função setup() do componente, incluindo propriedades no estado reativo, propriedades calculadas e referências.

Preenchimento de código Vuex

Assistência de codificação para Vuex

Se você estiver trabalhando com a biblioteca Vuex, agora receberá sugestões de preenchimento para símbolos do repositório da Vuex ao editar componentes do Vue. Além disso, o WebStorm permitirá que você salte até a definição de getters, mutações e ações.

Suporte completo para o Angular 9

Para ajudá-lo a trabalhar com o Ivy e outros recursos do Angular 9, incluímos suporte completo para eles no WebStorm 2020.1. Você pode usar recursos como preenchimento de código e importação automática em arquivos TypeScript e de modelo sem nenhuma configuração.

Suporte aprimorado ao React

Adicione instruções de importação para componentes definidos via React.memo, posicionando o sinal de intercalação em um componente e pressionando Alt+Enter. E, se você usar componentes Material-UI no seu projeto, agora verá sugestões de preenchimento ao criar estilos.

JavaScript e TypeScript

Novas intenções e inspeções inteligentes

Use novas intenções e inspeções inteligentes (Alt+Enter) para poupar tempo na hora de codificar! Por exemplo, converta rapidamente o código existente em encadeamento opcional e/ou coalescência nula – a sintaxe introduzida nas versões mais recentes do JavaScript e do TypeScript.

Documentação TypeScript ao passar o mouse

Documentação rápida mais útil

Para JavaScript e TypeScript, o pop-up Documentation agora mostra informações mais úteis, incluindo detalhes sobre o tipo e a visibilidade do símbolo, bem como onde esse símbolo está definido.

Interface do usuário reformulada para a refatoração Introduce Field

Com a refatoração Introduce Field atualizada, você pode visualizar uma prévia das alterações no contexto do código com o qual você está trabalhando. Além disso, agora são necessários menos cliques para aplicar a refatoração.

Suporte para recursos do TypeScript 3.8

O WebStorm 2020.1 inclui o TypeScript 3.8 e introduz suporte completo para os novos recursos do TypeScript 3.8, como importações/exportações somente de tipos, campos privados e código await em nível superior.

Ferramentas

Executando o Prettier ao salvar

Executando o Prettier ao salvar

Com a nova opção Run on save for files, o WebStorm aplicará a formatação Prettier a todos os arquivos especificados nas configurações do IDE e editados no projeto assim que você salvar esses arquivos. File watchers ou plug-ins de terceiros não são mais necessários para isso.

Sessões de terminal divididas

Exibindo sessões de terminal lado a lado

Para facilitar o trabalho com o emulador de terminal interno, o WebStorm agora permite que você divida sessões de terminal na vertical e horizontal. Fique de olho na saída de várias ferramentas que estão em uso no momento sem alternar entre guias.

Verificador ortográfico incluído

Verificador ortográfico incluído

A partir da v2020.1, o WebStorm é fornecido com Grazie, nossa ferramenta inteligente de verificação ortográfica, gramatical e de estilo. Isso deve ajudá-lo a evitar erros gramaticais ao adicionar comentários, submeter mensagens e construções de linguagem do JavaScript.

Compartilhamento de configuração de execução mais flexível

Você tem colegas de equipe que precisam trabalhar com o seu projeto? Compartilhe sua configuração de execução com eles. O WebStorm 2020.1 oferece ainda mais liberdade com isso, pois agora você pode armazenar suas configurações de execução em qualquer pasta de projeto de sua escolha.

Usando o Yarn 2 em projetos TypeScript

Estendemos o suporte inicial ao Yarn 2, que foi introduzido no WebStorm 2019.3. Agora, todos os símbolos são corretamente resolvidos e podem ser automaticamente preenchidos em projetos TypeScript quando as dependências são instaladas usando o Yarn 2 com o modo Plug'n'Play.

Controle de versão

Caixa de diálogo reformulada para rebasear submissões

Caixa de diálogo reformulada para rebasear submissões

Que tal tornar seu histórico de submissões mais linear e compreensível? Isso ficou muito mais fácil graças à caixa de diálogo Rebasing Commits atualizada e mais interativa. Ele exibe as ações que podem ser aplicadas a cada confirmação e permite revisar os detalhes da submissão e o diferencial, além de redefinir rapidamente as alterações aplicadas.

Janela de ferramentas Commit

Alterações no fluxo de submissões

Para agilizar o fluxo de submissões, desenvolvemos uma nova janela de ferramentas Commit para lidar com todas as tarefas relacionadas a subsmissões. Ela está habilitada por padrão para novas instalações. Se você já for usuário, verá um prompt na caixa de diálogo modal Commit, permitindo alternar rapidamente para a nova interface do usuário.