VSCode 소개와 언어 별 기본 tasks.json 모음

초보자를 위한 VSCode 간략한 소개와

Python, Javascript, Ruby, Go 언어 별 기본 실행 tasks.json 예시 모음

 

 

 

 

1. 비주얼 스튜디오 코드 소개

 

Visual Studio Code

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

VSCode 현존 무료 IDE 중에서 최고가 아닐까 생각합니다. 

프로그램 언어에 따라 약간의 차이가 있겠지만 유료 IDE를 포함해도 거의 뒤지지 않을 거라고 개인적으로 생각합니다.

 

일단 가볍고, 빠르고, 디자인이 이쁩니다. (인스타용으로 훌륭합니다, 개발 모르는 사람앞에서 개발자 인척 하기 좋은.....)

뭐니 뭐니 (머니머니) 해도 무료이고,

MS 가 만든 것이라 그래도 조금은 신뢰가 됩니다. (그 반대일 수도 있습니다.)

 

 

믿을 만한 통계 자료를 보시겠습니다.

https://insights.stackoverflow.com/survey/2019#technology

 

Stack Overflow 2019년도 Survey 결과 중 가장 인기있는 IDE 결과 입니다.

Visual Studio Code 가 50.7% 1등 입니다.

2등인 Visual Studio 와도 거의 20% 차이가 날 정도로 꽤나 차이가 벌어져 있습니다.

거의 몇년간은 VSCode 의 독주가 되지 않을까 예상해 봅니다.

 

 

( 물론 스크립트 계열의 Javascript 나 Python 언어가 워낙 인기가 있어서,

그런 언어 개발 시 많이 사용되는 점 때문에 인기도가 높게 나올 수 밖에 없다고도 생각합니다.

Java 와 IntelliJ , Android 와 Android Studio 같은 찰떡 조합을 VSCode로 대체하기는 쉽지 않을 것 같습니다.)

 

 

여기서는 간략히 소개만 하고 넘어가겠습니다.

 

혹시 사용법이 궁금하시다면, 구글링 하시면 많은 자료가 있습니다.

VSCode 기본 사용법은 아래 링크를 참고하시면 도움이 될 것 같습니다.

https://demun.github.io/vscode-tutorial/

시작 - Visual Studio Code tutorial

 

 

이런 VSCode의 인기를 보듯 개발 하시는 많은 분들이 이미 VSCode 를 설치하고 사용하고 있을 거라 생각합니다.

 

 

 

 

2. VSCode 의 Task 설정 (언어별 tasks.json 예시)

 

 

제가 처음 설치 할 때를 되돌아 보면, 저는 tasks.json이 제일 귀찮았습니다.

VSCode 를 새로 설치하고 셋팅 하다 보면, 아마도 초보자에게 가장 귀찮은 부분일거라고 생각됩니다.

 

우리가 편집창을 통해 작성한 소스코드를 가지고,

실행을 시키고, 빌드를 하고, 테스트를 하려면 외부의 프로그램과 연동이 되어야 합니다.

이 때 이 외부 프로그램과의 연계를 Command line 을 통해 쉽게 도와 주는 역할을 하는 것이 Task 라고 보시면 됩니다.

 

디버깅 (F5) 이나 디버깅 없이 실행 (Ctrl + F5) 로 작성된 코드를 실행할 수도 있지만,

좀 더 편하게, 입맛에 맞게, 셋팅을 자동으로 처리하여 프로그램을 실행시켜 보려면

tasks.json 을 만들어서 실행하는 것이 편합니다.

 

 

Task 즉, tasks.json 만드는 법을 설명드리겠습니다.

 

여기서는 딱, tasks.json 언어별 기본 실행 예시만 다룹니다. 

각 프로그램 언어 별 상세한 tasks 셋팅은 별도로 찾아 보시기를 부탁드리겠습니다.

 

 

VSCode 를 실행한 상태에서 

F1 키를 누르면 command palette 창이 나옵니다. 그 곳에, tasks 라고 치면, 몇가지가 나오는데, 그중에

Tasks: Configure Task 를 고릅니다.

 

Command Palette 단축키

MAC : F1 이나  ⇧ + ⌘ + P

WIN : F1 이나 Shift + Ctrl + P

 

 

tasks.json 을 한번도 안만들었다면, 

 

 

새로 파일을 만들라고 나올 것입니다.

(이미 있다면, .vscode 폴더 하위에 tasks.json 을 더블클릭하여 바로 직접 수정하시면됩니다)

 

"Create tasks.json file from template" 클릭

 

 

그러면, 4가지 옵션이 나오는데, 그중에서 Others 를 고릅니다.

 

 

 

기본적인 tasks.json 이 만들어졌습니다.

 

 

이 파일을 아래에 있는 언어별 tasks.json 맞게 교체 하면 됩니다.

 

 

1. Python (3.x.x)

(Mac 이나 Linux 에서 python 기본이 2 이고, python3 이 별도로 있을 경우에는 commad 를 python3 로 변경)

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Python Run",
            "type": "shell",
            "command": "python",
            "args": [
                "${file}"
            ],
            "options": {
                "env": {
                    "PYTHONIOENCODING": "UTF-8"
                }
            },
            "group": {
                "kind": "build",
                "isDefault": true               
            }
        }
    ]
}

 

2. Javascript

  - node 설치 필요 -> https://nodejs.org/en/download/

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "JS Run",
            "type": "shell",
            "command": "node",
            "args": [
                "${file}"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

 

3. Ruby

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Ruby Run",
            "type": "shell",
            "command": "ruby",
            "args": [
                "${file}"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

 

4. Go 

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Go Run",
            "type": "shell",
            "command": "go run ${file}",            
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

 

5. C/C++ (잘 작성해주신 아래 webnautes님 블로그 글을 참고해주세요)

https://webnautes.tistory.com/1158

Visual Studio Code에서 C/C++ 프로그래밍( Windows / Ubuntu)

 

 

 

tasks.json 을 다 만드셨으면

각 언어 별 프로그램을 작성해 보신 후  (간단한 Hello World 를 만들어 보신 후)

 

 

[참고 : 언어별 Hello World 예제]

http://bit.ly/2VcHJ6M

 

 

 

해당 파일이 열려 있는 상태에서 

단축키 Ctrl + Shift + B  (⌘ + ⇧ + B) 를 눌러보시면 프로그램 실행결과를 확인 하실 수 있습니다.

 

 

언어별로 보시다 보면 언어별 차이라 봤자, 실행 커맨드 정도 일 것으로 거의 유사할 것입니다. 

 

간단히 설명하면

• label 은 해당 작업의 이름입니다. 
• type은 기본 shell 에서 돌아가므로 C/C++ 제외하면 shell 로 하시면 됩니다.
• command 는 실제 실행하기 위한 실행 명령입니다. 
• args는 기본 파일명을 주었습니다. ${file} 이 현재 열고 있는 파일입니다.
• group 은 kind 를 build 로 주었습니다. 
  실제 빌드가 아닌 기본 run 일 수도 있지만
  기본 단축키 Ctrl + Shift + B (build) 로 실행하기 위해 맞추기 위해 build로 고정했습니다.

 

 

상세하게 각 단계별로 tasks를 정교하게 만들려면 복잡합니다만..

어디까지나 초보자를 위해 VSCode 를 설치하고, 교재에 나오는 기본적인 코드를 실행하는 수준에서는

위의 tasks.json 정도면 무리 없을거라 판단됩니다.

 

 

 

혹시라도 본인이 직접 환경에 맞게 수정하시려면,

아래 링크를 참고하시기를 바랍니다.

 

 

VSCode Tasks 에 대한 전반적인 설명 : https://code.visualstudio.com/docs/editor/tasks#vscode

Tasks in Visual Studio Code

 

VSCode Tasks.json Appendix : https://code.visualstudio.com/docs/editor/tasks-appendix

Visual Studio Code Tasks Appendix