Jeonghun (James) Lee

4/30/2020

VS Code Extension

1. VS Code 기본기능사용법

VS Code의 기능소개 및 각 Tool 기능

특히 단축키 부분
https://ahyuo79.blogspot.com/2020/02/visual-studio-code.html

우선 VS Code 기반으로 설치해서 진행하면 Code 관리 및 문서작성도 쉽게 관리가 되어서 편리하다.

요즘 느끼는것은 Eclipse보다 좀 더 편하다고 생각되는데, 다만 VS Code가 node.js 기반이라 그런지 잘 죽는 경향이 있다.

VS Code는 MS에 개발했지만, Linux에서도 잘돌아가며 나의 경우, 거의 Linux에서 많이 사용한다.

1.1 VS Code Version Control

좌측 Source Control 메뉴

좌측메뉴의 Source Control 메뉴 선택후 Git 관련 명령어로 관리하며, SOURCE CONTROL:GIT 에서 아래 명령들을 실행

CHANGES 창 아래에 아직 git add가 되지 않은 부분 (Local Repository)
STAGED CHANGES git add 후 Local의 Stage에 반영 ( Local Repository)
우측 상단 "..." 선택 후 "commit all " ( Local Repository)
우측 상단 "..." 선택 후 push or sync 진행 (Remote Repository)

VS Code Version Control(Git)
https://code.visualstudio.com/docs/editor/versioncontrol

1.2 VS Code Task 관리방법

Task라고 해서 이름이 좀 익숙치 않을 것인데, 사용용도는 내가 만들고자하는 Script를 바로 쉽게 관리하는 기능이라고 생각하면 되겠다.

Terminal -> Run Task 기능

내가 자주 사용하는 기능으로 Macro라고 생각하면 되겠으며, Task 기반으로 본인이 하고 싶은 것을 만들면 된다.

예를들면, 어떤 것을 Build 하고 싶다면 관련 Task를 만들어 간단하게 실행이 가능하다.

Manual을 보면 주로 Build 관련내용이며, 연결하는 방법들이다.

하지만, 현재 나의 경우는 Linux에서 각 Shell Script 실행용으로 사용중이며, 편하다

만약 사용하게되면, .vscode 내부에 tasks.json을 별도로 만들어 사용되어지며, 이는 보관을 해야한다.

Task 설정방법

Terminal -> Configure Task
직접 .vscode 안에 tasks.json을 만들어서 넣으면 됨

설정한 Task 실행

Terminal -> Run Task

tasks.json 의 예제 1

shell script로 구성으로 Window 와 Linux 같이 호환용

.vscode/tasks.json // e.g. window and linux
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run tests",
      "type": "shell",
      "command": "./scripts/test.sh",        
      "windows": {
        "command": ".\\scripts\\test.cmd"
      },
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

tasks.json 예제2

Shell Script 용도로 Window or Linux에서 아래와 같이 실행하면된다.

.vscode/tasks.json // e.g. 두개의 Task 
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo0",
      "type": "shell",
      "command": "echo hello",        
    },
    {
      "label": "echo1",
      "type": "shell",
      "command": "echo hello",        
    }    
  ]
}

세부설정방법

https://code.visualstudio.com/docs/editor/tasks#_custom-tasks

https://code.visualstudio.com/docs/editor/tasks

1.3 VS Code Extension

현재 주로 사용중인 VS Code Extension 과 각 기능 소개

Intellisense의 기능사용법
https://code.visualstudio.com/docs/editor/intellisense

VSC Essential ( Package 합)
https://marketplace.visualstudio.com/items?itemName=Gydunhn.vsc-essentials

2. Remote Development 기능 및 설치

VS Code에서 가장 많이 사용할 기능이며, 기본 사용방법을 알아두도록하자.
SSH를 기반으로 외부 Server에 접속하여 쉽게 개발을 하도록 돕고 있으며, Remote Server에도 VS Code의 PlugIns 들을 설치진행하여 다양한 기능을 사용가능.

아래 기능은 주로 Window에 VS Code를 설치하고, Remote Linux Server에 연결하여 직접 개발하는 방식으로 사용한다.

상위그림 참조
https://code.visualstudio.com/docs/remote/remote-overview

2.1 Remote Development 설치

Remote Development 의 기능이 아래의 3 기능을 포함
https://code.visualstudio.com/docs/remote/linux

Remote SSH

Window에서 SSH기반으로 Remote Linux Server에 연결하여 쉽게 Source 연결 및 관리
https://code.visualstudio.com/remote-tutorials/ssh/getting-started

Remote WSL(Windows Subsystem for Linux)

Window 용 WSL에 쉽게 연결하여 WSL내부의 Source 연결 및 관리
https://code.visualstudio.com/remote-tutorials/wsl/enable-wsl

Remote Container

Docker를 다룬다면 당연히 설치하여 진행
https://code.visualstudio.com/remote-tutorials/containers/getting-started

2.2 Window 10 의 WSL 설치

Window 7에서 Virtual Box 기반으로 Ubuntu 매번 설치를 진행하여 진행하였지만, Window 10으로 오면서 MS의 WSL기반의 Linux 로 설치진행
그리고, Remote로 WSL를 연결 사실 Remote라기 보다는 Local이 맞겠다.

Window 10 WSL (Window Subsystem for Linux) 설치

Window 10 Ubuntu 18.04 LTS 설치
https://wiki.ubuntu.com/WSL
https://www.microsoft.com/ko-kr/p/ubuntu-1804-lts/9n9tngvndl3q?rtc=1&activetab=pivot:overviewtab

설치후 실행시 문제발생

PowerShell을 관리자모드 (마우스우측버튼)실행

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

상위와 같이 설정하면 PC 재부팅후 실행하면 동작되어짐

WSL 관련설명 및 설치방법
https://docs.microsoft.com/en-us/windows/wsl/about
https://docs.microsoft.com/ko-kr/windows/wsl/install-win10?redirectedfrom=MSDN

Ubuntu 설치 후 아래와 같이 update 와 upgrade 진행

$ sudo apt update
$ sudo apt upgrade -y

3. Remote Development 사용법

상위에서 설치한 Remote Development를 Window에서 Remote Linux Server or Window 내부의 WSL에 연결하여 소스 및 관리를 해보도록하자.

3.1 VS Code의 Remote Explorer

Remote Extension을 설치를 했으니, 직접 Remote로 연결하여 Explorer기반으로 소스를 연결및 관리를 진행해보도록 하자.

좌측메뉴 의 Remote Explorer 메뉴선택
Remote Explorer 에서 아래와 같이 선택

SSH Targets
WSL Targets
Containers

3.2 SSH Target 선택 (Linux Server)

Remote Server에 SSH가 지원이 되면, SSH 기반으로 SCP와 SSH기반으로 Xwindow 도 관련하여 볼수가 있다.

그러므로 SSH는 기본으로 설정하고 설치를 진행하고 사용해야한다.

둘 중 하나를 선택 해서 추가

+ Add New : 처음 설정시
* Configure : 두번째 설정시 부터

ssh jhlee@192.168.1.200 -A //-A Forward 기능

상위 아이콘 Configuration
or
Remote-SSH: Open Configuration File

상위 Config를 세부설정확인
https://code.visualstudio.com/docs/remote/ssh

SSH Targets 설정완료

접속 후 아래 메뉴를 클릭하면 Remote SSH 설정가능 (Remote SSH : Setting)

기본설정은 완료되었으며, 각 Project 설정은 좌측 Explorer 창에서 새로 시작

3.3 WSL Targets 설정

Add Distro 를 하면 WSL를 설치가 가능하지만 이미 설치를 진행했기때문에 생략

WSL Targets (Window 10 내부)

Connect To WSL 선택

처음 WSL 접속 할 경우 자동으로 WSL실행하기 때문에 연결 시간이 좀 걸린다.
이 후는 SSH Server 와 거의 유사한 것 같다.

좌측아래의 이 부분을 선택하면 관련설정을 동일하게 볼수 있음

3.4 Containers 설정

Linux Laptop의 경우 Docker를 이미 많이 사용 중이지만 VS Code의 Container를 이용하여 사용해보기로 했지만, 현재 비추천하며 필요하다면 사용
나중에 괜찮아 질거라고 본다.

Container 사용방법 및 System Requirement 확인
https://code.visualstudio.com/docs/remote/containers

Sysytem Requirement 확인

Window에서는 Desktop Docker가 필요하며 이를 이용해야한다.

Desktop Docker 설치진행
https://www.docker.com/products/docker-desktop

New Container 선택

Linux에서 VS Code를 사용할 경우 아래와 같이 쉽게 Docker를 잡을 수 있지만, 차리리 Docker를 설치해서 관리하는게 편한 것 같다.

Docker를 별도로 설치해서 관리하는 게 더 편함

3.5 Remote 구성 후 Open Folder 구성방법

Open Folder 기반으로 프로젝트 구성가능

첫번째 일 경우, 좌측의 Explorer 메뉴선택 후 Open Folder로 Open Folder
두번째 일 경우, 이미 존재하므로 File-> Open Folder

각 정보는 Remote Exploer로 자동저장됨

접속 후 좌측메뉴에서 Explorer 선택 후 Open Folder 선택 후 본인이 원하는 Project로 이동
그 기준으로 Project 정보 .vscode가 생성됨

.vscode-server/      // VS Code의 PlugIn Program  과 저장정보 
├── bin
│   └── a5d1cc28bb5da32ec67e86cc50f84c67cc690321
├── data
│   ├── logs
│   ├── Machine
│   ├── machineid
│   └── User
└── extensions
    ├── austin.code-gnu-global-0.2.2
    ├── ms-python.python-2020.5.86806
    ├── ms-vscode.cpptools-0.28.3
    ├── spadin.remote-x11-1.3.4
    └── spadin.remote-x11-ssh-1.3.4

.vscode:  // launch.json 파일

.vscode 와 .vscode-server 부분에 VS Code 관련부분을 Download하여 설치 진행
만약 문제가 생긴다면, 이 부분을 삭제 후 다시 진행

4. VS Code의 유용한 Extensioon 및 Tools 소개

VS Code의 Extension을 설치하여 기능을 좀 더 확장하고 이외의 Window Tool or Linux Tool을 사용하여 확장하여 사용해보도록하자.

4.1 Remote X Window 관련 Tools 소개

SSH 기반으로 Window에서 X Window로 연결하고 Remote로 보고자 할 경우 사용한다.

구지 SSH가 아니더라도 Remote X window를 제공해준다.

Remote X11

X Sever를 접속할 수 있는 Tool 이지만 불안전한 존재로 아래의 Tool 과 같이 사용한다고 하며, X11 Forwarding은 아래의 Remote X11 (SSH) 필요

VcXsrv (이것만으로도 xterm을 이용하여 X Forwarding 가능)
Cygwin/X
Xming
X410

https://marketplace.visualstudio.com/items?itemName=spadin.remote-x11

Remote X11 (SSH)

SSH를 이용하여 X Forwarding 하는 Tool이여 상위 VcXsrv와 거의 동일할 것 같다.
X Shell에서 X Manager를 생각을 하면되겠으며, Linux에서는 SSH에 옵션 -x를 추가하면 쉽게 동작가능하다.
https://marketplace.visualstudio.com/items?itemName=spadin.remote-x11-ssh

사실현재 Remote X11 과 확장인 Remote X11 (SSH)의 이용은 좀 생각해봐야겠으며, vcXsrv로만으로 충분히 X11 Forwarding이 가능하므로,
이는 좀 더 업그레이드 된 후 다시 사용해보도록 하자.

만약 SSH를 이용한 X11 Forwarding 간단한 TEST 하고싶은면 eog *.png Linux 명령으로 그림을 보면된다.
혹은 간단한 Python을 작성을 하여도 상관없다.

4.2 VS Code의 Extension(소스분석)

Remote 접속일 경우, Local 이외에도 Remote 부분에도 별도설치를 진행을 해줘야 제대로 동작가능

InteliSense

Ecplise의 Index or ctags 처럼 함수와 변수를 쉽게 분석하고, 위치를 찾아주며 다양한 기능을 제공하고 있다.
현재 사용중인 것은 C/C++ 와 Python Package
https://code.visualstudio.com/docs/editor/intellisense
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

Embdedded Linux Kernel Dev

Kernel 의 Device Tree 를 비롯하여, Kernel Config
https://marketplace.visualstudio.com/items?itemName=microhobby.linuxkerneldev

기타확장
https://marketplace.visualstudio.com/items?itemName=EugenWiens.bitbake

4.3 VS Code 현재 설정을 Gist로 저장

요즘 편하게 사용하는 기능인데, VS Code의 환경설정을 Github의 Gist에 저장하는 방법이다.

Setting Sync

회사동료에서 알게된 기능으로 VS Code의 환경설정을 Github의 Gist에 저장이 가능
Github의 계정과 저장할 Gist를 별도로 생성해야함
https://code.visualstudio.com/docs/editor/settings-sync
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

피드 구독하기: 글 ( Atom )