Guia para usar o SublimeLinter para desenvolvedores

Linter é uma ferramenta indispensável no desenvolvimento web moderno. Ajuda-nos a ficar atentos a erros e a aplicar as melhores práticas ao escrever códigos. Se você estiver usando o SublimeText, recomendo instalar o SublimeLinters. Com o passar dos anos, o SublimeLinters tornou-se um pacote de ferramentas avançadas no SublimeText e trouxe pacotes oficiais que se conectam a linters de várias linguagens de programação..

Neste tutorial, veremos como instalar e configurar o SublimeLinter. Vamos apenas começar.

Começando

A maneira mais fácil de instalar o SublimeLinter 4 é através do Controle de Pacotes SublimeText. Desde então em SublimeLinter 3, cada linter deve ser instalado separadamente. Isso permite que o SublimeLinter seja executado de forma mais eficiente executando apenas linters que nós instalamos.

Como eu uso HTML, CSS, JS e PHP na maioria das vezes em meus projetos, gostaria de instalar linters para esses idiomas. No Controle de Pacotes, Eu instalo o SublimeLinter juntamente com os seguintes plugins:

• SublimeLinter-html-arrumado
• SublimeLinter-stylelint
• SublimeLinter-eslint
• SublimeLinter-php

Então, para que esses plugins funcionem, também precisamos instalar o linter para os idiomas, que são HTML Tidy, CSSLint, JSHint e PHP CLI.

Para aqueles que estão usando o OSX, o Tidy e o PHP são pré-instalados no sistema. Para verificar, execute os dois comandos a seguir consecutivamente.

 arrumado --version php --version 

Esses comandos mostrarão a versão do Tidy e do PHP que você possui. Você pode continuar a usá-los no Sublime Text.

Se você está no Windows ou Linux, ou não os instalou, siga as instruções abaixo.

Instalando o HTML Tidy

Para instalar o HTML Tidy:

• No OSX, execute este comando no Terminal brew instalar homebrew / dupes / arrumado
• No linux, use este comando sudo apt-get install arrumado.
• No Windows, você pode pegar o instalador de EXE do TidyBatchFiles.

Instalando o PHP CLI

• Os usuários do OSX podem instalar o PHP no sistema com curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 comando. Isto irá instalar o PHP 5.5, que é a versão mais recente, no momento da escrita.
• Linux os usuários podem seguir este tutorial abrangente da DigitalOcean.
• Para usuários do Windows, você pode baixar o instalador aqui.

Instalando o Styleint

Em seguida, instalaremos o linter CSS chamado Stylelint que nos permitirá verificar e aplicar as melhores práticas em nossos arquivos CSS. As seguintes instruções podem ser seguidas em todas as três plataformas: OSX, Windows e Linux. Eu presumo que você já tenha instalado o Node.js com o NPM.

Para instalar o Stylelint, execute:

 npm install -g stylelint 

Observe que você também precisará adicionar um arquivo de configuração Stylelint ao diretório do projeto, além disso, instale uma configuração predefinida como stylelint-config-standard. Depois de configurados, você deve encontrar os erros destacados abaixo.

Instalando o ESLint

Também vamos instalar o ESLint, um linter moderno e altamente configurável para JavaScript. Isso nos ajudará a reforçar as práticas recomendadas, além de detectar possíveis erros ao escrever JavaScript. Instalar o ESLint também requer o Node.js com o NPM.

Para instalá-lo, execute.

 npm install -g eslint 

Da mesma forma, você precisará adicionar a configuração ESLint ao seu projeto ou usar a configuração predefinida, como eslint-config-recommended.

Estamos todos prontos. Nós podemos começar linting HTML, CSS, JS e PHP no SublimeText usando o SublimeLinter 4.

Novos recursos no SublimeLinter 4

O SublimeLinter 4 traz vários novos recursos, e um que é facilmente perceptível é o painel que exibe todos os erros dos arquivos abertos. Se você estiver no Mac, pressione Command + Ctrl + A. No Windows e no Linux, você pode pressionar Ctrl + K, Ctrl + A.

A tecla de atalho mostrará uma lista de erros, conforme mostrado na captura de tela a seguir.

Use o ↑ e ↓ para navegar na lista, e a página irá rolar para a linha exata onde o erro ocorreu.

Melhor Visual

Agora podemos passar o mouse sobre a sarjeta no editor ou apenas a linha em que o erro aconteceu para visualizar a mensagem de erro. Isso não foi possível na versão anterior.

Altamente configurável

O SublimeLinter 4 agora está mais configurável do que nunca. Por exemplo, agora podemos personalizar “Estilos” para cada configuração do linter. Isso nos permite definir variáveis ​​de ícones, cor, modo de lint, caminho e ambiente para cada linter separadamente.

Referência Adicional

Espero que esta pequena introdução possa ajudar a começar a trabalhar com o SublimeLinter. Você também pode consultar a referência se quiser mais coisas avançadas.

• Documento Oficial SublimeLinter
• Lint em software e programação - WikiPédia
• Repositórios SublimeLinter