9/14/2022

VS Code Extension

1. VS Code Extension 

이전에 VS Code 와 관련해서 사용했던 것들을 아래와 같이 링크 

  • VS Code 기본사용 및 Extension 추천 
이전에 설치하여 주로 사용하던 걸로 Remote Development 관련설명 

  • VS Code Extension 저장장소 (본인계정에 저장)
C:\Users\jhlee\.vscode\extensions 저장되어짐 
** 만약 설치시 문제 생기면 상위부분에 가서 각 extensions 직접 삭제

각각의 VS Code extensions program들이 존재 및 설정값도 직접확인 가능 


1.1 VS Code Extension Tools

VS Code Extension 이 2020 과 2022년 비교를 하면 많이 달라졌으며, 현재 내가 주로 사용하고있는 Extension List들을 표시한다. 
그리고, VS Code Extension Program이 계속 Update 되고 사용법도 매번 조금씩 변경되므로, 각 세부사항은 Manaul을 반드시 참조 

  • VS Code Extension- Remote Package 필수사용  
MS사에서 제공하는 Remote Package로 요즘 한꺼번에 다 설치를 해줌(이전과 다름)

  • VS Code Extension- Markdown 관련사항 
Markdown 쉽게 작성하기 위해서 사용 

  • VS Code Extension- Hex File 볼 경우 

  • VS Code Extension- Git 관련사항 

  • VS Code Extension- Cmake 관련사항 
흐음 필요사항을 아직 모름

  • VS Code Extension- C/C++ 관련사항 
C/C++ 관련것으로 소스 분석용 설치 


1.2 VS Code Extension Tools for Comments

주석(Comments)에 관련부분들은 따로 분류하여 링크를 한다. 

Better Comments
가장 많이 사용되어지는 Tool로 현재 나는 Disable 
간단한 사용법은 아래이며, 실제 사이트에서 가서 Update가 되므로 상위에서 확인  

Doxygen Documentation Generator
Doxygen 과 Comment를 쉽게 생성하는방법 
소스위치에서 ( /** 만 입력한 후 엔터 ) 입력하며, Function 위/ File 맨위 각 다르게 생성 

Auto Comment Blocks
주석을 자동으로 Blocking 관리 ( /** or /*!  입력한 후 엔터) 입력 
상위를 이용하면 불필요

TODO Highlight
주석(Comment) 에 TODO/FIXME 쉽게 파악 

이외 Google Translate를 이용하여 주석 자동으로 번역해주는 기능을 비롯하여 다양하다.

1.3 VS Code Extension ESP-IDF

  • VS Code Extension (ESP-IDF 설치)
ESP-IDF 설치 
이전과 변경되어있으며, 쉽게 IDF를 설치를 진행한다.

최근꺼는 MS 의 Email 기반으로도 VS Code Extesion을 Sync를 맞출수 있는 것으로 보여진다.

Espressif IDF VS Code Extension (Node.js 소스)

VS Code Extension 설치위치 
  C:\Users\jhlee\.vscode\extensions


2. VS Code Extension 사용법


이전에 내가 작성한 VS Code Extension Tools 사용법들을 아래에 링크 


2.1 VS Code Remote Package 

VS Code에서 Remote에 있는 Linux Server or WSL를 연결하여 사용하는 법 

VS Code 에서 Remote X11 연결방법 
현재 필요 WSL을 사용하면 필요가 없어보이며, 외부에서 사용할 경우에만 필요 

VS Code 에서 WSL 설치 후 Remote 진행 


2.2 VS Code Git 사용 

VS Code는 기본적으로 Git Package가 없으므로 반드시 먼저 Git을 먼저 설치 한후 사용진행 
세부내용은 아래링크 확인 
 
VS Code에서 Git 사용법 

VS Code VersionControl 


2.3 VS Code JTAG 설정 및 Debug

이 부분은 매번 조금씩 변경되어왔으므로, 만약 더 최신버전을 사용한다면, 반드시 Manaul 참조


ESP32의 OpenOCD 관련설정 (거의 유사하지만 쉽게 설정가능)

  • launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "ESP32 Debugger",
            "type": "espidf", 
            "request": "launch",
            "gdbinitFile":"${workspaceFolder}/.vscode/gdbinit",    
                    
        }
    ]
}  

상위와 같이 ${workspaceFolder} 변수 이용 

  • settings.json 
{
// ESP-IDF 기반으로 개인적으로 생성하여,설정한 설정값들 (불편한것은, 직접 Setting.json에서 변경해야함)     
    "idf.RS485Port": "COM8",     
    "idf.RS485Baudrate": "921600",  
    "idf.RS485ResponseTimeout": "0.100", //0.050 -> 0.100
    "idf.RS485MaxUnit": "5",       
    "idf.RS485TimerInterval": "1", 
    "idf.RS485TesTimeHour": "10",      
    
//ESP-IDF 설치 후 환경설정 값들 (VS Code의 아래 버튼으로 변경가능)     
    "idf.adapterTargetName": "esp32",  
    "idf.flashType": "UART",
    "idf.portWin": "COM3",                  
    "idf.svdFilePath": "${workspaceFolder}/esp32.svd",  //OpenOCD를 위해서 Register Map을 보기 위한 도구 https://github.com/espressif/svd
    "idf.openOcdConfigs": [                             //OpenOCD의 설정 이부분이 이해가 안된다면, OpenOCD를 참조 
        "interface/ftdi/esp32_devkitj_v1.cfg",
        "target/esp32.cfg"
    ]
} 

상위 설정된 값은 tasks.json의 command에서 사용가능하며, template으로 숨겨진 설정값도 존재한다. 

VS Code에 Espressif IDF 포함된 Template 으로 좀 더 다양하게 확인가능 
Command가 Window/Linux 지원해야하므로, 두개로 분리 운영 

상위 소스는 C:\Users\jhlee\.vscode\extensions\espressif.esp-idf-extension-xxxx\\templates\.vscode 존재하며, 나의 경우 직접 수정해서 사용함 

  • gdbinit
target remote :3333
set remote hardware-watchpoint-limit 2
symbol-file ./build/xxxxx.elf
mon reset halt
flushregs
thb app_main
c

2.4 VS Code Task 설정 및 사용법  

각 Project 마다 본인의 Task를 만들어서 TEST Program들을 쉽게 설치하고, Chainging도 가능하므로, 각 자동화도 가능하다. 

우선 내부적으로 사용되어지는 환경변수 및 VS Coe Extesion Tools 내부에서만 사용하는 환경변수들을 알아 두면 좋다. 
또한 dependson을 이용하여 다른 Task 와 Chaining도 가능하다. 

  • tasks.json (Window용)
아래와 같이 자동화 및 Window에서도 Powershell을 이용하여 다양하게 확장가능하다.
만약 Linux/Window 같이 사용하고 자하면 command 위에 별도의 window용을 별도로 설정
{
// See task.json Manual in VSCode
// for the documentation about the tasks.json format
// 아래의 예제들은 내가 간단하게 사용하는 예제 중 일부를 가져온 것이며, 나의 경우, TEST Task가 너무 많아 이를 Chain해서 사용한다. 

    "version": "2.0.0",
    "tasks": [
        {
            "label": "IP Config",
            "type": "shell",
            "command": "ipconfig"
        }, 
// 기본 실행되는 위치가 workspaceFoder가 아닐 경우, 
//다음과 같이 Command를 연속해서 실행가능하며,아래와 같이 ; 세미콜론을 사용하자 (PowerShell Script는 관련 Manaul 참조하도록)   
        {
            "label": "TEST Release",
            "type": "shell",
            "command": "cd ${workspaceFolder}/release; ./makeFirmware.ps1"
        },          
        {
            "label": "ESP-IDF Erase ALL",
            "type": "shell",
            "command": "${userHome}/.espressif/python_env/idf4.2_py3.8_env/Scripts/python.exe ${userHome}/esp/esp-idf/components/esptool_py/esptool/esptool.py -p ${config:idf.portWin}  -b 460800 --before default_reset --after hard_reset --chip ${config:idf.adapterTargetName} erase_flash"
        },       
//아래와 같이 dependson을 사용하여 각 Command의 Label로 적어 Macro로 형식으로, Chain하여 사용하자
//아래처럼 실행하하면, TEST Release -> ESP-IDF Erase ALL -> ESP-IDF WRITE ALL        
        {
            "label": "ESP-IDF WRITE ALL",
            "type": "shell",
            "command": "${config:idf.pythonBinPathWin} ${userHome}/esp/esp-idf/components/esptool_py/esptool/esptool.py -p ${config:idf.portWin} -b 460800 --before default_reset --after hard_reset --chip ${config:idf.adapterTargetName} write_flash --flash_mode dio --flash_freq 80m --flash_size detect 0x070000 ${workspaceFolder}/release/firmware/mxx610-app.bin 0x1000 ${workspaceFolder}/release/firmware/bootloader.bin 0x10000 ${workspaceFolder}/release/firmware/partition-table.bin 0x15000 ${workspaceFolder}/release/firmware/ota_data_initial.bin 0x17000 ${workspaceFolder}/release/firmware/phy_init_data.bin 0x39000 ${workspaceFolder}/release/firmware/storage_data.bin",       
            "dependsOrder": "sequence",
            "dependsOn": ["TEST Release", "ESP-IDF Erase ALL", "ESP-IDF WRITE ALL"]
        
        },
//아래의 경우, 상위 내가 정의한 변수를 이용하여 각각 Python TEST Program을 Jenkins 처럼 사용하고 있다. 
        {
            "label": "TEST MODBUS-CHK-EventGR",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe ${workspaceFolder}/main/module/modbus/modbus_test_check_rspevent_general.py -p ${config:idf.RS485Port} -b ${config:idf.RS485Baudrate}  "
        },
        {
            "label": "TEST MODBUS-CHK-EventBT",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe ${workspaceFolder}/main/module/modbus/modbus_test_check_rspevent_burst.py -p ${config:idf.RS485Port} -b ${config:idf.RS485Baudrate}  -r ${config:idf.RS485ResponseTimeout}  -u ${config:idf.RS485MaxUnit}  -i ${config:idf.RS485TimerInterval} -t ${config:idf.RS485TesTimeHour}  "
        },
        {
            "label": "TEST MODBUS-CHK-SystemInfo",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe ${workspaceFolder}/main/module/modbus/modbus_test_check_systeminfo.py -p ${config:idf.RS485Port} -b ${config:idf.RS485Baudrate}  -r ${config:idf.RS485ResponseTimeout}  -u ${config:idf.RS485MaxUnit}  -i ${config:idf.RS485TimerInterval} -t ${config:idf.RS485TesTimeHour}  "
        },
        
//나의 경우는 다양하게 최대한 편한게 사용하도록 하고 있으며, Jenkins가 없이 쉽게 Task로 모든 TEST 가 가능하다 
        {
            "label": "TEST MQTT ONLY Subscribe",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe ${workspaceFolder}/main/module/mqtt/mqtt_only_subscribe.py"
        },
        {
            "label": "TEST MQTT General Publish",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe ${workspaceFolder}/main/module/mqtt/mqtt_publish_general.py"
        },
        {
            "label": "TEST MQTT RSPSetup Publish",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe ${workspaceFolder}/main/module/mqtt/mqtt_publish_rspsetup.py"
        },    
        
//다만 현재 Window인데, Embedded Python으로 설치해서 사용해야 다른 이에게 동일한 환경을 전해줄 수 있으므로, 추천         
// Linux에서도 VS Code가 사용가능한데, 좀 더 화려하게 사용가능하다. (grep.xargs,sed/awk 비롯하여 tee 등)  Python venv 기반으로 추천  
// EPS-IDF는 Window or Linux 이건 Python은 venv되어있지만, Window에서는 좀 venv를 사용하기가 좀 귀찮다. (export.ps1) 
        {
            "label": "TEST Python List",
            "type": "shell",
            "command": "& D:/Tools/python/python-3.7.5-embed-amd64/python.exe -m pip list  "
        },      
        
// 아래와 같이 Powershell에서 Linux의 Pipe를 비롯하여 간단한 명령어 비롯하여, tee 역시 지원가능하다, 
// Powershell이 매번 Upgrade 될때마다, 매번 Linux Command를 좀 더 다양하게 지원해주는 것 같다.              
        {
            "label": "TEST Shell",
            "type": "shell",
            "command": "echo Hellow | tee ${workspaceFolder}/test.log  "
        }           
     ]
}

모든예제를 기록할 수 없지만, 아래의 predefined 변수(variable)을 비롯하여, Powershell 변수(variable) 이외 외부 설정된 변수 (variable)가능 
더불어 조금 더 고급스럽게 사용하고자 한다면, Node.js는 필수인것 같다. 
이 부분은 추후 다시 사용하도록 하자 

참고로 VS Code도 계속 업그레이드 중이며, Task 내부 Command도 업그레이드 되면서 새로 추가된 것이니, 추후에도 계속 VS Code Manual는 봐야한다.
앞으로 계속 추가되어 변경되어질테니 ㅋㅋㅋ (나중에 Jenkins 없이 자동화로 해도 되겠다)

  • 상위 Tasks.json 과 launch.json 에 사용되어지는 내부환경변수(predefined)
  1. ${workspaceFolder}  : Project PATH
  2. ${userHome} : User Home PATH
VS Code에서 predefined-variables 내부변수로 반드시 확인 
각 값들은 기본으로 알아두도록하자 

  • Tasks.Json 세부 구성방법 
세부사항은 VS Code도 항상 업데이트 되므로 아래 사이트에서 사용방법과 구조를 확인
매번 VS Code가 업데이트 될때 마다 조금씩 변경됨 (Node.js도 지원됨) 
  1. version
  2. configurations
  3. tasks
  4. inputs

  • PowerShell 변수 사용법 
PowerShell에서 사용하는 변수를 동일하게 사용가능 

  • Tasks.json에서 외부 설정된 변수값 (settings.json) 사용법 
VS Extension에 이미 설정되어진것의 값 or settings.json 에서도 변수 값 가져와 tasks.json에서 사용가능하다.

예를들면 VS Code의 extension인 ESP-IDF를 설치하면, 아래에서 각 값들을 찾을수 있다. 
or VS Code의 각 Extension manual을 보면 각 값의 용도 설명을 알려준다. 

ESP-IDF 의 vscode-esp-idf-extension Github
설사 상위 Manual이 없다고 해도 .vscode/extensions/xxxxx 관련부분을 본인이 직접 분석하면된다. 

외부의 환경변수 값을 사용할 경우, 
아래와 같이 ${config:xxxxx} 로 형태로 사용하면된다.  
  1. ${config:idf.portWin} : 현재 settings.json 설정된 Port
  2. ${config:idf.adapterTargetName}: 현재 settings.json 설정된 Target
  3. ${config:idf.pythonBinPathWin} : ESP-IDF Python PATH

ESP-IDF ${config:xxxxx} 의 다양한 예제 
VS Extension에는 이미 숨겨진 환경값도 많으니, 관련사항을  찾아 보도록 하자
더불어 Task도 depends on을 이용하여 Chaining도 가능  


  • Tasks.json에서 Command들 간의 종속연결(depends) 
Tasks.json에서 Command를 많이 만들 경우, 한꺼번에 연속으로 실행하여, 자동화를 하고 싶을 경우가 많을 것이다.  
이 때 사용하는게 dependsOrder dependson 이며 이를 이용하여 쉽게 각 Command들을 종속연결하여 실행가능하다  
상위와 같이 간단히 자동화를 할수 있다. 

  • VSCode JSON 기본사용법 
JSON의 기본문법으로 어떻게 사용하는지 확인 



3. VS Code Tips Update 

주로 사용하는 것이 멀티커서 에디팅이며 다른 Tips들도 알아두도록하자. 

VS Code의 사용 Tips 관련사항 

VS Code Multi Cursor
좌측으로 이동정렬: Shift+Tab
우측으로 이동정렬: Tab



VS Code Markdown View

VS code Search / Modify (Regular Expression)

VS Code에서 diff 기능