TL;DR: Vá para a Instalação Rápida.
- Primeiramente, instale o Package Control. Link: https://sublime.wbond.net/installation
- Obs: Para verificar se está instalado:
cmd+shift+p
, digitePackage Control
e observe se apareceu algum comando.
- Instale o plugin SublimeLinter. Acione
ctrl+cmd+p
, digiteinstall
e pressione Enter. Aguarde oPackage Control
carregar os repositórios. Na janela de comando, digiteSublimeLinter
e pressione Enter. Aguarde até a finalização do processo. O status pode ser observado na barra inferior do editor. - Instale o plugin
SublimeLinter-jshint
. Repita o passo anterior com o nomeSublimeLinter-jshint
. - 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
- 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.
- Instale os plugins na respectiva ordem:
SublimeLinter
eSublimeLinter-jshint
. - 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
- 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.
- Instale o
JsFormat
por meio doPackage Control
. - 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
}
- Para ativar o
JsFormat
, apenas acione o atalhoctrl+alt+f
com o arquivo JS aberto. Caso o atalho não funcione, procure por conflitos usando o pluginFindKeyConflits
(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.
- Instale os plugins
AngularJS
,SublimeCodeIntel
eTernJS
por meio doPackage Control
. - 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})"]
]
}
- 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>
- Em um arquivo novo (do tipo JavaScript) digite
cf
e pressione Enter. Voilà! - Os demais snippets são intuitivos. Por exemplo, digite
controller
e pressione Enter.