Configurações para o Sublime como IDE para PHP / JS

gistfile1.txt

Finalmente, agora eu tenho tudo quase perfeito com o Sublime, só me falta mesmo é um Outline para fechar de vez.

Template para projetos Symfony:

{
    "folders":
    [
    	{
    	    "path": ".",
    	    "folder_exclude_patterns": ["bundles", "assets", "cache"]
    	}
    ]
}

Primeiro: ocultar e mostrar a barra de menu. Sim, ela me incomoda. Então digite
super+shift+p e digite "menu". Selecione a opção "View: Toggle Menu" para sumir com o menu. Pronto...

Segue relação dos plugins que estou utilizando com o Sublime, bem como minhas configurações:

O primeiro package a instalar é o Package Control. A partir dele é possível intalar todos os outros pacotes executando Cmd+Shift+P (ou Ctrl para quem usa Linux/Windows), e buscando por "Package Control:Install Package".

Para instalar o Package Control, execute as instruções contidas nesta página:
https://packagecontrol.io/installation

Agora, chame o comando de instalação de pacotes e instale os seguintes pacotes.

Essenciais para qualquer configuração:
- AngularJS
- AngularJS Snippets
- BracketGuard
- BracketHighlighter
- CodeFormatter (definir "jslint_happy": true, "end_with_newline": true, "preserve_newlines": true, "max_preserve_newlines": 1, desativar para PHP)
- DocBlockr
- Emmet
- GitGutter
- GitSavvy
- HTML5
- jQuery
- LESS
- ng-snippets
- Package Control
- PHP-Twig
- phpfmt (formatação automática para PSR1 e 2 ao salvar)
- PHPIntel
- Pretty JSON
- Pretty YAML
- SideBarEnhancements
- SqlBeautifier
- SublimeCodeIntel
- SublimeLinter
    -annotations
    -csslint
    -jscs
    -jshint
    -json
    -php
- SyncedSideBar
- WordHighlight
- Twig


Instale agora o tema Spacegray Midnight, disponível em: https://github.com/phackwer/spacegray, fazendo o download como ZIP e descompactando-o dentro da sua pasta de Packages (busque browse packages no seu menu de preferências de acordo com sua plataforma - no Mac, Sublime Text > Preferences > Browse Packages), em uma pasta chamada "Theme - Spacegray".

git clone  https://github.com/phackwer/spacegray ".config/sublime-text-3/Packages/Theme - Spacegray"

Para a fonte, estou usando atualmente a Consolas com tamanho 14, mas a Andale Mono também é muito boa. Altere o tamanho da fonte de acordo com sua resolução e tamanho de tela. Estou usando um Mac de 17" 1920x1200, por isso esotu usando tamanho 14 atualmente.

Após instalar estes pacotes, configure seu ambiente para melhor apresentação do texto no Mac (no Windows, coloque outra fonte que lhe agrade) abrindo o arquivo de preferências do usuário e colocando o seguinte conteúdo:

{
	"auto_ident": true,
	"bold_folder_labels": true,
	"caret_style": "phase",
	"color_scheme": "Packages/Theme - Spacegray/base16-midnight.dark.tmTheme",
	"detect_indentation": false,
	"draw_white_space": "selection",
	"font_face": "Andale Mono",
	"font_options":
	[
		"no_antialias"
	],
	"font_size": 12,
	"highlight_line": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"indent_subsequent_lines": true,
	"indent_to_bracket": true,
	"line_numbers": true,
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"preview_on_click": true,
	"scroll_past_end": false,
	"shift_tab_unindent": true,
	"show_full_path": true,
	"spacegray_sidebar_tree_small": true,
	"tab_size": 4,
	"theme": "Spacegray Midnight.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_automatic_white_space": true,
	"trim_trailing_white_space_on_save": true,
	"use_tab_stops": true,
	"word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?",
	"word_wrap": false
}


No linux, utilize estas configs para fontes:

	"font_face": "DejaVu Sans Mono",
	"font_size": 11,
    "font_options":["no_antialias"],

IMPORTANTE! Depois de alterar as configurações, reinicie para que a sidebar pegue as configs do tema! Ou vc vai ter uma barra lateral cinza.

Agora vamos colocar o keybinding para Eclipse (trocar super por ctrl para o windows)

[
    { "keys": ["super+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} },
    { "keys": ["super+shift+c"], "command": "toggle_comment", "args": { "block": false } },
    { "keys": ["super+shift+f"], "command": "reindent" , "args": {"single_line": false}},
    { "keys": ["ctrl+space"], "command": "auto_complete" },
    { "keys": ["super+shift+r"], "command": "show_overlay", "args": {"overlay": "goto", "show_files": true} },
    { "keys": ["ctrl+tab"], "command": "next_view" },
    { "keys": ["super+alt+left"], "command": "prev_view_in_stack" },
    { "keys": ["super+alt+right"], "command": "next_view_in_stack" },
    { "keys": ["ctrl+tab"], "command": "next_view" },
    { "keys": ["ctrl+shift+tab"], "command": "prev_view" },

    { "keys": ["super+t"], "command": "open_terminal" },
    { "keys": ["super+alt+t"], "command": "open_terminal_project_folder" },
    { "keys": ["super+shift+t"], "command": "reopen_last_file" },
    { "keys": ["super+shift+f"], "command": "code_formatter"},
    { "keys": ["ctrl+alt+f"], "command": "show_panel", "args": {"panel": "find_in_files"}},
    { "keys": ["alt+super+f"], "command": "show_panel", "args": {"panel": "replace"}},
    { "keys": ["super+v"], "command": "paste_and_indent" },
    { "keys": ["super+shift+v"], "command": "paste" },
}
]

Sabe um dos melhores recursos que tem para abrir uma definição de classe, método ou algo assim, apertando o ctrl e clicando? Também dá para fazer no Sublime. A tecla padrão é a F12, mas como eu não gosto de mudar o comportamento das minhas teclas, e apertar fn+F12 é chato, eu resolvi correr atrás de como fazer isso com alt+click (porque ctrl+click é o botão direito e não quero perder isso). E encontrei. Mudei o mapeamento para ser a tecla alt+click, então, se for fazer em outro OS, lembre-se de mudar de volta para ctrl.

Mac - create "Default (OSX).sublime-mousemap" in ~/Library/Application Support/Sublime Text 3/Packages/User
Linux - create "Default (Linux).sublime-mousemap" in ~/.config/sublime-text-3/Packages/User
Win - create "Default (Windows).sublime-mousemap" in %appdata%\Sublime Text 3\Packages\User

[
    {
        "button": "button1", 
        "count": 1, 
        "modifiers": ["super"],
        "press_command": "drag_select",
        "command": "goto_definition"
    }
]

E vamos configurar o SideBarEnhancements para abrir arquivos com seus respectivos editore/visualizadores

[
    {"id": "side-bar-files-open-with",
        "children":
        [

            //application 1
            {
                "caption": "XMind",
                "id": "side-bar-files-open-with-xmind",

                "command": "side_bar_files_open_with",
                "args": {
                                    "paths": [],
                                    "application": "XMind.app", // OSX
                                    "extensions":"xmind",  //any file with these extensions
                                    "args":[]
                                },
                "open_automatically" : false // will close the view/tab and launch the application
            },


            //application 2
            {
                "caption": "SeaMonkey",
                "id": "side-bar-files-open-with-openproj",

                "command": "side_bar_files_open_with",
                "args": {
                                    "paths": [],
                                    "application": "OpenProj.app", // WINNT
                                    "extensions":"xml", //open all even folders
                                    "args":[]
                                },
                "open_automatically" : false // will close the view/tab and launch the application
            },
            //application n
            {
                "caption": "Preview",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                                    "paths": [],
                                    "application": "Preview.app",
                                    "extensions":".*", //any file with extension
                                    "args":[]
                        },
                "open_automatically" : false // will close the view/tab and launch the application
            },
            //application n
            {
                "caption": "Chrome",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                                    "paths": [],
                                    "application": "Google Chrome.app",
                                    "extensions":".*", //any file with extension
                                    "args":[]
                        },
                "open_automatically" : false // will close the view/tab and launch the application
            },

            {"caption":"-"}
        ]
    }
]

Para instalar ferramentas adicionais feitas em nodejs NO LINUX APENAS, é preciso antes instalar o ambiente para elas:

0 - instalar o build-essential:
sudo apt-get install build-essential
sudo apt-get install curl
curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh

0.5 - Efetue logout para carregar as novas configurações

1 - instalar o nodejs e o npm usando o nvm:
sudo nvm ls-remote
sudo nvm install 0.11.13 (mude para a versão necessária para suas necessidades)
sudo nvm use 0.11.13
nvm alias default 0.11.13
nvm use default

Instale o jscs com o comando:

npm install -g jscs

Crie um arquivo no seu home chamado .jscsrc e coloque o seguinte conteúdo (by Daniel Luz - Bill):

{
    "excludeFiles": [
        "node_modules/**/*",
        "Resources/public/vendor/**/*"
    ],
    "requireCurlyBraces": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "try",
        "catch"
    ],
    "requireParenthesesAroundIIFE": true,
    "requireCommaBeforeLineBreak": true,
    "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
    "requireDotNotation": "except_snake_case",
    "requireSpacesInForStatement": true,
    "requireSpaceBetweenArguments": true,
    "maximumLineLength": {
        "value": 120,
        "tabSize": 4,
        "allExcept": [
            "urlComments",
            "regex"
        ]
    },
    "disallowMixedSpacesAndTabs": true,
    "disallowTrailingWhitespace": true,
    "disallowMultipleLineStrings": true,
    "disallowTrailingComma": true,
    "requireSpaceBeforeBlockStatements": true,
    "requireSpacesInFunctionExpression": {
        "beforeOpeningCurlyBrace": true
    },
    "requireSpaceAfterKeywords": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "switch",
        "return",
        "try",
        "catch"
    ],
    "requireSemicolons": true,
    "requireSpacesInConditionalExpression": true,
    "requireSpaceAfterBinaryOperators": true,
    "requireLineFeedAtFileEnd": true,
    "requireSpaceBeforeBinaryOperators": true,
    "requireSpacesInAnonymousFunctionExpression": {
        "beforeOpeningCurlyBrace": true
    },
    "requireSpacesInNamedFunctionExpression": {
        "beforeOpeningCurlyBrace": true
    },
    "validateLineBreaks": "LF",
    "disallowKeywords": [
        "with"
    ],
    "disallowKeywordsOnNewLine": [
        "else"
    ],
    "disallowSpacesInsideObjectBrackets": "all",
    "disallowSpacesInsideBrackets": true,
    "disallowSpacesInsideParentheses": true,
    "disallowSpacesInFunctionExpression": {
        "beforeOpeningRoundBrace": true
    },
    "disallowSpacesInNamedFunctionExpression": {
        "beforeOpeningRoundBrace": true
    },
    "disallowSpacesInAnonymousFunctionExpression": {
        "beforeOpeningRoundBrace": true
    },
    "disallowSpaceAfterObjectKeys": true,
    "disallowSpaceAfterPrefixUnaryOperators": true,
    "disallowSpaceBeforePostfixUnaryOperators": true,
    "disallowSpaceBeforeBinaryOperators": [
        ",",
        ":"
    ]
}



Instale o jshint com o comando:

npm install -g jshint

Crie um arquivo no seu home chamado .jshintrc e coloque o seguinte conteúdo (by Daniel Luz - Bill):

{
    "eqeqeq": true,
    "eqnull": true,
    "laxbreak": true,
    "maxstatements": 50,
    "newcap": false,
    "noarg": true,
    "strict": true,
    "undef": true,
    "unused": "vars",
    "curly": false,
    "asi": true,
    "eqnull": true,
    "predef": [
        "describe",
        "expect", 
        "it", 
        "inject", 
        "$", 
        "angular", 
        "console", 
        "debugger", 
        "SinglePage",
        "Highcharts",
        "Routing",
        "document"
    ],
    "globals": {
        "console": false,
        "debugger": false,
        "angular": false,
        "_": false,
        "$": false,
        "jQuery": false,
        "DEBUG": false,
        "Xys": false,
        "XysDefineRoutes": false,
        "Modal": false,
        "SinglePage": false,
        "Highcharts": false,
        "Routing": false,
        "document": false
    }
}


Linters adicionais a serem instalados:

npm install csslint

Licenças para o Sublime:

—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
—— END LICENSE ——

—– BEGIN LICENSE —–
K-20
Single User License
EA7E-940129
3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
EAC2164A 4F8EC954 4E87F1E5 7E4E85D6
C5605DE6 DAB003B4 D60CA4D0 77CB1533
3C47F579 FB3E8476 EB3AA9A7 68C43CD9
8C60B563 80FE367D 8CAD14B3 54FB7A9F
4123FFC4 D63312BA 141AF702 F6BBA254
B094B9C0 FAA4B04C 06CC9AFC FD412671
82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
—— END LICENSE ——

—– BEGIN LICENSE —–
J2TeaM
2 User License
EA7E-940282
45CB0D8F 09100037 7D1056EB A1DDC1A2
39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
0AEE61BA 65758D3B 2EED551F A3E3478C
C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB
CFDA1551 51B05B5D 2D3C8CFE FA8B4285
051750E3 22D1422A 7AE3A8A1 3B4188AC
346372DA 37AA8ABA 6EB30E41 781BC81F
B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
—— END LICENSE ——

Configurações ótimas, muito bom!!!

obs.: As licenças não funcionam mas.