Pular para o conteúdo principal

Conectando-se aos arquivos do site via VSCode

Para se conectar via SSH e FTP/SFTP, o Visual Studio Code usa uma extensão que fornece acesso conveniente a arquivos remotos.

SSH​

Instale a extensão​

Abra o Visual Studio Code. Clique no ícone "Extensions" na barra lateral (ícone quadrado); na visualização Extensions, procure por SSH.
Clique em "Install" na extensão chamada "Remote - SSH" da Microsoft.

Instalar extensão

Configure as chaves SSH​

Para se conectar via SSH sem senha, configure sua chave SSH no FASTPANEL usando este artigo.

observação

Você pode encontrar o usuário do site no cartão do site, no campo "Site user". Para alterar a senha do usuário do site, vá para a seção "Management" → "Users" no FASTPANEL®.

Configure o SSH no VSCode​

Pressione F1 no Windows/Linux ou Cmd+Shift+P no Mac para abrir a Command Palette, digite e selecione Remote-SSH: Add New SSH Host e, em seguida, insira a string de conexão SSH no formato:

ssh site_user@11.22.33.44

Adicionar novo host SSH

Substitua site_user e 11.22.33.44 pelos valores apropriados. Em vez de site_user, você precisa especificar o usuário do site e, em vez de 11.22.33.44, o endereço IP do seu servidor. Após inserir o comando, escolha o arquivo de configuração para salvar a configuração SSH (geralmente ~/.ssh/config).

Conecte-se ao servidor remoto​

Pressione F1 no Windows/Linux ou Cmd+Shift+P no Mac para abrir a Command Palette, digite e selecione Remote-SSH: Connect to Host, escolha o host adicionado anteriormente, aceite a impressão digital do servidor e insira a frase secreta da sua chave SSH se for a primeira vez que estiver se conectando e, se solicitado, insira sua senha.

Depois de se conectar, vá para "Explorer" → "Open Folder" para abrir uma pasta no host.
Por exemplo, /var/www/site_user/data/www/example.com.

Conectar ao servidor remoto

Abra arquivos e comece a programar​

Depois de conectado, o VSCode será recarregado e você poderá navegar pelos arquivos no servidor remoto diretamente no VSCode. Você pode abrir, editar e salvar arquivos exatamente como faria na sua máquina local.

Para mais informações, consulte a documentação da extensão.

FTP/SFTP​

Instale a extensão​

Abra o Visual Studio Code. Clique no ícone "Extensions" na barra lateral (ícone quadrado). Digite SFTP na barra de pesquisa. Clique em "Install" para instalar a extensão selecionada.

Instalar extensão

Configure a conexão​

Abra a Command Palette pressionando F1 no Windows/Linux ou Cmd+Shift+P no Mac, digite SFTP: Config e, em seguida, edite os parâmetros de configuração com as informações do seu servidor remoto no arquivo sftp.json dentro do diretório .vscode. Por exemplo:

{  
    "name": "My Server",  
    "host": "11.22.33.44",  
    "protocol": "ftp",  
    "password": "password",  
    "port": 21,  
    "username": "ftp_user",  
    "remotePath": "/",  
    "uploadOnSave": false,  
    "useTempFile": false,  
    "openSsh": false  
}
observação

Você pode aprender sobre a criação de contas FTP no FASTPANEL® neste artigo e sobre contas SFTP neste aqui.

  • "host": endereço IP do seu servidor.
  • "protocol": Especifique ftp ou sftp.
  • "port": 21 para FTP ou 2222 para SFTP.
  • "username" e "password": login e senha da conta FTP/SFTP.
  • "remotePath": Especifique o diretório no servidor com o qual você deseja trabalhar.
  • "uploadOnSave": Opção para upload automático ao salvar o arquivo.

O parâmetro de senha em sftp.json é opcional; se for omitido, será solicitado que você informe uma senha durante a sincronização. Salve e feche o arquivo sftp.json.

Trabalhando com arquivos​

Abra a Command Palette; pressione F1 no Windows/Linux ou Cmd+Shift+P no Mac. Em seguida, digite SFTP para ver vários comandos disponíveis, que você também pode acessar nos menus de contexto do explorador de arquivos do projeto.
Para sincronizar com uma pasta remota, use o comando SFTP: Download Project, que baixará o diretório especificado na configuração remotePath em sftp.json para o diretório local aberto.

Remote Explorer​

O Remote Explorer permite navegar por arquivos remotos. Você pode abrir o Remote Explorer executando o comando View: Show SFTP. Depois, clique na visualização SFTP na Activity Bar.

Com o Remote Explorer, você só pode visualizar o conteúdo de um arquivo. Use SFTP: Edit in Local para editá-lo localmente.

Instalar extensão