티스토리 뷰

최근에 설치된 extension들을 확인하려면 

@installed @sort:updateDate 검색어로 확인이 가능합니다. 

저는 그냥 깔대기처럼 보이는 아이콘(Filter extensions -> sorted by -> updated date)을 눌러서도 보는 것이 가능합니다. 


2022 12 05 기준

추천하는 기능 extension(snippet, intellisense 등..)

대부분이 필수적이라 생각하지만 개인적으로 추천하는 extension은 이모지를 달아두었습니다. 
  • 🥳 Auto Import - ES6, TS, JSX, TSX
  • WakaTime // 하루에 내가 어떤 환경에서 어떤 언어로 코드를 짜는 지 확인할 수 있도록 연동하는 기능
  • Tailwind CSS Highlight // 테일윈드 css 를 사용한다면 HTML 과 혼합되어있는 테일윈드 CSS 코드를 조금이나마 시각적으로 분리시켜줍니다. 
  • 🥳 Tailwind CSS IntelliSense // 테일윈드 CSS 자동완성 기능제공(ctrl + shift  사용)
  • 🥳 vscode-styled-components // 스타일드 컴포넌트 내에 CSS 작업시 자동완성 기능을 제공합니다. 문법 체킹을 하는 익스텐션이라고 보면 되겠네요. 
  • 🥳 Import Cost // 임포트해오는 패키지의 사이즈를 명시해줍니다. 내가 가져다쓰는 라이브러리의 크기를 확인할 수 있어서 조금 더 어플리케이션을 최적화할 수 있겠습니다.(React의 경우는 자체적으로 tree shaking을 제공하지 않기 때문에 webpack을 따로 설정해줘야 하는 것으로 알고 있습니다.^^)
  • 🥳 ES7+ React/Redux/React-Native sinppets //스니펫은 말 그대로 코드조각입니다. 단축키를 통해 여러 줄의 문법형식을 한번에 쓸 수 있습니다. 
  • project-tree // README 파일에 폴더 구조를 넣고 싶을 때 사용했습니다.

2023 01 16 기준

  • error lens // 에러 메세지 하이라이팅 기능
  • console Ninja // console.log() 디버깅을 크롬 개발자 도구를 통해 보지않더라도 vscode 내에서 보여주는 기능
  • code Spell Checker // 말 그대로 변수명을 작명할 때, 영문 스펠링을 체크해주는 기능 

테마 extension 

  • 🥳 Atom One Dark Theme // 개인적으로 가장 좋아하는 테마입니다. 예쁜 것보단 눈이 편하고 코드 역할의 구분이 명확하다고 생각이 드네요. 
  • Light Pink Theme // 말 그대로 라이트 핑크 테마,  심미적이긴하나  코드의 역할이 구분되지 않아 개발자 친화적이지는 못한 느낌이에요 ㅎㅎ 기분전환할 때 사용하면 좋을 듯 합니다. 
  • Dracula Official 
  • Night Owl 
  • Panda Theme 

 

댓글