VScode 단축키 정리와 더불어 유튜브에 VScode extension을 검색해서 설치하면 좋을 것 같은 괜찮은 extension을 찾아보고 설치해보았다. 찾은 것 중에는 직접 써보면서 생각보다 잘 쓸 것 같지 않아서 삭제한 extension도 있다. 최종적으로 설치하고 삭제하지 않은 extension만 정리해보았다.
Git Graph
Git 관련 extension 중에 GitLens가 가장 다운로드 수가 많은 것 같다. 아직 회사에 프론트개발자가 나 혼자 밖에 없어서 많은 기능은 필요가 없어서 GitLens 대신 Git Graph를 설치했다. VScode에서 잘 정리된 repository의 Git graph를 편하게 볼 수 있어서 좋다.
(https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
vscode-styled-components
현재 CSS-in-JS 라이브러리로 Emotion을 사용하고 있는데 vscode-styled-components를 설치하지 않으면 syntax highlighting이 따로 작동하지 않기 때문에 코드 작성 시 보기가 불편한데 설치하면 syntax highlighting이 되어 코드를 작성하기가 편해진다. extension 이름에 styled-components가 들어가서 Emotion에 css prop을 사용시에는 작동이 안 될까 걱정했는데 css prop 시에도 잘 작동한다.
(https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
Auto Rename Tag
짝 지어진 HTML 태그 중 하나를 수정하면 다른 한 짝도 자동으로 수정되는 extension이다.
(https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
Auto Import
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX. 언제 설치했는지 모르지만 설치가 되어있었다.
(https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)
아래부터는 이번에 새로 설치한 extension이다.
Multiple cursor case preserve
React의 useState를 수정할 때 특히 유용한 extension이다. 수정하려는 변수가 원래 소문자로 이루어져 있는지 대문자로 이루어져 있는지에 따라 수정 후에도 소문자는 소문자로, 대문자는 대문자로 남아있도록 한다.
(https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve)
VSCode React Refactor
선택한 JSX 코드의 일부를 자동으로 함수나 파일로 따로 만들어준다. 아직 본격적인 리팩토링 전이라 제대로 사용해보지는 않았는데 리팩토링할 때 사용 시 도움이 될 것 같아서 설치해두었다.
(https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)
JSON to TS
말 그래도 JSON 오브젝트를 타입스크립트 interface로 변환해준다. 기존에는 같은 기능을 하는 웹사이트(https://transform.tools/json-to-typescript)를 이용했는데 이 extension을 사용하면 복사한 JSON 오브젝트를 단축키 shift + ctrl + opt + v(MAC 기준)로 변환해서 바로 붙여넣을 수 있어서 훨씬 편하다.
(https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts)
Todo Tree
주석으로 특정 단어 TODO, FIXME 등을 앞에 입력하면 주석이 자동으로 highlighting이 되고 Activity Bar에 생긴 나무 아이콘을 누르면 TODO나 FIXME로 입력한 주석을 한 곳에 모아볼 수 있고 클릭을 통해 바로 이동할 수 있다. 따로 메모장같은 곳에 정리할 필요없이 VScode에서 보고 바로 주석이 적힌 파일로 이동할 수도 있어서 좋다. TODO, FIXME 같은 키워드나 highlighting 색깔은 설정에서 변경할 수 있다.
(https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
Turbo Console Log
단축키 ctrl + opt + L(MAC 기준)을 통해 디버깅에 필요한 log 메세지를 한 번에 작성할 수 있다. opt + shift + C로 현재 파일에 있는 모든 log 메세지를 한 번에 주석 처리할 수도 있고 opt + shift + D로 현재 파일에 있는 모든 log 메세지를 지울 수도 있다.
(https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
Import Cost
import한 pacakage의 크기를 알려주는 extension이다. 특정한 기준을 정해 색을 다르게 표시할 수 있다. 아직은 딱히 없어도 상관없지만 나오다가 안 나오면 궁금할 것 같다.
(https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
Error Lens
에러나 경고가 실시간으로 해당 코드 옆에 나오게 하는 extension이다. 작성 중에도 나와서 거슬려서 onSave 옵션은 기본인 false가 아니라 true로 바꿔서 저장 시에 에러나 경고가 나오도록 바꿀 예정이다.
(https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
Version Lens
package.json 파일에서 V 아이콘을 누르면 설치한 package의 버전 정보가 위에 작게 나타난다.
(https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)
필요해서 직접 찾아서 설치한 Typescript Destructure이라는 extension이 있는데 잘 작동하지 않아서 삭제했다. 아쉽다. 있으면 시간을 많이 단축할 수 있는 기능이라 비슷한 기능을 하는 extension이나 snippet이라도 직접 만들어보고 싶다.
(https://marketplace.visualstudio.com/items?itemName=tusaeff.vscode-typescript-destructure-plugin)
