Melhor editor de código para Vue.js

Com um número crescente de editores de código de qualidade para escolher, você pode estar se perguntando qual é o melhor editor de código para o Vue.js. Alguns desenvolvedores estão tão comprometidos com seus editores quanto com suas crenças políticas, para que você obtenha respostas diferentes, dependendo de quem você perguntar.

Mas quando se trata de codificar no Vue, uma das melhores pessoas a perguntar é Evan You, o criador do Vue. Então, o que ele usa? Código do Visual Studio.

Em uma entrevista, ele foi questionado sobre o assunto e respondeu:

… Eu mudei de um lado para o outro até recentemente, comecei a usar o TypeScript e, como o VS Code TypeScript é muito bom, mudei (permanentemente) para o VS Code.

Embora o Vue não exija que você use o TypeScript, seu código-fonte em breve será escrito nele, conforme abordamos nesta postagem no Vue 3.0.

Você pode estar pensando ... Mas não estou trabalhando no código-fonte e não codigo Vue com TypeScript. O código VS ainda é relevante para mim?

Isso me leva ao assunto do Vetur, que é uma extensão rica em recursos que oferece itens como destaque de sintaxe em arquivos .vue, trechos, dicas, verificação de erros e formatação, além de preenchimento automático e depuração. Neste ponto, é a melhor extensão do Vue para um editor de código. E deveria ser, porque foi desenvolvido por Pine Wu, que é membro da equipe principal do Vue.

Portanto, se você estiver interessado em usar o VS Code para o desenvolvimento do Vue (ou já o é), siga o exemplo abaixo, como mostro como otimizar o VS Code.

O que vamos aprender?

Vamos aprender como:

  • Obtenha destaque de sintaxe em nossos arquivos .vue
  • Utilize trechos de código para um fluxo de trabalho mais rápido
  • Configure nosso editor para formatar automaticamente nosso código
  • E explore outras extensões úteis que melhorarão nossa experiência de desenvolvimento

Instalando o Vetur

Existem vários recursos que tornam o VS Code um ótimo ambiente para o desenvolvimento do Vue, incluindo o Vetur, um plug-in projetado por Pine Wu, um membro essencial da equipe do Vue.js.

Aqui no VS Code, se abrirmos um arquivo .vue, como esse arquivo About.vue, veremos todo esse código cinza. Isso ocorre porque o Código VS não destaca automaticamente a sintaxe nos arquivos .vue.

A Vetur pode corrigir isso para nós e fornecer outros recursos projetados para melhorar a experiência do desenvolvedor.

Então, vamos instalá-lo agora. Abra o armazenamento de extensões.

Em seguida, procure por "Vetur", selecione-o nos resultados da pesquisa e clique em Instalar. Depois clique em Recarregar.

Recursos do Vetur

Agora que o Vetur está instalado, vamos dar uma olhada em seus recursos.

Destaque da sintaxe Digitando o comando + P e o nome de um arquivo .vue, podemos abrir o arquivo About.vue. Como você pode ver, agora nosso código está recebendo o destaque apropriado da sintaxe. Impressionante - não há mais código cinza.

Verificando o arquivo Home.vue, podemos ver que nosso JavaScript também está sendo destacado corretamente.

Trechos Outro recurso que Vetur vem com seus trechos de código. Esses são "trechos" de código que economizam tempo e permitem criar rapidamente trechos de código comumente usados.

Vamos criar um novo componente para ver isso em ação. O nome é EventCard.vue. Agora, se digitarmos a palavra “scaffold” em um arquivo .vue e pressionar ENTER, isso será preenchido automaticamente com o esqueleto, ou scaffold, de um único componente .vue de arquivo.

O Emmet Vetur também vem com o Emmet. Essa é uma ferramenta popular que permite que você use atalhos para criar seu código.

Por exemplo, podemos digitar h1 e pressionar enter, e isso criará um elemento h1 de abertura e fechamento.

Quando digitarmos algo mais complexo, como div> ul> li, ele produzirá:

        
                
  •         
    

Se o Emmet não parece estar funcionando para você, você pode adicioná-lo às suas configurações de usuário:

"emmet.includeLanguages": {
          "vue": "html"
      }

Para saber mais sobre como o Emmet pode acelerar seu desenvolvimento, acesse aqui.

Instalando o ESLint & Prettier

Agora, precisamos garantir que o ESLint e o Prettier estejam instalados. Na loja de extensões, faremos uma pesquisa pelo ESLint e, em seguida, instale-o. E faremos o mesmo por Prettier. Depois de instalado, pressionaremos recarregar para recarregar o VS Code.

Configurando o ESLint

Agora que eles estão instalados, precisamos adicionar um pouco de configuração extra a eles.

Quando criamos nosso projeto a partir do terminal, optamos por criá-lo com arquivos de configuração dedicados, que nos deram esse arquivo .eslintrc.js, onde podemos configurar o ESLint para este projeto. Se não tivéssemos escolhido arquivos dedicados, encontraríamos as configurações do ESLint em nosso package.json.

Portanto, em nosso arquivo .eslintrc.js, adicionaremos:

'plugin: mais bonito / recomendado'

Isso ativará o suporte ao Prettier no ESLint com as configurações padrão.

Portanto, nosso arquivo agora fica assim:

module.exports = {
      raiz: verdadeiro,
      env: {
        node: true
      }
      'estende': [
        'plugin: vue / essential',
        'plugin: mais bonito / recomendado', // adicionamos esta linha
        '@ vue / mais bonita'
      ],
      regras: {
        'no-console': process.env.NODE_ENV === 'produção'? 'erro': 'desativado',
        'no-debugger': process.env.NODE_ENV === 'produção'? 'erro': 'desativado'
      }
      parserOptions: {
        analisador: 'babel-eslint'
      }
    }

Configurando o Prettier

Também temos a opção de criar um arquivo de configuração Prettier, de adicionar algumas configurações especiais de acordo com nosso estilo pessoal ou com as preferências de nossa equipe.

Vamos criar aqui e denominar .prettierrc.js.

E por dentro, digitaremos:

module.exports = {
        singleQuote: true,
        semi: false
    }

Isso converterá aspas duplas em aspas simples e verifique se os pontos e vírgulas não são inseridos automaticamente.

Configurações do Usuário

Para otimizar ainda mais o Código VS para uma ótima experiência de desenvolvimento, adicionaremos algumas configurações às nossas Configurações do usuário. Para acessar as Configurações do usuário, clique em Código na barra de navegação superior, depois em Preferências e depois em Configurações. Isso exibirá uma janela Configurações do usuário, na qual você poderá adicionar configurações no json.

Primeiro, queremos adicionar:

"vetur.validation.template": false

Isso desativará o recurso de fiapos da Vetur. Em vez disso, confiaremos no ESLint + Prettier.

Agora, queremos dizer ao ESLint quais idiomas queremos validar (vue, html e javascript) e definir autoFix como true em cada um:

"eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        }
        {
            "language": "html",
            "autoFix": true
        }
        {
            "language": "javascript",
            "autoFix": true
        }
    ],

Então, por uma boa medida, diremos ao ESLint para autoFixOnSave.

"eslint.autoFixOnSave": true,

E diga ao nosso editor para formatOnSave.

"editor.formatOnSave": true,

Testando

Para testar se isso está funcionando, adicionaremos uma propriedade de dados ao nosso componente EventCard aqui e adicionaremos uma citação: "Quero ser solteiro", também apresentaremos um ponto-e-vírgula aqui. Quando pressionamos o botão salvar, nossas cotações são convertidas em aspas simples e o ponto e vírgula é removido. Incrível - está funcionando.

Ferramentas Adicionais

Agora, vamos dar uma olhada em algumas ferramentas adicionais que podem ajudar a acelerar seu desenvolvimento.

Copiar caminho relativo Copiar caminho relativo é uma extensão que permite copiar o local em que um arquivo vive, com base em sua relação com o diretório ao qual está vinculado.

Vamos procurá-lo, instalá-lo e vê-lo em ação.

Em nosso arquivo Home.vue, já vemos um caminho relativo aqui, onde estamos importando o componente HelloWorld.

Para obter o caminho relativo de um arquivo que queremos importar, clique com o botão direito do mouse no arquivo e selecione Copiar caminho relativo. Agora, quando colamos o que foi copiado, vemos que temos o caminho relativo preciso. Observe este src. O comentário aqui nos permite saber que, devido à maneira como nosso projeto é configurado, podemos usar @.

Terminal integrado Um recurso interno conveniente do editor de código VS é o terminal integrado, que você pode usar em vez de passar para o terminal separado. Você pode abri-lo, com o atalho de teclado: `ctrl +` `

Mais trechos Se você estiver interessado em instalar alguns trechos de código adicionais, poderá fazer o download de um conjunto completo de trechos do Vue VSCode, criados por Sarah Drasner, membro da equipe do Core Vue.

Vamos procurar a extensão com o nome dela, sarah.drasner. Ali estão eles. Agora podemos instalar e recarregar.

Vamos dar uma olhada neles em ação.

Se digitarmos vif em um elemento do nosso modelo, isso nos dará uma instrução v-if, e digitar von nos fornecerá um manipulador de eventos completo. Em vez de digitar manualmente uma propriedade de dados, podemos simplesmente digitar vdata, que criará uma para nós. Podemos fazer o mesmo para adicionar adereços com vprops. Podemos até usá-lo para criar o código para importar rapidamente uma biblioteca, com vimport-lib. Como você pode ver, esses trechos são muito úteis e economizam tempo.

Observe que, se você estiver usando esta extensão de trechos, é recomendável adicionar uma linha às suas configurações de usuário:

vetur.completion.useScaffoldSnippets deve ser falso

Isso garantirá que esses trechos não entrem em conflito com os da Vetur.

Temas de cores Finalmente, se você está se perguntando como alterar seu tema no VS Code, ou se está se perguntando qual deles estou usando aqui, acesse Código> Preferências> Tema de cores.

Como você pode ver, estou usando o FlatUI Dark. Você pode alterar a cor do seu tema para qualquer uma dessas opções aqui ou procurar outros temas na loja de extensões.

Se você não encontrar o que deseja, também poderá acessar o Visual Studio Marketplace online. Aqui, você pode visualizar vários plugins e temas diferentes, como o Night Owl da nossa amiga Sarah Drasner. Você pode instalá-lo diretamente do navegador e encontrá-lo em suas Preferências de tema de cores.

Continue aprendendo

Para continuar aprendendo comigo, você pode fazer o curso completo do Real World Vue, no site VueMastery.com.