joyfuI의 잡동사니 블로그

현재 사용 중인 확장 목록. 이것저것 관심만 많다 보니 확장도 많아졌다...

Korean Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko

설명이 필요 없는 무조건 1순위 설치 확장!

공통

Bookmarks

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

코드의 특정 라인을 북마크에 추가해 두고 원할 때 바로바로 이동할 수 있는 확장이다. Bookmarks 명령어를 찾아서 사용해도 되고 우클릭 메뉴에 있는 Bookmarks를 사용해도 된다. 이렇게 추가한 북마크는 좌측 Bookmarks 사이드바에서 확인할 수 있다.

Bracket Select

https://marketplace.visualstudio.com/items?itemName=jhasse.bracket-select2

Alt+A를 누르면 괄호((), {}, [], "", '', ``) 안을 선택해 준다. 더 바깥쪽까지 선택하고 싶으면 단축키를 한 번 더 누르면 된다. 이거 대박 편함ㅎㅎ

기본적으로 괄호 안쪽을 선택하는데 괄호까지 선택하고 싶으면 Ctrl+Alt+A

DotENV

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

.env 파일에 대한 구문 강조 추가. 공식(?) 확장도 있는데 그건 필요없는 다른 기능들이 달려있어서 오직 구문 강조만 있는 확장을 찾았다.

EditorConfig for VS Code

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

다른 에디터에서도 동일한 코딩 스타일을 유지하도록 도와주는 EditorConfig의 공식 확장이다.

처음엔 상당히 흥미로운 프로젝트였는데 아직까지 지원하는 설정이 적어서 아쉽다. 물론 다양한 에디터를 지원해야 하기 때문이겠지만...

file-size

https://marketplace.visualstudio.com/items?itemName=zh9528.file-size

상태 표시줄에 현재 파일의 용량을 표시하는 간단한 확장이다.

GitHub Copilot

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

그 유명한 AI 기반 코드 자동완성 툴인 코파일럿 확장이다. 원래 깃허브에서 코파일럿을 구독해야 사용할 수 있다가 최근에 무료 요금제도 추가되었길래 다시 설치했다.

GitHub Copilot Chat 확장과 세트이다.

처음 사용할 땐 얘가 독심술을 쓰나 싶은 순간들이 있어서 경이로웠는데 요즘엔 경쟁자들이 많이 생겨서...

Hex Editor

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

헥스 에디터 확장이다. 파일에서 우클릭→ 연결 프로그램→Hex Editor를 선택하거나 Hex Editor 명령어를 사용해서 헥스 에디터를 열 수 있다.

Image preview

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

이미지 경로가 있으면 줄번호 왼쪽 여백과 마우스 커서를 올렸을 때 뜨는 팝업에 이미지 미리보기를 추가하는 확장이다.

indent-rainbow

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

들여쓰기 뎁스마다 서로 다른 색으로 색칠하는 확장이다. 또 잘못된 뎁스면(뎁스가 2인데 한 칸만 띄어져 있다던가) 빨간색으로 표시도 해준다.

Indentation Level Movement

https://marketplace.visualstudio.com/items?itemName=kaiwood.indentation-level-movement

Ctrl+Up/Down으로 커서를 들여쓰기 수준 단위로 이동할 수 있다. Shift를 함께 누르면 선택도 가능하다.

함수의 시작과 끝을 찾아갈 때 특히 유용하다. 포매팅이 된 상태여야지 의도대로 동작한다.

IntelliCode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

AI 기반 코드 자동완성 툴이다. 설치하면 IntelliCode API Usage Examples 확장도 함께 설치된다.

Python, TypeScript, JavaScript, Java를 지원한다.

IntelliCode Completions

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode-completions

선술한 IntelliCode가 자동 완성 목록을 보여준다면 이 확장은 더 나아가서 해당 줄의 완성을 제안한다.

Python, JavaScript, TypeScript를 지원한다.

IntelliCode Insiders

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode-insiders

IntelliCode의 새로운 기능을 먼저 사용해보는 확장이다.

Live Share

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

실시간으로 다른 사람과 동시에 편집하는 확장이다. 비주얼 스튜디오에 내장된 기능이랑 같고 예전엔 음성 채팅용 확장도 따로 있었는데 그건 디플리케이티드됐다.

아직 한 번도 사용해 본 적이 없다...

Multiple cursor case preserve

https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

Ctrl+D로 텍스트를 다중 선택하고 한 번에 바꿀 때 기존 케이스를 유지하는 확장이다. 특히, 리액트에서 useState 사용할 때 편리한데 변수명을 보통 [value, setValue] 이런 식으로 지정하는데 value의 이름을 바꿀 때 setValue도 첫 글자 대문자를 유지한 채 바뀌어서 굉장히 유용하다.

Multiple cursor same case

https://marketplace.visualstudio.com/items?itemName=psuranas.multiple-cursor-same-case

Ctrl+D 텍스트 다중 선택 기능은 대소문자를 구분하지 않는다. 이 확장을 설치하고 Alt+D를 누르면 대소문자를 구분하는 다중 선택 기능을 사용할 수 있다.

Output Colorizer

https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

vs code의 출력 패널에 구문 강조를 추가한다.

Path Intellisense

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

파일 경로에 대한 자동완성을 추가하는 확장이다. 자바스크립트 파일은 내장 기능이랑 겹치므로 아래 설정을 추가해야 한다.

"javascript.suggest.paths": false,
"typescript.suggest.paths": false,

윈도우는 버그가 있어서 아래 바로 가기 키 설정을 하는 게 좋다고 한다.

"key": ".", "command": ""

Project Manager

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

설치하면 사이드바에 Project Manager 메뉴가 추가서 작업 영역을 저장하고 불러올 수 있다. 탐색기 왔다 갔다 하며 프로젝트를 열 필요 없이 한번 저장해 두고 원할 때마다 바로 열 수 있으니 정말 편하다. 필수 확장!

Remote Development

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

원격 개발 확장 팩이다. 다른 컴퓨터를 내 컴퓨터처럼 사용한다는 게 대박인 확장들이다. 사이드바에 원격 탐색기 메뉴가 생긴다.

• Remote - SSH는 SSH를 통해 원격 서버에 접속해서 개발할 수 있게 해준다.
• Remote - Tunnels는 vscode를 서버로 만들어서 원격 시스템에 접속해서 개발할 수 있게 해준다. 서버는 사이드바의 계정 버튼→원격 터널 엑세스 켜기를 통해 켤 수 있다.(서버같이 gui가 없는 환경에선 code CLI을 사용하면 된다.) 이 확장은 서버 킬 때는 필요 없고 서버에 접속할 때 필요하다.
• Dev Containers는 도커 컨테이너의 내부를 바로 열어 개발할 수 있게 해준다.
• WSL은 WSL의 내부를 바로 열어 개발할 수 있게 해준다.

Surround

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

블록을 지정하고 Ctrl+Shift+T를 누르면 제어문으로 감싸주는 확장이다.

Tailscale

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

테일스케일 퍼널 기능으로 테일스케일로 묶인 컴퓨터에 연결하거나 로컬 포트를 노출할 수 있다.

Thunder Client

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

포스트맨처럼 REST API를 테스트할 수 있는 확장이다. 설치하면 사이드바에 Thunder Client가 생긴다.

원래 REST Client 확장을 쓰다가 이게 더 사용하기 편리해서 갈아탔다. 물론 REST Client도 사용하긴 조금 복잡하지만, 내용이 파일로 관리된다는 장점이 있다.

Trailing Spaces

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

줄 끝에 공백이 있으면 빨간색으로 강조 표시를 해주는 확장이다. 저장할 때 마다 자동으로 끝 공백을 제거하는 기능도 있다. (설정에서 끄기 가능)

이런 거에 집착하는 스타일이라 꼭 필요하다.ㅎㅎ

translator

https://marketplace.visualstudio.com/items?itemName=sculove.translator

번역 확장이다. 단축키는 Ctrl+shift+T이고 한국어를 선택하고 단축키를 누르면 영어로, 영어를 선택하고 단축키를 누르면 한국어가 뜬다.

기본적으로 구글 번역 API를 사용하는데 결과가 썩 만족스럽지는 않다. 그래도 간단하게 쓰기엔 좋다.

Version Lens

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

패키지 버전을 표시하는 확장이다. package.json 파일을 열면 탭 옆에 Show dependency versions 버튼이 생기는데 버튼을 누르면 npm에서 버전 정보를 가져와서 기준을 만족하는 버전(설치된 버전 아님)과 최신 버전을 알려준다.

패키지 업데이트 여부를 빠르게 파악할 수 있다. npm 말고 pip, 닷넷, 메이븐 등 다른 언어의 패키지도 지원한다고 한다.

vscode-hanspell

https://marketplace.visualstudio.com/items?itemName=9beach.vscode-hanspell

명령 팔레트에서 “맞춤법 검사” 명령어로 전체 문장 또는 선택한 문장의 맞춤법을 검사할 수 있다. 맞춤법 검사 엔진은 다음과 부산대 중에서 선택할 수 있다.

검사 후 빠른 수정 메뉴에서 틀린 단어를 고칠 수 있다.

JavaScript | TypeScript

Biome

https://marketplace.visualstudio.com/items?itemName=biomejs.biome

최근에 eslint + prettier 대신 biomejs를 사용해보고 있다.

    "[javascript]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.tabSize": 2,
        "editor.codeActionsOnSave": {
            "source.fixAll.biome": "explicit",
            "source.organizeImports.biome": "explicit"
        }
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.tabSize": 2,
        "editor.codeActionsOnSave": {
            "source.fixAll.biome": "explicit",
            "source.organizeImports.biome": "explicit"
        }
    },
    "[typescript]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.tabSize": 2,
        "editor.codeActionsOnSave": {
            "source.fixAll.biome": "explicit",
            "source.organizeImports.biome": "explicit"
        }
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.tabSize": 2,
        "editor.codeActionsOnSave": {
            "source.fixAll.biome": "explicit",
            "source.organizeImports.biome": "explicit"
        }
    },
    "[css]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.tabSize": 2
    },

javascript, css 포매팅 설정이다.

Import Cost

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

import 코드 옆에 해당 패키지의 용량을 표시한다. 사소하지만 최적화하는 데 도움이 된다.

Javascript Auto Backticks

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

작은따옴표(’)나 큰따옴표(”)로 작성 중인 문자열에서 ${}를 감지하면 백틱(`)으로 변환하는 확장이다. 귀차니즘 해결1

JS Quick Console

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

변수를 선택하고 Ctrl+Shift+L을 누르면 console.log 코드를 자동으로 추가하는 확장이다. 귀차니즘 해결2

정확히는 변수가 아니라 드래그한 부분이 console.log로 들어간다.

npm Intellisense

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

import 문에서 npm 패키지 자동완성을 추가하는 확장이다. 기본적으로 dependencies만을 대상으로 하는데 "npm-intellisense.scanDevDependencies": true, 설정으로 devDependencies도 포함할 수 있다.

Prettier - Code formatter

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

prettier에 대한 지원을 추가한다. 프로젝트에 prettier가 설치되어 있지 않으면 내장된 prettier를 사용한다.

biome으로 갈아탔지만 biome은 아직 html 포매팅을 지원하지 않아서 남겨두었다.

Pretty TypeScript Errors

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

타입스크립트 오류 메시지는 조금만 복잡해도 엄청 난해하게 출력되는데 이를 보기 좋게 출력해주는 확장이다.

Preview.js

https://marketplace.visualstudio.com/items?itemName=zenclabs.previewjs

UI 컴포넌트를 미리 볼 수 있는 확장이다. React, Preact, Solid, Svelte, Vue를 지원하기 때문에 웬만한 건 다 지원한다 보면 된다.

설치 후 컴포넌트 선언 위쪽에 Open in Preview.js가 생겨서 누르면 미리보기가 화면 분할로 열린다.(약간 스토리북 느낌)

신기하고 강력한 확장인데 아직은 뭔가 척척 동작하지 않는 느낌...

HTML | CSS

colorize

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

색상 코드가 있으면 텍스트 배경으로 해당 색을 보여주는 확장이다. 직관적이어서 편함

CSS Peek

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

html 파일에서 class와 id에 커서를 올리면 참조하고 있는 css 스타일 속성을 보여준다. 웹 개발 필수 확장

CSS Var Complete

https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar

css 변수에 대한 자동 완성을 추가하는 확장이다.

비슷한 확장으로 CSS Variable Autocomplete가 있는데 이쪽이 더 잘 작동하는 것 같다.

Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

html 파일에서 태그에 커서가 위치하면 짝이 되는 태그를 밑줄로 표시해 준다. 상태표시줄에 태그 경로를 표시하는 기능도 있다.

HTML End Tag Labels

https://marketplace.visualstudio.com/items?itemName=anteprimorac.html-end-tag-labels

닫는 태그 끝에 해당 태그의 아이디와 클래스명을 표시하는 확장이다. 짝이 되는 태그를 구분할 때 유용하다는 점에서 선술한 Highlight Matching Tag와 비슷한데 이건 부트스트랩, 테일윈드css 같은 유틸리티 퍼스트 라이브러리를 사용할 때 (클래스명이 덕지덕지 붙다 보니까) 더 유용하다.

HTMLHint

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

htmlhint에 대한 지원을 추가한다. HTMLHint는 html의 eslint 같은 툴이다.

기본적으로 설치되어 있는 htmlhint를 사용하고 설치되어 있지 않아도 확장에 내장된 버전을 사용한다.

htmltagwrap

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Alt+W를 누르면 선택한 부분을

태그로 감싸준다.

IntelliSense for CSS class names in HTML

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

html 파일에서 클래스명 자동 완성 확장이다. 리액트에 대응하는 className도 지원한다.

Live Preview

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

html 파일 결과물을 실시간으로 볼 수 있는 확장이다. 파일을 열고 탭 옆에 미리 보기 표시를 누르면 내장 브라우저에 결과물이 뜬다. 게다가 파일 내용이 변경되면 실시간으로 반영된다. 내부적으로 웹서버를 띄우기 때문에 url을 그대로 다른 브라우저에 입력해서 똑같이 확인할 수 있다.

px to rem & rpx & vw (cssrem)

https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem

px나 rem에 커서를 두고 Alt+Z를 누르면 px↔rem이 서로 변환된다. 그리고 단위 입력할 때 자동 완성도 추가된다.

Python

Better Jinja

https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml

진자 템플릿 엔진에 대한 구문 강조를 추가한다. 원래 진자가 정해진 확장자가 없지만 기본적으로 .jinja, .jinja2, .j2, .html.j2에 연결되어 있으니, 확장자는 이걸 사용하는 게 직접 파일 형식을 지정하는 것보다 편하다.

Inline Parameters Extended for VSCode

https://marketplace.visualstudio.com/items?itemName=RobertOstermann.inline-parameters-extended

함수를 호출할 때 매개변수에 주석(변수명)을 추가하는 확장이다. 인텔리제이에선 익숙한 기능인데 vscode에선 이 확장으로 사용할 수 있다.

Go, Java, Lua, PHP, Python을 지원한다.

참고로 JavaScript, TypeScript에 대한 건 내장 기능으로 사용할 수 있다. 각각 "javascript.inlayHints.parameterNames.enabled": "all",, "typescript.inlayHints.parameterNames.enabled": "all",이다.

Jupyter

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

주피터 노트북을 vscode 내부에서 바로 사용할 수 있는 확장이다.

Python

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

Python 필수 확장

설치하면 Pylance도 같이 설치된다.

Ruff

https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff

파이썬 ruff 린터(+포매터) 확장

요즘 파이썬은 Ruff로 대동단결인 듯 하다.

"[python]": {
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.organizeImports": true
    },
},

파일을 저장할 때마다 자동으로 포매팅하고 오류를 수정하려면 위 설정이 필요하다.

C#

C# Dev Kit

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

C# 필수 확장

IntelliCode for C# Dev Kit

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.vscodeintellicode-csharp

IntelliCode에 C# 지원을 추가한다.

C | C++

C/C++

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

설치는 해뒀지만 최근에 이쪽 언어를 구경해 본적조차 없다...

선술한 Inline Parameters 확장처럼 파라미터 이름 표시를 추가하려면 "C_Cpp.inlayHints.parameterNames.enabled": true 설정을 추가하면 된다.

AutoHotkey

AHK++ (AutoHotkey Plus Plus)

https://marketplace.visualstudio.com/items?itemName=mark-wiemer.vscode-autohotkey-plus-plus

오토핫키 인텔리센스를 추가한다. AHK v2도 지원한다.

Git

Git File History

https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

후술할 확장들로도 히스토리를 볼 순 있는데 이 확장을 설치한 이유는 히스토리를 단계별로 미려하게 확인해 볼 수 있어서이다. Git File History 명령어로 사용할 수 있다.

Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

gui 상에서 git 작업을 할 수 있는 확장이다. 사이드바 소스 제어 메뉴의 소스 제어 부분 우측에 View Git Graph 버튼이나 상태표시줄의 Git Graph 버튼으로 사용할 수 있다.

후술할 GitLens가 워낙 강력해서 완전히 기능이 겹치지만, 남겨놓은 이유는 gui가 쓰기 편리해서이다. 그래프 디자인도 이쪽이 더 보기 좋고... 사실 git 작업은 vscode에서 안 하고 소스트리로만 해서 거의 써본 적이 없긴 하다.ㅎ

GitHub Actions

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-github-actions

vscode에서 바로 깃허브 액션을 실행하고 기록을 볼 수 있는 확장인데 사실 workflows yml 구문 강조 때문에 설치했다.

GitHub Repositories

https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub

깃허브 리포지토리를 바로 열어서 사용할 수 있는 확장이다.

사이드바에 원격 탐색기 메뉴→원격 리포지토리로 사용할 수 있다.

GitLens — Git supercharged

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

사실 git 확장은 이거로만 대동단결해도 충분하다.(그래서 많은 글에서 추천하는 Git History 확장도 지웠다.) 특히, 편집기에서 라인 끝에 해당 코드는 누가 수정했는지 표시해 주는데 이게 협업 시에 굉장히 유용하다.

사이드바에 GitLens 메뉴가 추가되어서 사용할 수 있다. 파일 별로를 넘어서 라인 별로 히스토리 보는 기능도 꽤 유용하다.

Docker

Docker DX

https://marketplace.visualstudio.com/items?itemName=docker.docker

사실 윈도우에선 도커를 안 쓰는데 오직 Dockerfile 파일 작성을 위해 설치했다.

Log

Log File Highlighter

https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter

log 파일에 구문 강조를 추가한다. 추가로 내용이 추가되면 스크롤을 맨 밑으로 내려주는 기능도 있다.

XML

XML

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

xml에 대한 언어 지원을 추가하는 확장이다. xml 포매터가 없어서 설치

YAML

YAML

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

yaml에 대한 언어 지원을 추가하는 확장이다.

CSV

Excel Viewer

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

csv와 엑셀 파일을 vscode에서 바로 편집할 수 있는 확장이다. 간단하게 사용하기에 좋다.

엑셀 파일은 바로 열면 되고 csv 파일은 파일에서 우클릭→ 연결 프로그램→CSV Viewer를 선택하면 된다.

Rainbow CSV

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

csv, tsv 파일을 열면 열별로 다른 색으로 표시해 준다. 린터 기능도 있어서 csv 파일에 잘못된 부분이 있는지도 찾아준다.

테마

Material Icon Theme

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

Material Product Icons

https://marketplace.visualstudio.com/items?itemName=PKief.material-product-icons

회사

회사에서만 사용하는 확장 기록

Astro

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

최근에 아스트로를 도입했다.

AWS Toolkit

https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode

회사에서 aws를 사용 중이라 설치했다.

유저 데이터 전송을 막고 싶으면 "aws.telemetry": false, 설정을 추가하면 된다.

Data Preview

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

온갖 데이터 파일들을 보기 좋게 출력해준다. 선술한 Excel Viewer를 대체할 수 있어서 한번 사용해 보는 중이다.

EJS Beautify

https://marketplace.visualstudio.com/items?itemName=j69.ejs-beautify

ejs를 prettier로 돌리면 괴이해져서 찾은 확장이다. 프리티어만큼 마음에 드는 결과물은 아니지만 괜찮게 포매팅해 준다.

ESLint

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

아직 회사에선 eslint + prettier 조합을 사용 중이다.

Gemini Code Assist

https://marketplace.visualstudio.com/items?itemName=Google.geminicodeassist

코파일럿 프리 티어가 회사에선 금방 소진되서 좀 더 제한이 넉넉한 제미나이를 설치해봤다. 이래놓고 최근엔 커서를 테스트 중...ㅎㅎ

Jira and Bitbucket (Atlassian Labs)

https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode

회사에서 지라와 비트버킷을 사용 중이라 설치했다.

Omlet for VS Code

https://marketplace.visualstudio.com/items?itemName=Omlet.omlet-vscode-extension

리액트 컴포넌트 사용 현황 분석 확장이라길래 한번 설치해보았다.

Stylelint

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

stylelint에 대한 지원을 추가한다. 이번엔 CSS판 eslint. Stylelint이다.

기본적으로 설치되어 있는 stylelint를 사용하고 설치되어 있지 않아도 확장에 내장된 버전을 사용한다.