실무자가 추천하는 프론트엔드 VScode 플러그인 & 익스텐션 AI

실무 프로젝트 작업하면서 도움을 많이 받았던 플러그인 & 익스텐션 추천을 드려볼까합니다.

평소 가장 유용했고 실무적으로 도움이 많이 되었기 때문에 기록용 이면서 추천용 입니다.

 

 

Windsurf Plugin 

아쉽게도 커서ai에는 지원되지 않지만, vscode 사용시 굉장히 유용하게 사용했던 AI 플러그인 중 하나입니다.

아래 이미지처럼 코딩을 하다가 자동으로 코드를 작성해주기도 하고, 변수명을 예측해서 추천해주는 용으로 많이 사용했습니다. 

다른 파일을 참고해서 코드를 작성해주기 때문에 프로젝트 사이즈가 클 수록 더 유용하게 사용했던 것 같습니다.

 

Windsurf Plugin (formerly Codeium): AI Coding Autocomplete and Chat for Python, JavaScript, TypeScript, and more - Visual Studio

 

 

 

 

px to rem

말 그대로 px 단위를 rem으로 바꿔주는 기능을 제공해줍니다.

rpx , vw 사용시에도 유용한걸로 알고 있는데, 보통 css 작성 & 스타일 수정 시 활용을 많이 했습니다.

px to rem & rpx & vw (cssrem) - Visual Studio Marketplace

 

 

 

 

 

 

GitLens - Git supercharged

이미 알 사람들을 다 아는 GitLens

여러명과 협업할 일이 생기거나, 코드 히스토리 추적시 굉장히 유용한 플러그인 입니다.

코드 한줄 한줄마다 포커싱을 하면 우측에 수정한 사람의 계정과 comment message 가 노출됩니다.

협업 시 가장 가장! 도움도 많이 되었던 플러그인 이나 단점으로는 통으로 파일을 생성하거나 옮기는 경우 작업자가 통으로 바뀌어 버려 추적이 불가능하기 때문에 처음부터 폴더구조를 명확히 짜놓고 작업하는게 좋습니다.

 

GitLens — Git supercharged - Visual Studio Marketplace

 

 

 

 

 

 

Tailwind CSS IntelliSense

테일윈드 익스텐션 추천!

테일윈드를 사용하는 실무진들은 필수로 사용할 수밖에 없는 tailwind 클래스명 자동 완성기 입니다.

아래 이미지처럼 클래스 작성 시 자동완성되어 사용성이 매우 좋은 플러그인 입니다. 

Tailwind CSS IntelliSense - Visual Studio Marketplace