🎀 VS Code Image Background

Personalize o seu Visual Studio Code adicionando uma imagem de fundo ao editor usando CSS.

Importante: esta personalização é apenas visual e funciona somente na sua instalação do VS Code. Ela não altera nenhum projeto.

---

✨ Preview

---

📦 Requisitos

• Visual Studio Code
• Extensão Custom CSS and JS Loader
• Git (opcional, mas recomendado)

---

Instalação

1. Instale a extensão

Procure por Custom CSS and JS Loader na loja de extensões do VS Code e instale-a.

---

2. Clone este repositório

Abra um terminal e execute:

git clone https://github.com/SEU-USUARIO/SEU-REPOSITORIO.git

Se preferir, você também pode clicar em Code → Download ZIP e extrair os arquivos.

---

3. Copie o caminho da pasta

Depois de clonar o repositório, copie o caminho completo da pasta.

Por exemplo:

C:\Users\Giovana\Documents\vscode-image-background

ou

D:\Projetos\vscode-image-background

---

4. Abra o settings.json

No VS Code pressione:

Ctrl + Shift + P

Pesquise por:

Preferences: Open User Settings (JSON)

e pressione Enter.

---

5. Adicione o caminho do style.css

No settings.json, adicione:

"vscode_custom_css.imports": [
    "file:///CAMINHO_DA_PASTA/style.css"
]

Substitua CAMINHO_DA_PASTA pelo caminho da pasta que você copiou.

Por exemplo:

"vscode_custom_css.imports": [
    "file:///C:/Users/Giovana/Documents/vscode-image-background/style.css"
]

⚠️ No Windows:

• utilize file:///
• utilize / em vez de \

Exemplo do settings.json:

---

6. Recarregue o CSS

Feche o VS Code.

Abra novamente como Administrador (Windows).

Depois pressione:

Ctrl + Shift + P

Execute o comando:

Reload Custom CSS and JS

Em seguida, reinicie o VS Code.

---

🎨 Personalização

Você pode trocar a imagem alterando esta linha no style.css:

background-image: url("SUA_IMAGEM");

Também é possível alterar:

• Tamanho (width e height)
• Posição (left e bottom)
• Transparência (opacity)
• Rotação (transform)
• Efeitos (filter)

---

💡

• A personalização é aplicada apenas na sua instalação do VS Code.
• Nenhum arquivo do seu projeto é modificado.
• Sempre que alterar o style.css, execute novamente o comando Reload Custom CSS and JS para aplicar as mudanças.

---