FTP(SFTP)로 원격 서버 접속하는 확장 기능

원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭습니다. 그래서 텍스트 에디터 중에는 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있습니다. 또는 프로그램 자체에 포함되지는 않았지만, 플러그인을 이용해서 FTP 기능을 추가할 수 있는 텍스트 에디터도 있습니다.

Visual Studio Code는 확장기능을 추가하여 FTP 접속이 가능합니다. 여러 가지 확장기능이 있는데, 그 중 하나인 ftp-simple의 설정법과 사용법을 정리합니다.

FTP 플러그인 중에는 로컬 머신과 서버를 동기화 해주는 것이 있고, 서버의 파일을 직접 수정하는 것이 있습니다. ftp-simple은 직접 수정합니다.
ftp-simple은 ftp 뿐만 아니라 sftp도 지원합니다. 서버에 SSH로 접속할 수 있다면 바로 사용할 수 있습니다.
ftp-simple은 Visual Studio Code 1.93.0 미만에서 사용할 수 있습니다.

1 ftp-simple 설치
2 서버 연결 세팅
3 서버에 연결하여 파일 열기
4 서버에 연결하여 디렉토리 열기
5 서버에 연결 끊기

ftp-simple 설치

확장기능(Extension)에서 ftp로 검색합니다.
ftp-simple을 설치합니다.

서버 연결 세팅

F1을 누른 후 ftp-simple을 입력하면 관련 항목이 나옵니다.
[ftp-simple : Config - FTP connection setting]을 선택합니다.

연결할 서버의 정보를 입력하고 저장합니다.
confirm을 true로 하면 서버에 저장하기 전에 다시 한 번 저장할 것이냐고 묻고, false로 하면 묻지 않고 바로 저장합니다.

여러 개의 서버 정보를 넣고 싶다면 다음과 같은 형식으로 만듭니다. 중괄호 사이에 쉼표(,)가 들어간다는 것에 주의합니다.

[
  {
    "name": "localhost",
    "host": "",
    "port": 21,
    "type": "ftp",
    "username": "",
    "password": "",
    "path": "/",
    "autosave": true,
    "confirm": true
  },
  {
    "name": "localhost",
    "host": "",
    "port": 21,
    "type": "ftp",
    "username": "",
    "password": "",
    "path": "/",
    "autosave": true,
    "confirm": true
  }
]

서버에 연결하여 파일 열기

F1을 누른 후 [ftp-simple : Open - Open the file directly from FTP server]를 선택합니다.

서버를 선택하고, 원하는 파일을 선택하면 편집기에 그 파일이 열립니다.

서버에 연결하여 디렉토리 열기

F1을 누른 후 [ftp-simple : Remote directory open to workspace]를 선택합니다.

서버 목록에서 접속하려는 서버를 선택합니다.

탐색기(Explorer)에 표시할 디렉토리를 선택합니다.

탐색기에 폴더와 디렉토리 목록이 나옵니다. 이제 파일 추가, 삭제, 편집 등을 할 수 있습니다.

[Save Workspace As...]를 클릭하여 워크스페이스로 저장하면, 좀 더 편하게 접근할 수 있습니다.

서버에 연결 끊기

서버와의 연결을 끊으려면 [ftp-simple : Close all FTP connections]를 실행합니다.

Visual Studio Code / 설정 동기화 하는 방법

Visual Studio Code를 여러 기기에서 사용한다면 설정을 동기화하는 것이 편합니다. 설정 동기화를 사용하기 위해서는 Github 또는 Microsoft 계정이 필요합니다. 동기화하는 방법은 다음과 같습니다. 를 클릭합니다. 을 클릭합니다. Github 또는 Microsoft 계정으로 로그인합니다. 동기화 여부는 아래와 같이 확인할 수 있습니다.

Visual Studio Code / 단축키

주석 블록 주석 : Alt + Shift + A 한 줄 주석 : Ctrl + / 주석 단축키가 되지 않으면, 한글 입력기가 Microsoft 입력기인지 확인합니다. 한컴 오피스가 설치되어 있는 경우 한글 입력기가 한컴 입력기인 경우 문제가 생깁니다. 접기(fold), 펴기(unfold) 접기 : Ctrl + Shift + [ 펴기 : Ctrl + Shift + ] 모두 접기 : Ctrl ...

Visual Studio Code / 언어 변경하는 방법

Visual Studio Code를 설치하면 시스템의 언어로 세팅이 됩니다. 즉 윈도우에 설치했을 때 윈도우의 언어가 한글이라면 Visual Studio Code의 언어도 한글이 됩니다. 만약 언어를 영어로 변경하고 싶다면, 다음과 같이 합니다. 를 누릅니다. 그러면 상단에 명령을 입력하는 창이 나오는데... 언어라고 입력하면 관련 메뉴들이 나옵니다. 그 중 을 선택하고 엔터키를 누릅니다. 설치된 언어 ...

Visual Studio Code / 자동 줄바꿈(Word Wrap) 설정하는 방법

Visual Studio Code에서 편집창을 넘어갈 만큼 코드가 길어지면, 다음 줄로 내려가지 않고 계속 길어집니다. 좌우 스크롤을 해야하는 상황이 발생하는 거죠. 그게 불편하다면 편집창 끝에 다다랐을 때 다음 줄로 넘어가도록 설정할 수 있습니다. 이를 보통 Word Wrap이라 하고, 대부분의 텍스트 에디터가 그 설정을 가지고 있습니다. 방법은 다음과 같습니다. 를 클릭합니다. word ...

Visual Studio Code / Extension / ftp-simple / FTP(SFTP)로 원격 서버 접속하는 확장 기능

원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭습니다. 그래서 텍스트 에디터 중에는 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있습니다. 또는 프로그램 자체에 포함되지는 않았지만, 플러그인을 이용해서 FTP 기능을 추가할 수 있는 텍스트 에디터도 있습니다. Visual Studio Code는 확장기능을 추가하여 FTP 접속이 가능합니다. ...

Visual Studio Code / 글꼴, 글자 크기 변경하는 방법

Visual Studio Code 편집기의 글꼴과 글자 크기를 변경하는 방법은 다음과 같습니다. 를 클릭합니다. 에서 Font Family가 글꼴, Font Size가 글자 크기를 정하는 것입니다. 원하는 글꼴과 크기로 설정합니다.

Visual Studio Code / 구버전 다운로드하는 방법

Visual Studio Code는 지속적으로 개발되고 있습니다. 유용한 기능을 추가한 새 버전이 계속 나오고 있죠. 그런데, 버전이 올라가면서 확장 기능을 사용할 수 없게 되는 경우가 있습니다.

Visual Studio Code / 터미널 글꼴과 글자 크기 변경하는 방법

VS Code(Visual Studio Code)에서 터미널의 글꼴 또는 글자 크기를 변경하는 방법은 다음과 같습니다. 를 클릭합니다.(단축키는 Ctrl+,입니다.) 을 클릭합니다. 오른쪽에서 Font Family, Font Size를 원하는 값으로 설정합니다.

Visual Studio Code / 탭 크기 설정하는 방법

Visual Studio Code에서 탭 크기를 설정하는 방법은 다음과 같습니다. 를 클릭하여 설정 파일을 엽니다. tab으로 검색한 후 왼쪽에서 를 클릭합니다. 에서 탭 크기를 정합니다. 에서 탭에 공백을 사용할 지 정합니다.

Visual Studio Code / 대문자를 소문자로, 소문자를 대문자로 일괄 변경하는 방법

많은 텍스트를 전부 대문자로 바꾸거나 소문자로 바꿔야 할 때가 있습니다. 비쥬얼 스튜디오 코드는 그 작업을 위한 기능을 포함하고 있습니다. 변환하려는 텍스트를 선택합니다. 를 누릅니다. transform을 입력합니다. 원하는 것을 선택하고 엔터 키를 누릅니다. 명령에 따른 결과는 다음과 같습니다. Transform to Lowercase : 모두 소문자로 변경 Transform to Uppercase : 모두 대문자로 변경 Transform to Title ...