Configurar Prettier no Sublime Text

README.md

Configurar Prettier no Sublime Text com Ctrl+Shift+H

Guia completo para instalar e configurar o Prettier no Sublime Text 3/4 para formatar HTML com quebra de linha em cada atributo.

Resultado Esperado

Antes

<input type="text" name="first_name" class="form-control" placeholder="Digite seu nome">

Depois (ao pressionar Ctrl+Shift+H)

<input
  type="text"
  name="first_name"
  class="form-control"
  placeholder="Digite seu nome"
>

Pré-requisitos

1. Instalar Node.js e npm

Ubuntu/Debian:

# Via NVM (recomendado)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install --lts

Ou via apt:

sudo apt update
sudo apt install nodejs npm

Verificar instalação:

node --version
npm --version

2. Instalar Prettier globalmente

npm install -g prettier

Verificar instalação:

prettier --version
# Deve retornar algo como: 3.6.2

Localizar caminho do Prettier:

which prettier
# Exemplo de saída: /home/seu-usuario/.nvm/versions/node/v22.20.0/bin/prettier

Instalação e Configuração

Passo 1: Instalar JsPrettier no Sublime Text

1. Abra o Sublime Text
2. Pressione Ctrl+Shift+P para abrir o Command Palette
3. Digite Package Control: Install Package e pressione Enter
4. Digite JsPrettier e pressione Enter para instalar

Passo 2: Configurar JsPrettier

Crie ou edite o arquivo:

~/.config/sublime-text/Packages/User/JsPrettier.sublime-settings

Com o seguinte conteúdo:

{
  "prettier_cli_path": "/home/SEU-USUARIO/.nvm/versions/node/v22.20.0/bin/prettier",
  "node_path": "/home/SEU-USUARIO/.nvm/versions/node/v22.20.0/bin/node",
  "auto_format_on_save": false,
  "auto_format_on_save_excludes": [],
  "allow_inline_formatting": true,
  "custom_file_extensions": [],
  "max_file_size_limit": -1,
  "prettier_options": {
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": true,
    "useTabs": false,
    "htmlWhitespaceSensitivity": "css",
    "singleAttributePerLine": true
  }
}

IMPORTANTE:

• Substitua SEU-USUARIO pelo seu nome de usuário
• Use o caminho correto retornado pelo comando which prettier e which node
• A opção chave é "singleAttributePerLine": true - ela garante um atributo por linha

Passo 3: Configurar o atalho de teclado

Crie ou edite o arquivo:

~/.config/sublime-text/Packages/User/Default (Linux).sublime-keymap

Com o seguinte conteúdo:

[
  {
    "keys": ["ctrl+shift+h"],
    "command": "js_prettier"
  }
]

Passo 4: Reiniciar o Sublime Text

Feche completamente o Sublime Text e abra novamente para carregar as novas configurações.

Como Usar

1. Abra um arquivo HTML no Sublime Text
2. Selecione o código que deseja formatar (ou deixe sem seleção para formatar o arquivo inteiro)
3. Pressione Ctrl+Shift+H
4. O código será formatado automaticamente

Troubleshooting

O atalho Ctrl+Shift+H não funciona

Solução 1: Verificar se o Prettier está instalado

prettier --version
npm list -g prettier

Se não estiver instalado:

npm install -g prettier

Solução 2: Verificar os caminhos no arquivo de configuração

Execute:

which prettier
which node

Atualize os caminhos em JsPrettier.sublime-settings com os valores retornados.

Solução 3: Verificar se há conflito de atalhos

1. Abra o console do Sublime Text com Ctrl+`
2. Digite: sublime.log_commands(True)
3. Pressione Ctrl+Shift+H e veja o que é executado
4. Se outro comando aparecer, há conflito de atalhos

Solução 4: Verificar se o JsPrettier está instalado

1. Ctrl+Shift+P
2. Digite Package Control: List Packages
3. Procure por JsPrettier

Se não estiver na lista, reinstale o pacote.

Prettier formata, mas não quebra os atributos em linhas separadas

Verifique se a opção "singleAttributePerLine": true está presente em prettier_options no arquivo JsPrettier.sublime-settings.

Erro: "prettier not found"

Solução: Configure o caminho completo do prettier em JsPrettier.sublime-settings:

# Descubra o caminho
which prettier

# Atualize no arquivo de configuração
"prettier_cli_path": "/caminho/completo/do/prettier",

Prettier não formata certos arquivos

O JsPrettier funciona com:

• HTML
• JavaScript/JSX
• TypeScript/TSX
• CSS/SCSS/LESS
• JSON
• Markdown
• Vue
• GraphQL

Se o arquivo não for formatado, verifique a extensão do arquivo.

Opções Adicionais do Prettier

Você pode personalizar outras opções em prettier_options:

{
  "printWidth": 80,              // Largura máxima da linha
  "tabWidth": 2,                 // Tamanho da indentação
  "useTabs": false,              // Usar tabs em vez de espaços
  "semi": true,                  // Adicionar ponto e vírgula
  "singleQuote": false,          // Usar aspas simples
  "trailingComma": "none",       // Vírgula no final de objetos/arrays
  "bracketSpacing": true,        // Espaços entre chaves { foo }
  "htmlWhitespaceSensitivity": "css",  // Sensibilidade a espaços em branco
  "singleAttributePerLine": true // Um atributo por linha (HTML)
}

Formatar ao Salvar (Opcional)

Se quiser formatar automaticamente ao salvar o arquivo, altere em JsPrettier.sublime-settings:

{
  "auto_format_on_save": true,
  "auto_format_on_save_excludes": [
    "*/node_modules/*",
    "*/.git/*"
  ]
}

Comandos Úteis

Formatar via Command Palette

1. Ctrl+Shift+P
2. Digite JsPrettier: Format Code

Ver logs do JsPrettier

1. Abra o console: Ctrl+`
2. Ative logs: sublime.log_commands(True)

Desinstalar

# Desinstalar Prettier globalmente
npm uninstall -g prettier

# No Sublime Text
Ctrl+Shift+P > Package Control: Remove Package > JsPrettier

Compatibilidade

• Sublime Text: 3 ou 4
• Sistemas Operacionais: Linux, macOS, Windows
• Node.js: v14 ou superior
• Prettier: v2.0 ou superior

Links Úteis

• Prettier Documentation
• JsPrettier Package
• Prettier Playground - Teste opções online

Créditos

• Prettier: https://prettier.io/
• JsPrettier: https://github.com/jonlabelle/SublimeJsPrettier