Setup Sublime Text 3 - Linter e Snippets para JS

setup.md

Instalação do SublimeLinter e SublimeLinter-jshint

TL;DR: Vá para a Instalação Rápida.

1. Primeiramente, instale o Package Control. Link: https://sublime.wbond.net/installation

• Obs: Para verificar se está instalado: cmd+shift+p, digite Package Control e observe se apareceu algum comando.

2. Instale o plugin SublimeLinter. Acione ctrl+cmd+p, digite install e pressione Enter. Aguarde o Package Control carregar os repositórios. Na janela de comando, digite SublimeLinter e pressione Enter. Aguarde até a finalização do processo. O status pode ser observado na barra inferior do editor.
3. Instale o plugin SublimeLinter-jshint. Repita o passo anterior com o nome SublimeLinter-jshint.
4. Instale o binário do JSHint. No terminal, digite npm install jshint -g

• Obs: Para quem não usa o nvm, será necessário executar o comando como super user: sudo npm install jshint -g

5. Vá para: Sublime Text > Preferences > Package Settings > SublimeLinter > Settings - User. Cole o conteúdo abaixo, configurando o caminho para o arquivo .jshint (que contém as configurações do Linter).

{
    "user": {
        "linters": {
            "jshint": {
                "@disable": false,
                "args": "--config /Users/igordla/grails_projects/pemaap-frontend/client/scripts/.jshintrc",
                "excludes": []
            }
        }
    }
}

• Obs: Mantenha as demais configurações. Caso elas não apareçam no primeiro momento, apenas adicione um espaço no arquivo, salve, feche e abra novamente.

Instalação Rápida

1. Instale os plugins na respectiva ordem: SublimeLinter e SublimeLinter-jshint.
2. Instale o binário do JSHint com o comando: npm install jshint -g

• Obs: Para quem não usa o nvm, será necessário executar o comando como super user: sudo npm install jshint -g

3. Vá para: Sublime Text > Preferences > Package Settings > SublimeLinter > Settings - User. Configure o Path para o arquivo .jshint (que contém as configurações do Linter). Por exemplo:

{
    "user": {
        "linters": {
            "jshint": {
                "args": "--config /Users/igordla/ng_projects/pemaap-frontend/client/scripts/.jshintrc"
            }
        }
    }
}

• Obs: Mantenha as demais configurações padrão. Caso elas não apareçam no primeiro momento, adione um espaço no arquivo, salve, feche e abra novamente.

Instalação do JsFormat (opcional)

1. Instale o JsFormat por meio do Package Control.
2. Vá para: Sublime Text > Preferences > Package Settings > JsFormat > Settings - User. Configure conforme abaixo:

{
  "indent_with_tabs": false,
  "preserve_newlines": true,
  "max_preserve_newlines": 2,
  "space_in_paren": false,
  "jslint_happy": true,
  "brace_style": "collapse",
  "keep_array_indentation": false,
  "keep_function_indentation": false,
  "eval_code": false,
  "unescape_strings": false,
  "break_chained_methods": true,
  "e4x": false,
  "wrap_line_length": 80,

  "format_on_save": false,
  "jsbeautifyrc_files": false
}

3. Para ativar o JsFormat, apenas acione o atalho ctrl+alt+f com o arquivo JS aberto. Caso o atalho não funcione, procure por conflitos usando o plugin FindKeyConflits (também disponível pelo Package Control).

• IMPORTANTE: Jamais use o JsFormat em arquivos antigos! Apenas use-o nos arquivos que estão sendo criados e commitados pela primeira vez.

Instalação dos Snippets e reconhecedores de token (autocomplete)

1. Instale os plugins AngularJS, SublimeCodeIntel e TernJS por meio do Package Control.
2. Vá para: Sublime Text > Preferences > Package Settings > AngularJS > JavaScript Completions - User. Digite o trecho abaixo e salve.

{
  "js_completions": [
    ["config\tAngularJS", "config(function($1) {\n\t$2\n})"],
    ["controller\tAngularJS", "controller('${1:name}', function($2){\n\t$3\n})"],
    ["factory\tAngularJS", "factory('${1:name}', function($2){\n\treturn function ${3:name}(){\n\t\t$4\n\t};\n})"],
    ["run\tAngularJS", "run('${1:name}', function($2){\n\t$3\n})"],
    ["service\tAngularJS", "service('${1:name}', function($2){\n\t$3\n})"]
  ]
}

3. Vá para: Tools > New Snippet. Digite o código abaixo e salve como JSClosureSnippet.sublime-snippet.

<snippet>
  <content><![CDATA[
(function ($1) {
  'use strict';

  $2
}).call(this);
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>cf</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.js</scope>
</snippet>

4. Em um arquivo novo (do tipo JavaScript) digite cf e pressione Enter. Voilà!
5. Os demais snippets são intuitivos. Por exemplo, digite controller e pressione Enter.