{"id":21421,"date":"2021-05-19T15:13:37","date_gmt":"2021-05-19T18:13:37","guid":{"rendered":"https:\/\/king.host\/wiki\/?post_type=article&#038;p=21421"},"modified":"2025-06-11T11:52:55","modified_gmt":"2025-06-11T14:52:55","slug":"como-conectar-ftp-com-visual-studio-code","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/como-conectar-ftp-com-visual-studio-code\/","title":{"rendered":"Como conectar seu FTP com o Visual Studio Code"},"content":{"rendered":"\n<p><em>Neste artigo vamos te mostrar como voc\u00ea pode configurar o Visual Studio Code para se conectar ao FTP e, dessa forma, automatizar o upload de arquivos.<\/em><\/p>\n\n\n\n<p>O <strong>VSCode<\/strong>, como \u00e9 chamado, \u00e9 uma ferramenta multiplataforma que est\u00e1 dispon\u00edvel para Windows, Mac OS e Linux, sendo executada nativamente em cada plataforma. Ele \u00e9 gratuito e <em>opensource<\/em>. Al\u00e9m disso, tamb\u00e9m possui suporte a mais de 30 linguagens de programa\u00e7\u00e3o, como JavaScript, C#, C++, PHP, Java, HTML, R, CSS, SQL, Markdown, TypeScript, LESS, SASS, JSON e muito mais.<\/p>\n\n\n\n<p>Neste artigo mostraremos como voc\u00ea pode configurar a conex\u00e3o do Visual Studio Code com o seu FTP. Dessa forma, voc\u00ea n\u00e3o precisar\u00e1 mais ficar enviando cada arquivo manualmente sempre que precisar, pois o pr\u00f3prio VSCode far\u00e1 o envio direto para o diret\u00f3rio no seu FTP.<\/p>\n\n\n\n<box-info class=\"wp-block-k-box-info\">Voc\u00ea pode baixar a vers\u00e3o correspondente com seu S.O. aqui: <a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code<\/a>.<\/box-info>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/king.host\/?utm_source=wiki&amp;utm_medium=banner-artigo&amp;utm_campaign=banner-artigo-wiki-awareness-como-conectar-ftp-com-visual-studio-code\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-original=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2015\/07\/banner_2.png\" alt=\"banner-kinghost\" class=\"wp-image-25433\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Configurando a conex\u00e3o do Visual Studio Code com o FTP<\/h2>\n\n\n\n<p>Antes de tudo, para configurarmos a conex\u00e3o, \u00e9 necess\u00e1rio baixar e instalar um <em>plugin<\/em> chamado <strong>Simple FTP<\/strong>, que voc\u00ea pode encontrar no pr\u00f3prio <em>marketplace<\/em> do VSCode:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01.png\" v-on:click=\"toggle_modal\"><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"392\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01.png\" alt=\"Baixando o plugin Simple FTP para poder utilizar o Visual Studio.\" class=\"wp-image-21422 lazyload\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01.png 927w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01-300x127.png 300w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01-768x325.png 768w\" data-sizes=\"(max-width: 927px) 100vw, 927px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 927px; --smush-placeholder-aspect-ratio: 927\/392;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"392\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01.png\" alt=\"Baixando o plugin Simple FTP para poder utilizar o Visual Studio.\" class=\"wp-image-21422\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01.png 927w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01-300x127.png 300w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode01-768x325.png 768w\" sizes=\"(max-width: 927px) 100vw, 927px\" \/><\/noscript><\/a><\/figure>\n\n\n\n<p>Depois do <em>plugin<\/em> instalado, pressione a tecla <strong>F1<\/strong>, digite <strong>ftp-simple<\/strong> e encontre a op\u00e7\u00e3o <strong>connection setting<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02.png\" v-on:click=\"toggle_modal\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"329\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02.png\" alt=\"Selecionando a op\u00e7\u00e3o connection setting.\" class=\"wp-image-21423 lazyload\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02.png 762w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02-300x130.png 300w\" data-sizes=\"(max-width: 762px) 100vw, 762px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 762px; --smush-placeholder-aspect-ratio: 762\/329;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"329\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02.png\" alt=\"Selecionando a op\u00e7\u00e3o connection setting.\" class=\"wp-image-21423\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02.png 762w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode02-300x130.png 300w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><\/noscript><\/a><\/figure>\n\n\n\n<p>Dessa forma, abrir\u00e1 uma nova tela com os dados de acesso.<br>Caso voc\u00ea n\u00e3o saiba como obter os dados de acesso ao seu FTP, veja o artigo <a href=\"https:\/\/king.host\/wiki\/artigo\/como-verificar-os-dados-de-acesso-ao-ftp\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como verificar os dados de acesso ao FTP<\/a>.<\/p>\n\n\n\n<p>Nos dados a seguir, voc\u00ea vai precisar alterar somente os campos <strong>host<\/strong> , <strong>username<\/strong> e <strong>password<\/strong>.<br>Al\u00e9m disso, voc\u00ea pode tamb\u00e9m pode configurar mais de uma conex\u00e3o, basta apenas voc\u00ea inserir uma v\u00edrgula e colocar a pr\u00f3xima conex\u00e3o depois da \u00faltima chave.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n\t{\n\t\t\"name\": \"Nome da conex\u00e3o\",\n\t\t\"host\": \"ftp.seudominio.com.br\",\n\t\t\"port\": 21,\n\t\t\"type\": \"ftp\",\n\t\t\"username\": \"usu\u00e1rio\",\n\t\t\"password\": \"senha\",\n\t\t\"path\": \"\/\",\n\t\t\"autosave\": true,\n\t\t\"confirm\": true\n\t}\n]<\/code><\/pre>\n\n\n\n<p>Depois de salvar esta configura\u00e7\u00e3o, \u00e9 recomendado que voc\u00ea reinicie o VSCode e, quando abrir novamente, pode apertar a tecla <strong>F1<\/strong> e digitar <strong>ftp-simple<\/strong>. Dessa forma, mostrar\u00e1 a op\u00e7\u00e3o de conectar ao seu FTP com a op\u00e7\u00e3o <strong>Remote directory open to workspace<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"439\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode03.png\" alt=\"\" class=\"wp-image-21424 lazyload\" v-on:click=\"toggle_modal\" data-srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode03.png 578w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode03-300x228.png 300w\" data-sizes=\"(max-width: 578px) 100vw, 578px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 578px; --smush-placeholder-aspect-ratio: 578\/439;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"439\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode03.png\" alt=\"\" class=\"wp-image-21424\" v-on:click=\"toggle_modal\" srcset=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode03.png 578w, https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/05\/vscode03-300x228.png 300w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/noscript><\/figure>\n\n\n\n<p>Finalmente a configura\u00e7\u00e3o estar\u00e1 conclu\u00edda.<br>Agora \u00e9 s\u00f3 aproveitar e cada vez que voc\u00ea editar e salvar um arquivo j\u00e1 ir\u00e1 enviar automaticamente para o diret\u00f3rio que est\u00e1 acessando no seu FTP.<\/p>\n","protected":false},"author":9,"featured_media":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[5],"article-tag":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/21421"}],"collection":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/comments?post=21421"}],"version-history":[{"count":4,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/21421\/revisions"}],"predecessor-version":[{"id":26641,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/21421\/revisions\/26641"}],"wp:attachment":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/media?parent=21421"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-category?post=21421"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-tag?post=21421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}