눈으로 개발하는 블로그

Visual Studio Code의 Status Bar(상태 표시줄)에 시계를 만들어 추가하겠습니다. 시계 Extension 개발 1. Visual Studio Code의 메뉴 Terminal(터미널)에서 yo code 명령어로 개발할 시계 Extension 정보를 입력하여 Node 프로젝트를 생성합니다. (yo code 명령어에 대한 자세한 설명은 https://carrotweb.tistory.com/277를 참고하시기 바랍니다.) PS C:\workspaces\webstudys\extension1> yo code _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `--..

기본 Extension 개발 1. Extension 개발을 위해 Terminal(터미널)에서 yo code 명령어를 입력하고 Enter 키를 누릅니다. yo code _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of extension do you want to create? (Use arrow keys) > New Extension (TypeScript)..

Yeoman과 VS Code Extension Generator 설치 1. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. Yeoman과 VS Code Extension Generator를 설치하기 위해 Terminal(터미널)에서 npm install -g yo generator-code 명령어를 입력하고 Enter 키를 누릅니다. npm install -g yo generator-code 설치가 진행됩니다. Extension 개발 1. Extension 개발을 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\extension1" 폴더를 ..

Visual Studio Code에서 Node.js 기반의 프로그램을 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다. 윈도우에 Node.js 다운로드 및 설치 윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다. (Node.js의 2023년 4월 12일 버전은 18.16.0 LTS입니다.) Node 패키지 생성 1. Node를 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\node1" 폴더를 생성하였습니다. 2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클..

Visual Studio Code에서 Web Project는 프로젝트가 아닌 파일 단위로 별도의 확장 기능 설치 없이 바로 작업을 할 수 있습니다. Web Project 생성 1. Web Project를 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\web1" 폴더를 생성하였습니다. 2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기) 를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\web1" 폴더로 이동하고 "폴더 선택" 버튼을 누릅니다. 또는 Activity Bar(작업 표시줄)에서 Extensions(학..

한국어 언어 팩(Korean Language Pack) 설치 1. Visual Studio Code의 왼쪽에 있는 Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭하거나 Ctrl + Shift + X를 누릅니다. 2. 한국어 언어 팩을 설치하기 위해 입력란에 "Korean Language"를 입력하여 검색합니다. 3. "Korean Language Pack for Visual Studio Code"를 선택하고 "Install"버튼을 클릭합니다. 4. 그러면 한국어 언어 팩이 설치됩니다. 그리고 하단에 언어 변경을 위한 "Change Language and Restart"버튼이 나타납니다. 5. "Change Language and Restart" 버튼을 클릭하면 Visual..

Visual Studio Code 다운로드 1. Visual Studio Code 사이트(https://code.visualstudio.com)에 접속합니다. 현재 최신버전은 1.78입니다. 2. 운영체계가 Windows인 경우 사이트 왼쪽 중간에 있는 "Download for Windows"를 클릭하면 Docs 페이지로 이동하고 설치 파일(VSCodeUserSetup-x64-1.78.2.exe)을 다운로드됩니다. 또는 사이트 오른쪽 상단에 있는 "Download"를 클릭하면 운영체제(OS, Operating System)에 맞게 다운로드할 수 있습니다. Visual Studio Code 설치 1. 웹 브라우저 하단에 있는 다운로드된 파일을 클릭하거나 다운로드 폴더에서 다운로드 "VSCodeUserSet..