Node.js- VS Code 필수 확장프로그램 / 익스텐션(Extensions) 모음 / 확장팩

업뎃, 240710

 

 

1. HTML, JS코드 브라우저 실행 -  Live server

 

 

2. VSCode에서 JS실행

 

 

3. JS 문법체크

 

 

4.  임포트를 자동으로

 

5. 세미콜론 자동 입력

• shift + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 커서를 코드 끝으로 이동시킨다.
• alt + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 다음줄로 점프한다.
• ctrl + alt + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 커서를 가만히 유지한다.

 

 

6. 태그 짝궁끼리 한번에 수정할 수 있게

 

 

7. 아이콘을 이쁘게~ 이렇게 하면 기분이 좋크든요👍

 

 

8.  브라켓을 더 눈에 띄게 컬러풀하게

 

 

9. 태그 짝궁끼리 같은색으로 더 눈에 띄게

 

 

 

10. rgb나 16진수로 색상을 입히면서 바로 배경색으로 컬러 확인

 

 

11.  이미지를 코드단에서 미리볼 수 있다

 

 

 

12. 코드 자동 출력 Quokka.js

 

 

무료버전은 Quokka 용 파일을 생성 해야함.  저장안됨. 
Ctrl + Shift + P 로 검색창을 열어  Quokka.js  를 검색 후 원하는 타입의 파일 클릭

 

내가 작성하고 있는 JS 파일에서 사용하려면 PRO 버전 따로 구매해야함.

pro버전은 파일 생성 없이 기존 파일에서도 실행 가능.

 

 

13. Todo Tree - 할일리스트

간단히 메모를 할수도 있고 커스텀으로 문구를 수정해 메모가능하다

• 커스텀 방법
  • settings > Todo-tree > General: Tags

  • 

• 색상 커스텀
  • setting.json >   
  • 예시로 내 셋팅 코드를 올려놨다. 한글도 가능하다.
  • icon모양은 여기서 찾으면 된다  👉   https://primer.style/foundations/icons

"todo-tree.highlights.customHighlight": {
    // https://primer.style/foundations/icons
    "CHECK": {
      "background": "#20a904",
      "foreground": "#ffffff",
      "gutterIcon": true,
      // "icon": "check-circle-fill",
      "icon": "check",
      "iconColour": "#20a904",
      "type": "text"
    },
    "IDEA": {
      "background": "#ffee07",
      "foreground": "#3f2503",
      "gutterIcon": true,
      "icon": "sun",
      "iconColour": "#ffee07",
      "type": "text"
    },
    "오류)": {
      "background": "#e88fb9",
      "foreground": "#050505",
      "gutterIcon": true,
      "icon": "star-fill",
      "iconColour": "#e88fb9",
      "type": "text"
    }
}

 

 

 

14. htmltagwrap - 블록으로 묶어 태그만들기

 

사용방법은 간단하다 원하는 곳을 드래그 한뒤 alt + w 단축키를 누르면 된다.

• 공식 설명방법
  • To use, select one or many chunks of code and press "Alt + W" ("Option + W" for Mac).
  

 

 

 

 

 

 

 

참고

• VS Code 필수 익스텐션(Extensions) - javascript 개발자 (tistory.com)
• https://inpa.tistory.com/entry/VS-Code-💽-Colonize-익스텐션-세미콜론-자동화 [Inpa Dev 👨‍💻:티스토리]
• quokkajs홈페이지 -  https://quokkajs.com
• 블로그 - https://willnfate.tistory.com/entry/VScode-%EC%BD%94%EB%93%9C-%EC%9E%90%EB%8F%99-%EC%B6%9C%EB%A0%A5-Quokka

그리고 나