Configuração e Gerenciamento de Plugins no Sublime Text 3

Instalação do Package Control

O Package Control atua como o gerenciador de pacotes central do Sublime Text, permitindo o acesso a milhares de extensões. Sua instalação é um pré-requisito para expandir as funcionalidades do editor.

Método 1: Paleta de Comandos

Pressione Ctrl+Shift+P (ou Cmd+Shift+P no macOS) para abrir a paleta. Digite Install Package Control e pressione Enter. Uma notificação confirmará a conclusão do processo.

Método 2: Console Integrado

Abra o console do editor utilizando o atalho `Ctrl+``. Cole o script Python reestruturado abaixo, que utiliza gerenciadores de contexto para otimizar o download e a escrita do arquivo:

import os
import urllib.request

package_file = 'Package Control.sublime-package'
install_dir = sublime.installed_packages_path()
target_path = os.path.join(install_dir, package_file)
download_url = 'https://packagecontrol.io/' + package_file.replace(' ', '%20')

# Configurar manipulador de proxy e realizar o download
proxy_config = urllib.request.ProxyHandler()
opener = urllib.request.build_opener(proxy_config)
urllib.request.install_opener(opener)

with urllib.request.urlopen(download_url) as response:
    with open(target_path, 'wb') as file_out:
        file_out.write(response.read())

Plugins Essenciais e Configurações

1. SideBarEnhancements

Expande significativamente as opções do menu de contexto da barra lateral, adicionando operações como duplicar, mover e abrir em diferentes navegadores. Instale via Package Control buscando por SideBarEnhancements.

2. BracketHighlighter

Melhora a visualização de pares de colchetes, chaves e tags. Para personalizar os estilos, acesse Preferences > Package Settings > Bracket Highlighter > Bracket Settings e modifique o arquivo do usuário:

{
    "bracket_styles": {
        "default": {
            "icon": "dot",
            "color": "brackethighlighter.default",
            "style": "highlight"
        },
        "unmatched": {
            "icon": "question",
            "color": "brackethighlighter.unmatched",
            "style": "outline"
        }
    }
}

3. Emmet

Ferramenta indispensável para desenvolvimento front-end, permitindo a expansão de abreviações em código HTML e CSS. Requer o PyV8, que geralmente é instalado automaticamente.

Exemplo de uso: Digite nav.main-menu>ul>li.nav-item$*5>a.nav-link{Página $} e pressione Tab. O Emmet expandirá a abreviação para uma estrutura de navegação completa e aninhada.

4. HTML-CSS-JS Prettify

Formatador de código que requer o Node.js instalado no sistema. Para definir um atalho personalizado e contextual, adicione o seguinte array ao seu arquivo de Key Bindings:

[
    {
        "command": "htmlprettify",
        "keys": ["ctrl+alt+f"],
        "context": [
            { "key": "selector", "operator": "equal", "operand": "source.js, source.html, source.css" }
        ]
    }
]

5. Theme-Soda

Um dos temas mais populares para a interface. Após a instalação, ative-o editando o Preferences > Settings:

{
    "theme": "Soda Dark 3.sublime-theme",
    "color_scheme": "Packages/Theme - Soda/Soda Dark.tmTheme",
    "soda_classic_tabs": true,
    "soda_folder_icons": true
}

Outros Plugins Recomendados

  • ConvertToUTF8: Converte automaticamente arquivos com codificações legadas (como GBK) para UTF-8 na memória, preservando o formato original ao salvar.
  • JsFormat: Formatação específica para JavaScript, acessível via menu de contexto.
  • ColorHighlighter: Exibe a cor de fundo correspondente aos códigos hexadecimais ou RGB no editor.
  • SublimeTmpl: Gera templates de arquivos (HTML, CSS, JS) através de atalhos como Ctrl+Alt+H. Os templates podem ser editados no diretório Packages/SublimeTmpl/templates.
  • Alignment: Alinha múltiplas linhas de código (ex: sinais de igual) usando Ctrl+Alt+A.
  • AutoFileName: Autocompleta caminhos de arquivos e diretórios ao digitar atributos como src ou href.
  • DocBlockr: Gera blocos de documentação (JSDoc, PHPDoc) automaticamente ao digitar /** e pressionar Tab.
  • SublimeCodeIntel: Fornece autocompletar inteligente e navegação de código para múltiplas linguagens.
  • LESS: Adiciona suporte de sintaxe e destaque para pré-processadores CSS.

Gerenciamento de Pacotes

Para auditar as extensões ativas, abra a paleta de comandos (Ctrl+Shift+P), digite List Packages e selecione a opção correspondente. Para desinstalar uma extensão, utilize o comando Remove Package na mesma paleta e selecione o item desejado na lista.

Layout e Operações de Janela

O editor suporta múltiplas configurações de divisão de tela para otimizar o fluxo de trabalho. Acesse View > Layout ou utilize os atalhos abaixo:

  • Alt+Shift+1: Painel único (Padrão)
  • Alt+Shift+2: Duas colunas verticais
  • Alt+Shift+3: Três colunas verticais
  • Alt+Shift+8: Duas linhas horizontais
  • Alt+Shift+9: Três linhas horizontais
  • Alt+Shift+5: Grade de quatro painéis (2x2)

Para instanciar uma nova janela do editor independente, utilize o atalho Ctrl+Shift+N.

Tags: Sublime Text 3 Package Control Emmet Python front-end

Publicado em 7-6 21:14