Visual Studio Code / Extension / ftp-simple / (S)FTP로 원격 서버 접속하는 확장 기능
원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭습니다. 그래서 텍스트 에디터 중에는 에디트 플러스처럼 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있습니다.
Visual Studio Code 자체에는 FTP 접속 기능이 없지만, 확장기능을 추가하여 FTP 접속을 할 수 있습니다. 여러 가지 확장 기능이 있는데, 그 중 하나인 ftp-simple의 설정법과 사용법을 정리합니다.
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 / 글꼴, 글자 크기 변경하는 방법
Visual Studio Code 편집기의 글꼴과 글자 크기를 변경하는 방법은 다음과 같습니다. 를 클릭합니다. 에서 Font Family가 글꼴, Font Size가 글자 크기를 정하는 것입니다. 원하는 글꼴과 크기로 설정합니다.
Visual Studio Code / 대문자를 소문자로, 소문자를 대문자로 일괄 변경하는 방법
많은 텍스트를 전부 대문자로 바꾸거나 소문자로 바꿔야 할 때가 있습니다. 비쥬얼 스튜디오 코드는 그 작업을 위한 기능을 포함하고 있습니다. 변환하려는 텍스트를 선택합니다. 를 누릅니다. transform을 입력합니다. 원하는 것을 선택하고 엔터 키를 누릅니다. 명령에 따른 결과는 다음과 같습니다. Transform to Lowercase : 모두 소문자로 변경 Transform to Uppercase : 모두 대문자로 변경 Transform to Title ...
주석 블록 주석 : Alt + Shift + A 한 줄 주석 : Ctrl + / 주석 단축키가 되지 않으면, 한글 입력기가 Microsoft 입력기인지 확인합니다. 한컴 오피스가 설치되어 있는 경우 한글 입력기가 한컴 입력기인 경우 문제가 생깁니다. 접기(fold), 펴기(unfold) 접기 : Ctrl + Shift + [ 펴기 : Ctrl + Shift + ] 모두 접기 : Ctrl ...
Visual Studio Code / Extension / ftp-simple / (S)FTP로 원격 서버 접속하는 확장 기능
원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭습니다. 그래서 텍스트 에디터 중에는 에디트 플러스처럼 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있습니다. Visual Studio Code 자체에는 FTP 접속 기능이 없지만, 확장기능을 추가하여 FTP 접속을 할 수 있습니다. 여러 가지 확장 기능이 있는데, 그 ...
Visual Studio Code / 탭 크기 설정하는 방법
Visual Studio Code에서 탭 크기를 설정하는 방법은 다음과 같습니다. 를 클릭하여 설정 파일을 엽니다. tab으로 검색한 후 왼쪽에서 를 클릭합니다. 에서 탭 크기를 정합니다. 에서 탭에 공백을 사용할 지 정합니다.
Visual Studio Code / 터미널 글꼴과 글자 크기 변경하는 방법
VS Code(Visual Studio Code)에서 터미널의 글꼴 또는 글자 크기를 변경하는 방법은 다음과 같습니다. 를 클릭합니다.(단축키는 Ctrl+,입니다.) 을 클릭합니다. 오른쪽에서 Font Family, Font Size를 원하는 값으로 설정합니다.
Visual Studio Code / HTML 문서에 PHP 코드 하이라이트 적용시키는 방법
VS Code에서 PHP 문서에 HTML 코드를 넣을 때는 HTML 코드 하이라이트가 잘 됩니다. 그런데, HTML 문서에 PHP 코드를 넣으면 PHP 코드 하이라이트가 잘 되지 않습니다. 이 문제는 VS Code의 설정을 변경해서 해결할 수 있습니다.
Visual Studio Code / 구버전 다운로드하는 방법
Visual Studio Code는 지속적으로 개발되고 있습니다. 유용한 기능을 추가한 새 버전이 계속 나오고 있죠. 그런데, 버전이 올라가면서 확장 기능을 사용할 수 없게 되는 경우가 있습니다.
Visual Studio Code / 언어 변경하는 방법
Visual Studio Code를 설치하면 시스템의 언어로 세팅이 됩니다. 즉 윈도우에 설치했을 때 윈도우의 언어가 한글이라면 Visual Studio Code의 언어도 한글이 됩니다. 만약 언어를 영어로 변경하고 싶다면, 다음과 같이 합니다. 를 누릅니다. 그러면 상단에 명령을 입력하는 창이 나오는데... 언어라고 입력하면 관련 메뉴들이 나옵니다. 그 중 을 선택하고 엔터키를 누릅니다. 설치된 언어 ...