VSCode 로 개발하기

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

원격 파일(Azure, Dropbox, S3, SFTP, FTP or Slack 와 같은)을 로컬 파일 같이 처리하기 위한 멀티 프로토콜을 지원합니다.

링크 : https://marketplace.visualstudio.com/items?itemName=mkloubert.vscode-remote-workspace

새로운 Visual Studio Code FileSystem API 의 다중 프로토콜 지원. 특히 로컬 파일 같은 원격 파일 처리에 적합합니다.

사용 방법

GUI에서 .code-workspace를 사용하여 파일을 작성 (또는 갱신) 하고여십시오 File >> Open Workspace....

{
    "folders": [{
        "uri": "sftp://my-user:my-password@example.com?debug=1",
        "name": "My SFTP folder"
    }]
}

.code-workspace 파일을 만든 적이 없다면 홈 디렉토리의 새 폴더 (예 : "VSCodeworkspace")로 시작할 수 있습니다. 제공된 json 파일을 새 파일로 복사하십시오. 그런 다음 VSCode GUI 를 사용하여 해당 파일을 엽니다 File >> Open Workspace....

매개 변수 정보

매개 변수는 key-value-pair 로 URI 의 설정이어야 하며 .code-workspace 파일의 settings 섹션에는 설정되지 않아야 합니다.

SFTP 연결의 debug 를 1로 설정하려면 다음과 같이하십시오 .

{
    "folders": [{
        "uri": "sftp://myUser:myPass@example.com?debug=1",
        "name": "My SFTP folder"
    }]
}

명령

F1을 누르고 다음 명령 중 하나를 입력하십시오 :

로그

로그 파일은 .vscode-remote-workspace/.logs 사용자 홈 디렉토리의 하위 폴더에 하루 단위로 저장됩니다.

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=philsinatra.nested-comments

원래 주석을 유지하고 코드 섹션에서 주석을 신속하게 토글 할 수 있게 해줍니다.

예제들

HTML 구문

<main>
  <div class="container">
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!-- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> -->
  </div>
</main>

Becomes:

<!-- <main>
  <div class="container">
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!~~ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> ~~>
  </div>
</main> -->

example {
  /* display: flex; */
  transition: all 0.5s;
  /* user-select: none; */
  background: linear-gradient(to bottom, white, black);
}

Becomes:

/*.example {
  /~ display: flex; ~/
  transition: all 0.5s;
  /~ user-select: none; ~/
  background: linear-gradient(to bottom, white, black);
}*/

Usage

확장 프로그램을 실행하려면 주석 처리 / 주석 해제할 텍스트를 강조 표시해야 합니다.

Default Keybindings

• Mac: cmd + alt + /
• Windows: ctrl + alt + /

Extension Settings

다음 언어가 지원됩니다.

• asp
• cfm
• css
• htm
• html
• jsx
• md
• njk
• php
• svg
• tsx
• twig
• vue
• xml
• xsl

* 버젼 2.2.6 으로 PHP 에서 사용시 주석처리에 문제가 발생 할수도 있습니다.

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

ftp/sftp 동기화 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

매우 강력하고 스마트한 기능. 매우 간단하고, 세 줄의 설정 만 필요합니다! 매우 빠르며 눈 깜짝할 사이 끝납니다.

Features

• 원격 탐색기로 원격 브라우저
• 로컬 및 원격 비교
• 디렉토리 동기화
• 업로드 / 다운로드
• 저장시 업로드
• 파일 감시자
• 다중 구성
• 전환 가능한 프로필

Example Configs

Password Free

{
  "host": "host",
  "username": "username",
  "remotePath": "/remote/workspace"
}

Profiles

{
  "username": "username",
  "password": "password",
  "remotePath": "/remote/workspace/a",
  "watcher": {
    "files": "dist/*.{js,css}",
    "autoUpload": false,
    "autoDelete": false
  },
  "profiles": {
    "dev": {
      "host": "dev-host",
      "remotePath": "/dev",
      "uploadOnSave": true
    },
    "prod": {
      "host": "prod-host",
      "remotePath": "/prod"
    }
  },
  "defaultProfile": "dev"
}

Note： context and watcher are only avaliable at root level.

Use SFTP: Set Profile to swtich profile.

Multiple Context

[
  {
    "name": "server1",
    "context": "/project/build",
    "host": "host",
    "username": "username",
    "password": "password",
    "remotePath": "/remote/project/build"
  },
  {
    "name": "server2",
    "context": "/project/src",
    "host": "host",
    "username": "username",
    "password": "password",
    "remotePath": "/remote/project/src"
  }
]

Note： name is required in this mode.

Connection Hopping.

You can connection to a target server through a proxy with ssh protocol.

Note： Variable substitution is not working in a hop config.

Single Hop

local -> hop -> target

{
  "name": "target",
  "host": "targetHost",
  "username": "targetUsername",
  "privateKeyPath": "~/.ssh/id_rsa",
  "remotePath": "/path/in/target",
  "hop": {
    "host": "hopHost",
    "username": "hopUsername",
    "privateKeyPath": "/Users/hopUsername/.ssh/id_rsa" // The key file is assumed on the hop.
  }
}

Multiple Hop

local -> hopA -> hopB -> target

{
  "name": "target",
  "host": "targetHost",
  "username": "targetUsername",
  "privateKeyPath": "~/.ssh/id_rsa",
  "remotePath": "/path/in/target",
  "hop": [
    {
      "host": "hopAHost",
      "username": "hopAUsername",
      "privateKeyPath": "/Users/hopAUsername/.ssh/id_rsa"
    },
    {
      "host": "hopBHost",
      "username": "hopBUsername",
      "privateKeyPath": "/Users/hopBUsername/.ssh/id_rsa"
    }
  ]
}

Config in User Setting

You can use remote to tell sftp to get the config from remote-fs.

In User Setting:

"remotefs.remote": {
  "dev": {
    "scheme": "sftp",
    "host": "host",
    "username": "username",
    "rootPath": "/path/to/somewhere"
  },
  "projectX": {
    "scheme": "sftp",
    "host": "host",
    "username": "username",
    "privateKeyPath": "/Users/xx/.ssh/id_rsa",
    "rootPath": "/home/foo/some/projectx"
  }
}

In sftp.json:

{
  "remote": "dev",
  "remotePath": "/home/xx/",
  "uploadOnSave": true,
  "ignore": [".vscode", ".git", ".DS_Store"]
}

Remote Explorer

자세한 설정 및 명령어는 WIKI ( https://github.com/liximomo/vscode-sftp/wiki ) 를 참고하세요.

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

도커 컨테이너, 도커 이미지, 도커 허브 및 Azure 컨테이너 레지스트리를 관리해 주는 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=formulahendry.docker-explorer

Docker 가 설치되어 있어야 합니다.

도커 컨테이너 관리

도커 이미지 관리

도커 허브 관리

Azure 컨테이너 레지스트리 관리

제안된 도커 이미지

설정

• docker-explorer.autoRefreshInterval: 컨테이너 목록 자동 갱신 간격 (밀리 초). 자동 새로 고침을 사용하지 않으려면 0으로 설정
• docker-explorer.executionCommand: 컨테이너에서 실행할 명령입니다.
• docker-explorer.containerLogsOptions: 컨테이너 로그를 표시하는 옵션입니다. (기본값은 "--tail 50 -f"입니다. )

추가

기본적으로 익명으로 데이터를 수집합니다. 아래의 설정으로 사용하지 않을 수 있습니다.

{
    "docker-explorer.enableTelemetry": false
}

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

Dockerfile 및 Docker 작성 파일에 대한 구문강조, 명령, 마우스 오버 팁 및 linting 를 추가해 줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker

Docker 확장을 사용하면 VSCode 에서 컨테이너화 된 응용 프로그램을 쉽게 작성, 관리 및 배포 할 수 있습니다.

• Dockerfile, docker-compose.yml 및 .dockerignore 파일 자동 생성 (Docker: Add Docker files to Workspace)
• docker-compose.yml 및 Dockerfile 파일에 대한 구문 강조, 마우스 오버 팁, IntelliSense (completions) 
• Dockerfile 파일에 대한 Linting (오류 및 경고)
• 일반적인 Docker 명령에 대한 명령 팔레트 (F1) 통합 (예 docker build: docker push 등)
• 이미지 관리, 컨테이너 실행 및 Docker 허브 레지스트리에 대한 Explorer 통합
• Docker 허브 및 Azure 컨테이너 레지스트리에서 Azure App 서비스로 직접 이미지 배포

도커 파일 생성

편집

도커 명령

도커 보기

설정