WebStorm 사용하던 사람의 VsCode Extension + Setting 끝장 설정 (60가지 이상) (javascript + typesciprt + java) 세팅

이원찬·2024년 12월 2일
JavaScriptextensiontypescriptvscode

설정하기

목록 보기
2/2

“vscode 에 필수 확장 프로그램!” 등의 문구로 여러 영상이나 포스팅을 봤을 것이다…

하지만 여러개의 포스팅, 영상을 본 결과 나의 최적의 extension들 또는 setting 을 찾아냈고 그 설정을 공유하려 한다.

너무 편하니까 걍 쓰면 된다. 아래있을수록 희귀한 확장이 많다 ㅎㅎ 위에만 보지 말고 아래까지 읽어보길 바란다.

또한 이 포스팅은 실시간으로 업데이트 할 예정이다.

  1. Material Icon Theme

    https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

    자주보이는 vscode의 테마를 변경하는 확장이다.

    중요한 점은 explorer 창의 폴더 또는 파일의 아이콘 을 바꾸어 주어서 가독성이 좋아 많은 사람들이 애용한다.

    (하지만 나는 vscode-icons 아이콘 테마를 사용한다 ^^)

    https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

  2. Auto Close Tag

    https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

    태그를 자동으로 닫아주는 기가 막힌 확장이다.

    typescript에서 타입정의에 사용하는 닫는 ‘>’ 도 인식해서 태그를 닫아버리는게 짜증나긴하다;;

    많이 거슬리면 자동을 끄고 option + cmd + . 커맨드로 수동으로 태그를 닫을 수도있는데 커맨드를 이용하자.

  3. Auto Rename Tag

    https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

    여는 태그 닫는 태그를 하나만 수정해도 반대쪽을 알아서 수정해준다.

  4. Better Comments

    https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

    특정 아이콘과 함께 comment(주석)을 작성하면 색을 이쁘게 해주는 확장이다.

  5. Better Shell Syntax

    https://marketplace.visualstudio.com/items?itemName=jeff-hykin.better-shellscript-syntax

    쉘 스크립트를 감지하고 문법 하이라이팅을 해주는 확장이다.

    쉘 스크립트를 자주 작성한다면 사용해보자!

  6. Bookmarks

    https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

    말그대로 북마크 기능이 vscode에 추가된다.

    북마크 되어 있는 곳으로 빠른 이동이 가능해진다.

  7. Code Spell Checker

    https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

    영어사전에 없는 단어를 감지하여 하이라이팅 해준다.

    사전에 변수명 작성 또는 오타 발견에 좋다

  8. Color Highlight

    https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

    스크립트안 색상문자열을 감지하고 그에 맞는 색상으로 하이라이팅 해준다.

    프론트엔드 개발자라면 필수다.

  9. Color Info

    https://marketplace.visualstudio.com/items?itemName=bierner.color-info

    스크립트안 색상 문자열에 마우스를 올리면 해당 색상의 여러 정보가 나오며 다른 표현으로도 표기해준다.

    프론트엔드 개발자라면 필수다.

  10. Complete Statement

    https://marketplace.visualstudio.com/items?itemName=weakish.complete-statement

    JetBrain IDE 사용하다보면 굉장히 좋은 기능이 Complete Statement라는 기능이다.

    위 기능을 모방한 확장인데 Java 언어를 사용할때 꾀나 유용하다.

  11. CSS Peek

    https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

    html에 작성된 css 의 class , id 등의 내용을 컨트롤 클릭 또는 커맨드 클릭 하여 해당 css 파일로 네비게이션 할수 있다.

    프론트엔드 개발자라면 필수다.

  12. Cron Explained

    https://marketplace.visualstudio.com/items?itemName=tumido.cron-explained

    cron 표현식(스케쥴링 정규표현식) 이 헷갈린다면 필수!

    인라인으로 크론 표현식이 유효한식 확인하자!

  13. Dev Containers

    https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

    “가벼운 IDE!” : 우리가 vscode를 사용하는 이유가 아닐까 싶다.

    이 가벼움을 이용해 docker container 안의 폴더 또는 파일을 vscode로 열어서 편집할수있게 한다.

    이거랑 docker 만 있으면 가상 머신이 필요가 없다…

  14. DotENV

    https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

    dotenv 파일의 문법 하이라이팅 확장이다.

  15. Doxygen Documentation Generator

    https://marketplace.visualstudio.com/items?itemName=cschlosser.doxdocgen

    해당 확장을 이용하면 자동으로 주석 doc? 을 만들어준다.

    주석 doc은 ide에서 마우스 hover시 정보가 노출된다.

  16. Error Lens

    https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

    문법 에러를 화면에 띄워주는 필수 확장프로그램이다.

  17. Extension Pack for Java

    https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack

    java 개발에 필요한 거의 모든 확장을 제공한다.

    java 개발을 하고 싶다면 무조건 설치하도록 하자.

  18. ESLint

    https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

    eslint를 실시간으로 vscode 서버가 돌려준다!

    해당 확장을 설치하면 errorlens에 의해 린팅에 걸리는 경고 또는 에러가 화면에 나온다.

  19. 작은 꿀팁

    eslintrc 또는 eslint.config 파일이 잘못 변경되었을때 linting에 화면에 잘 보이지 않을때가 있다.

    이럴때는 bottom panel 에 있는 output 을 열고

    eslint 를 눌러서 확인해보자

    위 처럼 server is running 이 뜨고 있다면 잘 되는 것이지만

    config 파일이 잘못되어있다면 아래와 같이 나온다.

    잘못된 이유를 알려주며 linting이 중지되며 ide에 eslint설정대로 나오지 않는다.

    이럴때는 eslint 설정파일을 올바르게 수정하고

    명령 팔렛트를 열어 (컨트롤 + 쉬프트 + P 또는 커맨드 + 쉬프트 + P)

    ESlint Restart ESlint Server를 눌러 실행한다.

    그럼 eslint 설정대로 IDE 화면에 linting에 뜬다!

  20. Git History

    https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

    git 을 이용한 변경기록을 GUI로 볼수있게 하는 확장

    좋은 점은 해당 커밋의 파일내용을 checkout 또는 switch 없이 볼수 있다는 접이다

  21. Git Project Manager

    https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

    git project를 찾아 주는 확장이다.

    보통 recent project를 이용해 프로젝트를 여는 사람이 많을텐데

    위 확장을 이용하면 git repository 가 아닌 폴더는 걸러진다.

    공식문서를 잘 읽고 base folder를 설정하자^^

  22. GitHub Pull Requests

    PR내용을 vscode로 보거나 편집할수 있게 한다.

    Comment, approve, Request Change 까지 거의 모든 걸 다 할수 있다고 생각하면 된다.

    다양한 vscode 기능과 함께 PR을 보고 approve 하자!

  23. GitLens

    https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

    vscode의 깃 GUI 끝장판 확장이다.

    부분 유료이지만 무료인 부분으로도 충분히 매력적인 확장이다.

    아래는 내가 자주 사용하는 gitlens 기능이다.

    • git graph GUI 로 보기
    • inline 에서 해당 line 의 최근 변경 커밋 보기
    • GUI 로 rebase 하기 (interective)

  24. Gitmoji

    https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode

    git commit 작성시 해당 확장을 이용해 커밋 메시지의 기본 골격을 맞출수 있다.

    다수인원과 프로젝트를 진행한다면 직접 템플릿을 작성해 커밋 메시지를 규격화 해보자

  25. HeadWind

    https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

    tailwindcss class의 정렬기능이 있다.

    이걸로 순서를 강제하는것도 협업에 좋은 방법이 될것 같다!!

  26. Image Preview

    https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

    사진 path를 읽어 inline 옆에 조그마하게 사진을 띄워주는 확장이다.

    단점은 typescript 의 alias path 사진을 못 띄우는것 같았다.

    프론트엔드 개발자라면 필수다.

  27. Import Cost

    https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

    import 한 모듈의 크기를 inline으로 띄워준다.

    번들링 사이즈 또는 지연 import 등을 중요하게 생각한다면 좋을지도?

  28. indent-rainbow

    https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

    들여쓰기의 색을 주어 코드의 가독성을 높혀주는 확장이다.

  29. Inline SQL

    https://marketplace.visualstudio.com/items?itemName=qufiwefefwoyn.inline-sql-syntax

    SQL 문의 문법 하이라이팅 및 자동완성을 도와준다.

    벡엔드 개발자라면 필수다.

  30. IP Address

    https://marketplace.visualstudio.com/items?itemName=Compulim.vscode-ipaddress

    본인의 ip 주소를 알려준다.

    네트워크 주소 private 주소 mac 주소 등 다양하게 알려주니 본인의 프로젝트를 네트워크 주소를 통해 보여주고 싶다면 사용해보자

  31. Javascript Auto Backticks

    https://marketplace.visualstudio.com/items?itemName=chamboug.js-auto-backticks

    문자열에서 ‘${’ 를 감지하면 벡틱 문자열로 자동으로 변경해준다.

    정말 편리한 기능

  32. JS Quick Console

    https://marketplace.visualstudio.com/items?itemName=AhadCove.js-quick-console

    단축키를 이용해 console.log를 빠를게 입력해주는 확장이다.

    Intelij 의 ‘soutv’ 라이브 템플릿과 똑같다고 생각하면 된다.

    단점은 단축키 입력시 바로 아래에 입력되는데 코드의 문법을 생각안하고 바로 아래에 삽입되어 코드를 망친다…

  33. JSON to TS

    https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts

    클립보드에 복사된 json 을 typescript 의 interface로 변환해준다.

    swagger의 스펙을 타입정의할때 유용하다.

  34. Live Server

    https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

    live server 구동시 해당 workspace를 웹으로 탐색가능케 하는 로컬 서버가 열린다.

  35. Markdown All in One

    https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

    markdown 을 vscode로 작성하는 경우가 많은데 해당 확장으로 거의 notion과 같은 편리함을 얻을수 있다.

    특히 목차(table of contents) 를 자동으로 감지하고 스스로 업데이트 해주는 기능이 쓸만하다.

  36. Markdown Preview Enhanced

    https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

    마크다운 preview 를 해주는 확장

  37. markdownlint

    https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

    markdown에서 eslint 처럼 린팅을 추가 할수 있게 하는 확장

  38. matchit

    https://marketplace.visualstudio.com/items?itemName=redguardtoo.matchit

    단축키로 커서의 위치를 반대 태그 또는 반대 괄호로 이동해주는 확장

    vscode 에 기능이 내장되어있지만 원하는데로 동작하지 않아 찾은 확장이다…

    확장없이 해보고 확장으로도 해보길 바란다.

  39. SQL Server (mssql)

    https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql

    SQL 파일 작성시 연결되어있는 connection 정보로 자동완성을 해준다.

    벡엔드 개발자라면 필수다.

  40. node-readme

    https://marketplace.visualstudio.com/items?itemName=bengreenier.vscode-node-readme

    npm 패키지의 readme 파일을 vscode 상에서 보여주는 확장이다.

    readme 에 정보가 적혀있는 패키지들이 많이 때문에 위 확장을 이용해 빠른 개발이 가능해 진다.

  41. Path Intellisense

    https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

    스크립트안 path을 읽어 path의 자동완성을 도와준다.

    개발자 필수 확장이다.

  42. Polacode

    https://marketplace.visualstudio.com/items?itemName=pnp.polacode

    포스팅에 코드복붙시 코드 하이라이팅이 지워지는 문제를 해결할 확장으로

    선택한 부분의 코드를 찰칵 찍어준다.

  43. Prettier

    https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

    prettier 포맷터를 이용할수 있게 하는 확장

    설치한뒤 꼭 default 포맷터를 prettier로 설정하자 (이거 모르고 보통 다들 확장깔고 vscode 내장 포맷터 사용함 )

  44. Pretty TypeScript Errors

    https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

    typescript error를 좀 이쁘게 보여주는 확장이다.

  45. Regex Previewer

    https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

    정규식이 잘먹히는지 예제를 보여주고 정규식에 해당하는 문자열을 하이라이팅 해주는 확장

    정규표현식을 매일 까먹는사람이라면 필수!

  46. Remote - SSH

    https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

    ssh 로 접속한 컴퓨터를 vscode로 여는 무친 기능

    vscode만 있다면 다른 ssh 툴은 필요가없다….

    하지만 cpu, rem을 생각보다 많이 잡아먹는다…

    aws 프리티어는 위 확장으로 접속시 메모리가 터진다… (스왑메모리로 메모리 확장하면된다.)

  47. Stylelint

    https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

    css 파일을 린팅해주는 확장

  48. Spring Boot Extension Pack

    https://marketplace.visualstudio.com/items?itemName=vmware.vscode-boot-dev-pack

    spring 개발에 필요한 확장 (4가지) 를 한번에 설치가능한 확장팩이다.

    spring 개발하려면 필수라 생각한다.

  49. shell-format

    https://marketplace.visualstudio.com/items?itemName=foxundermoon.shell-format

    다양한 스크립트들을 포맷 해주는 확장

    쉘 스크립트도 정렬이 되기에 좋다

  50. shellckeck

    https://marketplace.visualstudio.com/items?itemName=timonwong.shellcheck

    쉘 스크립트의 린팅을 해주는 확장이다.

    쉘스크립트를 명시해야 린팅이 작동한다 (”#!/bin/sh” 같은거..)

  51. Thunder Client

    https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

    API 콜을 GUI 로 해볼수 있는 확장이다.

    개인적으로 postman 보다 사용감이 좋았다.

  52. Todo Tree

    https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

    특정 키워드와 함께 주석 작성시 하이라이팅과 함께

    workspace에서 주석들을 관리 할수있다.

    유용하다해서 설치하긴 했는데 나는 아직 잘 사용하지 않는다.

  53. Trailing Spaces

    https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

    line 끝에 남는 띄어쓰기를 하이라이팅해준다.

    코드포맷팅을 하면 없어지겠지만 포맷팅이 안되는 확장 파일이라면 유용 할 것이다.

  54. TS/JS postfix completion

    https://marketplace.visualstudio.com/items?itemName=ipatalas.vscode-postfix-ts

    jetbrain ide의 강력한 기능중 하나인 postfix 기능과 비슷하게 작동하는 확장이다

    jetBrain ide를 사용하다 vscode로 넘어온 사람이기에 postfix 기능이 없어 한탄했지만

    결국에 확장을 이용해 불편함을 해결했다!

    postfix 정말 편하다!!! (머리에 생각하는 로직으로 코드를 작성할수있게 해줌!)

  55. Version Lens

    https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

    npm 패키지들을 확인하는 package.json 파일에서 파일들의 버전을 GUI로 확인 가능하다.

    또한 특정 패키지의 버전을 마우스 클릭으로 업그레이드 또는 다운그레이드 가능하다.

    node 개발자라면 필수다.

  56. Discord Presence

    https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode

    discord를 항상켜두고 개발하시는 분들중

    vscode 를 실행중이면 이렇게 활성화 시키는 확장이다

  57. vscode-color-picker

    https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker

    vscode 내장 기능으로 color picker가 존재하긴한다.

    하지만 위 확장으로 파일 내에서 마우스 클릭만으로 색상의 변경이 가능해진다.

    jsx, tsx 등에서 사용하고 싶다면 setting.json 에 아래 설정을 추가해야한다.

    "vscode-color-picker.languages": [
  "python",
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact",
  "html",
  "css",
  "json",
  "yaml",
  "markdown"
],

  58. Guide Barcket Pairs : active 설정

    매칭되는 괄호가 같은 색으로 칠해져있는건 vscode 기본 세팅이다.

    하지만 아래와 같이 괄호로 묶인 블럭을 라인으로 표기하고 싶다면 아래와같이 설정한다.

  59. inlay hint: true

    코드내 parameter 의 이름, 변수의 타입, return 타입등을 조그마하게 보여주는 기능이다!

    정말 강추 세팅이다!

    위 설정만으로는 javascript, typescript에서 활성화 할수 없으며 language support에서 따로 활성화 해줘야한다.

  60. terminal 여는 단축키에 ₩ 조합도 넣어두기

    한글 일때 ctrl + ~ 으로 터미널이 열리지 않는다…

    한글일때 다른 키로 인식하기 때문인데 위와같이 넣어주면 한글일때도 터미널이 잘 열린다!

  61. Go to Next Change, Show Next Change 설정하기

    이전 커밋과 달라진 부분으로 커서를 이동하는 커맨드!

  62. Jetbrains Mono 폰트 설정

    https://www.jetbrains.com/ko-kr/lp/mono/

    오픈 소스인 Jetbrain 에서 배포하는 폰트를 적용하자

    다른 폰트와는 다르게 코딩 특화된 폰트로 괄호의 여백, 특정 문자의 여백, 길이, 너비 등을 고안해 만든 폰트이다.

    vscode에 폰트를 적용하는 방법은 찾으면 많으므로 넘어간다.

  63. Java 포맷터 설정

    https://github.com/redhat-developer/vscode-java/wiki/Formatter-settings

    java 포맷터가 red hat으로 설정되었다고 끝이아니다.

    포맷팅만 믿고 코딩 하다간 가독성이 떨어져 협업하기도 힘들것이다 ( 다른 ide와 충돌 일어 날수도 있음 )

    특히 어지러웠던건 메소드 체이닝 코드에 줄바꿈을 넣어도 format시 줄바꿈이 사라진다는 것이었는데

    아래 설정을 vscode setting.json 에 추가한다면 익숙지 않던 formatting 설정을 Intellij 와 비슷한 느낌으로 바꿀 수 있다. (고마워요 구글)

    // setting.json
{
	...
	"java.format.settings.profile": "GoogleStyle",
	...
}
profile
이원찬
소통과 기록이 무기(Weapon)인 개발자
이전 포스트

[Prettier] Prettier Webstorm 에 적용하기

0개의 댓글