Como Conectar o VS Code à Hospedagem via FTP/SFTP: Crie Plugins, Templates e Entradas em Tempo Real

há 1 hora

Editar arquivos localmente, gerar arquivos compactados em .zip e fazer o upload manual pelo FileZilla ou pelo gerenciador do cPanel a cada teste atrasa seu fluxo de desenvolvimento.

Integrando o Visual Studio Code diretamente à sua hospedagem via FTP/SFTP, todo salvamento de arquivo (Ctrl + S) pode ser sincronizado automaticamente com sua aplicação MuCRM.

1. Instalar a Extensão no VS Code

Abra o Visual Studio Code.
Acesse a aba Extensões no menu lateral esquerdo (Ctrl + Shift + X).
Pesquise por SFTP.
Localize uma extensão compatível, como a extensão SFTP de Natizyskunk ou liximomo.
Clique em Install.

2. Configurar o Arquivo de Conexão

Crie uma pasta vazia no seu computador e abra-a no VS Code através de File → Open Folder....
Pressione Ctrl + Shift + P para abrir a Paleta de Comandos.
Digite SFTP: Config e pressione Enter.
O VS Code criará a pasta .vscode contendo o arquivo sftp.json.

Substitua o conteúdo do arquivo pelo exemplo abaixo:

{
    "name": "MUCRM Game Framework",
    "host": "ftp.seudominio.com.br",
    "protocol": "ftp",
    "port": 21,
    "username": "usuário",
    "password": "senhaaqui",
    "remotePath": "/public_html",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false,
}

Nota: Se sua hospedagem exigir uma conexão segura via SSH, altere o campo "protocol" para "sftp" e a porta para 22.

Configurações importantes

Segurança: evite compartilhar o arquivo sftp.json, pois ele pode conter as credenciais de acesso à hospedagem.

3. Baixar os Arquivos da Hospedagem

Depois de configurar a conexão, faça o download do projeto existente no servidor:

Pressione Ctrl + Shift + P.
Digite SFTP: Download Project.
Pressione Enter.
O VS Code fará o download dos arquivos da hospedagem para sua pasta local.

A partir desse momento, você poderá trabalhar diretamente nos arquivos do MuCRM pelo VS Code.

4. Estrutura de Diretórios do MuCRM

Com a sincronização automática ativada através de:

"uploadOnSave": true

as alterações realizadas nos arquivos serão enviadas automaticamente para a hospedagem ao utilizar Ctrl + S.

Alguns diretórios que podem ser utilizados durante o desenvolvimento:

Templates e Temas

resources/views/themes/seu-tema/

Local onde ficam os templates e arquivos relacionados aos temas do sistema.

Landing Pages e Entradas

resources/views/landing/

ou:

public/landing/

Dependendo da estrutura utilizada pelo projeto.

Plugins e Extensões

app/Plugins/SeuPlugin/

Diretório destinado aos plugins e extensões do projeto.

Estilos, Scripts e Imagens

public/assets/

Local onde podem ficar arquivos públicos como CSS, JavaScript, imagens e outros recursos.

5. Comandos Rápidos do VS Code

Salvar e enviar automaticamente

Ctrl + S

Salva o arquivo localmente e, com uploadOnSave habilitado, envia automaticamente a alteração para a hospedagem.

Upload manual

Clique com o botão direito sobre o arquivo e selecione:

SFTP: Upload

Utilize essa opção quando quiser enviar manualmente um arquivo específico.

Download manual

Clique com o botão direito sobre o arquivo e selecione:

SFTP: Download

Isso baixa a versão atual do arquivo existente no servidor e pode sobrescrever a versão local.

Comparar arquivos

Clique com o botão direito sobre o arquivo e selecione:

SFTP: Diff

Essa opção permite comparar o arquivo local com a versão existente na hospedagem.

6. Fluxo de Desenvolvimento

Com essa configuração, seu fluxo de desenvolvimento fica muito mais rápido:

Editar arquivo
      ↓
Ctrl + S
      ↓
Upload automático
      ↓
Arquivo atualizado na hospedagem
      ↓
Testar no MuCRM

Dessa forma, você não precisa gerar um .zip e fazer upload manual pelo FileZilla ou pelo cPanel a cada pequena alteração.

Atenção: o uploadOnSave envia as alterações diretamente para o servidor. Sempre tenha cuidado ao editar arquivos em produção e mantenha um backup do projeto antes de realizar alterações importantes.

Comentários (0)