Barra de Linguagens

Extensão para VS Code que identifica a linguagem, framework ou tecnologia do projeto e muda as cores da interface para deixar o contexto visual mais claro.

A ideia é simples: ao abrir ou selecionar um arquivo, a extensão pode reconhecer automaticamente a tecnologia pela extensão do arquivo, como .ts, .py, .vue ou .php, e aplicar uma cor correspondente na barra de status e na barra superior do VS Code. Você também pode escolher a tecnologia manualmente pelo painel lateral ou pelo menu de seleção.

O que ela faz

• Detecta automaticamente a linguagem do arquivo ativo pela extensão.
• Mostra um painel lateral com linguagens, frameworks e tecnologias organizadas por categoria.
• Permite selecionar manualmente a linguagem atual do workspace.
• Altera a cor da barra de status e da barra superior para facilitar a identificação visual.
• Permite cadastrar, editar, remover, importar, exportar e restaurar linguagens.
• Inclui busca no seletor para encontrar rapidamente por nome, categoria ou extensão.
• Mantém a configuração por workspace ou global, conforme a ação escolhida.

Por que usar

Quando você trabalha em vários projetos, janelas ou stacks diferentes, é fácil perder o contexto. A Barra de Linguagens ajuda a identificar rapidamente se você está em um projeto JavaScript, Python, Laravel, Vue.js, Django, WordPress ou outra tecnologia.

Isso é especialmente útil para quem alterna entre muitos repositórios, usa várias janelas do VS Code abertas ao mesmo tempo ou quer uma identificação visual imediata do ambiente em que está trabalhando.

Como usar

1. Instale e ative a extensão no VS Code.
2. Abra a visão Barra de Linguagens na barra lateral.
3. Abra um arquivo do projeto. A detecção automática já vem habilitada por padrão.
4. Se quiser escolher manualmente, clique em uma linguagem no painel ou execute o comando Selecionar Linguagem.
5. Use o campo de busca do seletor para procurar por linguagem, framework, categoria ou extensão.

Para remover a seleção manual e voltar ao estado padrão, use o comando Limpar Linguagem.

Detecção automática

A configuração environmentBar.autoDetectActiveFileLanguage vem habilitada por padrão.

Com ela ativa, a extensão observa o arquivo aberto no editor e tenta encontrar uma linguagem cadastrada que combine com a extensão do arquivo. Por exemplo:

Se você preferir escolher tudo manualmente, desative a opção nas configurações do VS Code:

{
  "environmentBar.autoDetectActiveFileLanguage": false
}

Linguagens e frameworks padrão

A extensão já inclui uma lista inicial com linguagens, frameworks, runtimes, CMSs e plataformas comuns, como:

• JavaScript, TypeScript, Python, Java, C#, C++, Go, Rust, PHP, Ruby, Swift, Kotlin e Dart.
• HTML, CSS, SQL e Shell Script.
• Vue.js, React, Angular, Flask, Django, Laravel, Spring Boot, .NET Core e Ruby on Rails.
• Node.js, WordPress, Drupal, Magento e ColdFusion.

Cada item pode ter nome, cor, ícone, categoria e extensões usadas na detecção automática.

Personalização

Você pode gerenciar as linguagens diretamente pelo painel lateral:

• Cadastrar Linguagem: adiciona uma nova linguagem, framework ou tecnologia.
• Editar Linguagem: altera nome, categoria, cor, ícone ou extensões.
• Remover Linguagem: remove um item da lista.
• Restaurar Linguagens Padrão: volta para a lista padrão da extensão.
• Importar Linguagens: carrega uma lista de um arquivo JSON.
• Exportar Linguagens: salva a lista atual em JSON.

Ao salvar uma alteração, a extensão pergunta se ela deve valer apenas para o workspace atual ou para todos os projetos.

Exemplo de configuração

Também é possível editar a lista manualmente pelo settings.json:

{
  "environmentBar.environments": [
    {
      "name": "Elixir",
      "color": "#4B275F",
      "icon": "$(symbol-method)",
      "category": "Linguagens",
      "extensions": [".ex", ".exs"]
    },
    {
      "name": "Next.js",
      "color": "#000000",
      "icon": "$(globe)",
      "category": "Frameworks",
      "extensions": []
    }
  ]
}

Campos disponíveis

Configurações

Comandos

Desenvolvimento

Pré-requisitos

• Node.js 16+
• VS Code 1.74.0+

Instalar dependências

npm install

Compilar

npm run compile

Rodar em modo de desenvolvimento

npm run watch

Para testar a extensão no VS Code, abra este projeto e pressione F5. Uma nova janela do VS Code será aberta com a extensão carregada.

Estrutura do projeto

src/
  extension.ts           # Ponto de entrada da extensão
  environmentProvider.ts # Dados da árvore lateral
  statusBarManager.ts    # Aplicação das cores na interface
  defaultEnvironments.ts # Lista padrão de linguagens e frameworks
package.json             # Manifesto, comandos e configurações
tsconfig.json            # Configuração TypeScript

Contribuindo

Sugestões, correções e novas linguagens são bem-vindas. Abra uma issue ou envie um pull request com uma descrição clara da mudança.

Licença

Este projeto está licenciado sob a licença MIT.