Vim for React e TypeScript Oh My!

Timothy OBrien em Level Up Your Code Seguir 7 de jul · 3 min ler

O que segue é o meu giro em uma configuração para o incrível editor ; suportando o framework do Facebook, bem como o Javascript moderno e a linguagem da Microsoft. Como sempre, o Vim nos dá um excelente suporte para todas as nossas necessidades de desenvolvimento. Vamos lá!

Obtendo o mais recente Vim

Eu recomendo uma versão recente de um Vim baseado em GUI para suportar os plugins deste guia. Pelo menos, você deve se certificar de que está executando o Vim versão 8 .

Em um Mac? Eu recomendo MacVim

Linux? Instale o pacote gvim mais recente do gerenciador de pacotes da sua distribuição.

Você também pode usar uma versão de terminal (baseada em texto) do Vim para a maioria dos recursos deste guia. No entanto, para o melhor suporte, recomendo o gvim.

MacVim 8.1 sem plugins, ainda 🙂

Plugin Manager vim-plug

Os gerenciadores de plug-ins facilitam a instalação e a manutenção de todos os plug-ins que usaremos para suportar nosso ambiente de desenvolvimento. Eu recomendo o gerenciador de plugins vim-plug

Vim-plug tem uma sintaxe simples e faz um bom trabalho de obter nossos plugins instalados e atualizados com o mínimo de barulho.

A contém guias detalhados para a instalação da ferramenta. No entanto, se você estiver no Linux ou no macOS, o seguinte comando deverá iniciar:

 curl -fLo ~ / .vim / autoload / plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim 

Em seguida, precisamos adicionar o vim-plug ao nosso arquivo ~ / .vimrc para que o gerenciador de plugins seja carregado toda vez que lançarmos o Vim:

É isso aí! Vamos adicionar alguns plugins 😉

Reagir, Javascript e Plugins Datilografados

Javascript

Para suporte a Javascript, usaremos plugin de , disponível em

TypeScript

Para suporte ao TypeScript, usaremos plugin , disponível em

Reagir

Para o suporte do React, usaremos plugin , disponível em

Instale os Plugins

Primeiro, vamos configurar o vim-plug para instalar os plugins através do nosso arquivo ~ / .vimrc :

Em seguida, inicie o Vim e execute o comando : PlugInstall . Vim-plug irá baixar e instalar os plugins para você:

Resultados do vim-plug do comando: PlugInstall

Sucesso!

Parabéns! Neste ponto, o seu Vim tem todos os princípios básicos necessários para o desenvolvimento de React, Javascript e Typescript. Leia sobre alguns plug-ins de bônus que tornarão seu Vim ainda melhor!

Vim renderizando um componente React com suporte para JSX

Seção de bônus

formatador de código prettier.io

O formatador de código do faz um bom trabalho de reformatar automaticamente seu código toda vez que você o salva no Vim.

Usaremos o oficial para integrar o formatador adicionando o seguinte código à nossa seção de plug-in ~. / Vimrc :

 Ligue 'prettier / vim-prettier', {'do': 'instalação de fios', 'for': ['javascript', 'texto datilografado', 'css', 'menos', 'scss', 'json', 'graphql ',' markdown ',' vue ',' yaml ',' html ']} 
deixe g: mais bonito # autoformat = 0
autocmd BufWritePre * .js, *. jsx, *. mjs, *. ts, *. tsx, *. css, *. menos, *. scss, *. json, *. graphql, *. md, *. vue, * .yaml, *. html PrettierAsync

Em seguida, execute : PlugInstall para instalar o plug-in. [ Nota: O Prettier requer que o gerenciador de pacotes do Yarn seja instalado. Veja ]

mais bonita formatação automática de um arquivo em salvar

Alguns Plugins mais úteis para você experimentar:

  • Uma coleção de snippets Javascript e Typescript comuns para o desenvolvimento de aplicativos React.
  • Um plug-in de conclusão de código para sugestões fáceis de preenchimento automático.
  • Um explorador de árvores de arquivos para o Vim
  • Encontre e abra rapidamente arquivos usando pesquisas difusas
  • Gerenciar comandos do Git com facilidade
  • Aumente sua barra de status do Vim
  • Suporte multi-cursor para o Vim
  • automaticamente suas seleções de texto entre colchetes

Codificação Feliz!

O Vim fornece um ambiente robusto para o desenvolvimento de aplicativos modernos com Javascript, Typescript e React. Espero que tenham gostado deste guia – Viva ao vivo!