O editor de texto Sublime é um nome bastante familiar entre a comunidade de desenvolvedores (novatos e profissionais). Ele foi desenvolvido com suporte multiplataforma para edição de código-fonte e texto.

Embora a versão atual (Sublime text 3) esteja em estágio beta, ela é mais rápida que a versão 2 e vem com muitas funcionalidades. Ele suporta nativamente uma ampla variedade de linguagens de programação e marcação, e os plug-ins de editor de texto sublimes gratuitos criados pela comunidade levaram sua funcionalidade a um novo patamar.

Muitos desenvolvedores se apegam a este editor por causa do vasto repositório de plugins. Neste artigo vamos nos concentrar em alguns dos plugins que são mais úteis para desenvolvedores de JavaScript.

Linting

As ferramentas Linting ajudam os desenvolvedores a detectar erros, discrepâncias sintáticas e possíveis problemas. Também pode ser usado para garantir que o projeto corresponda a uma determinada diretriz de codificação.

SublimeLinter-eslint

Ele suporta a versão Sublime Text 3 e fornece uma interface para ESLint para operar com arquivos com sintaxe "JavaScript". SublimeLinter 3, Node.js, npm e eslint são os pré-requisitos para instalar este plug-in. eles. A opção exata será dada a você para escrever no arquivo de configuração para desativar todos os avisos e erros. Uma coisa importante a observar aqui é que este plug-in é o único a suportar JSX e o suporte para ES6 é muito mais superior em comparação com outros plugins.

Uso: Dependendo da configuração do SublimeLinter, o código será exibido durante a edição ou salvamento. Isso pode ser configurado usando Choose Lint Modeo comando.

Sublime-JSHintComment

O plug-in JSHint Gutter é compatível com Sublime Text 2 e 3. Permite que os desenvolvedores verifiquem o código JavaScript em busca de erros terríveis e convenções de codificação. Este plug-in também pode ser configurado para mostrar dica na sarjeta e funcionar sem problemas com arquivos .jshintrc específicos do projeto. Ele depende do JSHint, um fork do JSLint. Como o linter é escrito em JavaScript, o Node.js é necessário para interpretar o código JavaScript fora do navegador.

Uso: Ctrl+alt+Jpara Windows ou Cmd+Option+Jse você estiver em um Mac. Você também pode clicar com o botão direito do mouse, selecionar JSHint e clicar em Lint Code. Outra maneira é abrir um arquivo JavaScript, abrir o console em Sublime Text from View, depois Show Console e digitar view.run_command("jshint"). É recomendável configurar a própria combinação de teclas para isso acessando Preferências -> Combinações de teclas – Usuário e adicionando um comando como { "keys": ["ctrl+shift+j"], "command": "jshint" }nessa matriz.

Formatação

As ferramentas de formatação são usadas para embelezar os blocos de código e formatá-los para torná-los mais legíveis.

Sublime-jsfmt

Este plug-in suporta ambas as versões do Sublime Text e formata automaticamente o código JavaScript de acordo com um estilo específico. O desenvolvedor não precisa ler os avisos e corrigir o problema de formatação manualmente. O In pode ser instalado por meio do gerenciador de pacotes, selecionando jsfmt-o no menu suspenso.

Uso: O arquivo .jsfmtrc específico do projeto pode ser colocado no diretório raiz do projeto para configurações. Ele pode ser acessado através do seguinte caminho: Preferences -> Package Settings -> Sublime JSFMT. Além disso, há uma provisão para configurar atalhos de teclado indo para Preferências -> Combinações de Teclas – Usuário e adicionando { "keys": ["ctrl+q"], "command": "format_javascript" }na matriz.

JsFormat

Tem suporte para ambas as versões do Sublime Text. Este plug-in de formatação JavaScript usa o formatador de linha de comando do jsbeautifier em segundo plano para formatar js inteiro, arquivo json ou apenas a parte selecionada de um arquivo. A configuração específica do projeto também pode ser feita pelas configurações do arquivo .jsbeautifyrc. Além disso, os estilos de espaço em branco e formatação também são personalizáveis.

Uso: A ligação de teclas padrão é ctrl+alt+fpara Windows e cmd+option+fMac. O plug-in usa configurações de tabulação/recuo definidas com as configurações padrão translate_tabs_to_spacese tab_sizesublime.

Análise de código

Esses são os mecanismos de inferência de código usados para agilizar o processo de desenvolvimento, fornecendo preenchimento automático de código, dicas de argumento de função, etc.

Tern para Sublime

Este plug-in de análise de código para JavaScript foi desenvolvido para integração com editores de código para edição inteligente de JavaScript. Ele vem com alguns recursos bacanas como:

Preenchimento automático em variáveis e propriedades
Dicas de argumento de função
Consultando o tipo de uma expressão
Refatoração automática

Você precisa ter certeza de que Node.js e npm estão instalados antes de prosseguir com a instalação deste plug-in.

Uso: Basta usar alt+.para pular para a definição da coisa para a qual o cursor está apontando e alt+,voltar para onde você estava ao executar o alt+.comando anterior. Finalmente, alt+spacepara selecionar todas as referências a uma determinada variável no arquivo atual.

Realce de sintaxe

Nesta seção, veremos um plug-in realçador de sintaxe.

JavaScriptNext

Este plugin é um excelente marcador de sintaxe JavaScript. Além de melhorar o destaque de sintaxe para ES5, ele também oferece suporte à nova sintaxe ES6, como módulos, métodos sucintos, funções de seta, classes e geradores. Ele pode ser instalado por meio Package Controlde seleção JavaScript Nextno menu suspenso.

Uso: Para usar este plug-in para um arquivo JavaScript individual, você pode alterar a configuração no view -> syntax -> JavaScriptNext.Para definir isso como sintaxe JavaScript padrão, abra um arquivo javascript e selecione View -> Syntax -> Open all with current extension as... -> JavascriptNext. O ColorScheme também pode ser alterado selecionando um de Preferences -> Color Scheme -> JavaScriptNext.

Documentação

Agora vamos verificar um plug-in que torna muito fácil escrever comentários e documentações de código.

sublime-jsdocs

O plug-in DocBlockr suporta Sublime text 2 e 3 para JavaScript, incluindo especificações ES6. Ele pode ser instalado simplesmente selecionando DocBlockr no arquivo package control. Este plug-in é altamente configurável e permite que você complete comentários automaticamente, estenda comentários, decore comentários, adicione documentação referente a variáveis e funções.

Uso: Escreva e /**pressione enter ou tab para criar uma nova linha e fechar o comentário. Ao escrever a documentação para a função, você verá que ela tenta adivinhar o valor de retorno e, no caso de variável, tenta determinar o tipo de variável a partir de seu nome.

Plugins para bibliotecas JavaScript

Você pode instalar plug-ins para algumas das bibliotecas populares de JavaScript, como AngularJS e jQuery. Além disso, alguns plugins ajudam a acelerar o processo de desenvolvimento, fornecendo trechos de código. Por exemplo, o plug-in de trecho JQuery pode ser instalado para desenvolvimento jQuery.

Conclusão

Neste artigo, abordamos alguns dos plug-ins úteis para desenvolvedores de JavaScript. Sinta-se à vontade para compartilhar qualquer outro plug-in útil na seção de comentários e ajudar a comunidade de desenvolvedores.