눈으로 개발하는 블로그

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...(폴더 열기)를 클..

라이브 서버(Live Server) 설치 1. Visual Studio Code의 왼쪽에 있는 Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭하거나 Ctrl + Shift + X를 누릅니다. 2. 라이브 서버를 설치하기 위해 입력란에 "Live Server"를 입력하여 검색합니다. 검색된 결과 리스트에서 "Live Server"를 선택하고 "Install"버튼을 클릭합니다. 3. 설치하는데 조금 시간이 걸립니다. (저는 약 50초 걸렸습니다.) 설치가 완료됩니다. 4. Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭하여 닫습니다. 라이브 서버(Live Server) 실행 1. Visual Studio Code의 왼쪽에 있는 Activity ..

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(학..

색 테마(Color Theme) 변경 1. Visual Studio Code의 메뉴 File(파일) > Preferences(기본 설정) > Theme(테마) > Color Theme(색 테마)를 클릭하거나 Ctrl 키를 누를 상태에서 K, T를 이어서 누릅니다. (Ctrl + K, Ctrl + T) 2. 색 테마를 선택할 수 있는 Picker가 나타납니다. (현재 색 테마가 선택되어 있습니다.) 3. 키보드의 상/하 방향 버튼을 누르면 색 테마가 이동하면서 변경됩니다. 이동한 색 테마에서 Enter 키를 누르면 적용됩니다. 또는 마우스를 색 테마를 선택하면 바로 변경됩니다. [색 테마 종류] 라이트 - Light (Visual Studio), Light Modern, Light+, Quiet Light..

한국어 언어 팩(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..