헛웃음이라도 하시라고 거창하게 제목을 작성했습니다만, 내용은 별거 없습니다.
🧙♂️ 이 글을 읽으시는 분들은
이미 Vue.js가 무엇인지 아신다고 가정하겠습니다. Vue.js를 소개하는 훌륭한 글은 정말 수도없이 많으니깐요.
먼저, Vue.js를 구성하는 코드를 작성하기 위한 Editor가 필요합니다.
죄송합니다. 제가 Web Storm은 안써봤습니다. 이후 내용은 VS Code를 기반으로 설명합니다.
아시다시피 VS Code는 정말 단순한 에디터입니다. 편리한 기능들은 Extensions을 설치하여 사용할 수 있죠. 그 중에 Vue.js 또는 Frontend 개발에 도움이 되었던 Extensions들을 소개합니다. 설치하시고 한번 쓰셨다가, 맘에 안드시면 마음 편히 지우시면 됩니다.
💑 Extensions
-
debugger For Chrome: JavaScript Debugger가 VS Code에 built-in 되면서 Deprecated 되었습니다. 최신버전을 사용하기 위해선 Nightly Extension 설치하는 방법에 대해서 참고하세요.
-
vetur: Vue.js와 관련도니 하이라이팅, 린팅, 포맷팅 디버깅 등을 지원합니다.
-
git-history: git 내역을 살펴볼 수 있도록 지원합니다.
-
GitLens:
프로젝트에서 git 추적을 보다 편리하게 할 수 있도록 지원합니다. -
prettier-vscode: 코딩 컨벤션에 대한 자동 수정 도구입니다. 꼭 팀 룰을 정하여 사용하셔야 합니다. 만약 그렇지 않다면, Git과 관련된 지옥이 펼쳐집니다.
-
code settings sync: VS Code와 관련된 설정을 백업 및 공유할 수 있습니다. 확장 프로그램까지 말이죠!
-
tabnine-vscode: 한번 맞보면 참을 수 없는 AI 자동 완성도구 입니다. 변수 선언시 이름에 오타가 나도, 다른 곳에서 호출할 때도 자동완성으로 오타가 난 변수명을 사용하기 때문에 에러 날 일이 줄어듭니다.
응? -
todo-tree: 프로젝트에 편리하고 체계적인 주석을 가능하도록 해주며, 커스터마이징이 편리한것도 장점입니다.
-
Bookmarks: 프로젝트에 필요한 부분에 마킹을 하고 편리하게 이동할 수 있도록 해줍니다.
-
Bracket Pair Colorizer: 한 쌍의 브라켓들의 색상을 다르게하여 코드 가시성을 높입니다.{ // VS Code의 기본 기능으로 추가되었습니다. "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs":"active" }
-
change-case: 블록된 코드에 대해 편리하기 표기법(Camel, Pascal, Contant etc)을 변경해줍니다.
-
guides: 들여쓰기에 가이드 라인을 제공하여 코드 가시성을 높입니다.
-
indent-rainbow: 들여쓰기 단계에 따라 배경색을 다르게 적용하여 코드 가시성을 높입니다.
-
vscode dashboard: VS Code 구동 시 대쉬보드를 구성하여 보다 쉽게 프로젝트에 접근할 수 있도록 지원해줍니다. 다만 로딩이 느려 직접 프로젝트를 여는게 더 빠릅니다.
-
file-tree-generator: 프로젝트 파일 구조를 공유할 때, 구조를 텍스트로 편리하게 생성해줍니다.
-
sftp: 원격 서버와 파일 동기화를 지원해줍니다.
🤴 뷰버스님 추천
- spell-checker
- import cost: import 하고자 하는 의존성이 얼마나 무거운 친구인지 알려주는것 같습니다.
- code snap: 코드를 공유하고자 할때 스냅샷을 생성해주는 것 같습니다.
🔎 Debugging
- 문서: VS Code에서 실시간으로 break point을 줄수 있는 디버깅 환경을 구축할 수 있습니다.
NPM
- webpack-bundle-analyzer: webpack의 bundle 사이즈를 가시적으로 보여주는 모듈입니다.
📚 Documents
-
공식 문서: 알파와 오메가요, 입문자도 읽고, 에반 유씨도 읽는 우리의 소중한 공식문서를 빼놓을수 없죠. Vue.js의 공식문서는 잘 정리되어 있기로도 유명합니다. ~(저한테만 유명한 것인가요?)~ 한글 번역도 다른분들이 열심히 진행했으니 가끔 참고해보세요!
-
공식 스타일 가이드: 꼭 읽으세요! 꼭! 꼭! 코드의 일관성을 높일 수 있고, Vue.js 개발자끼리의 가독성이 높아집니다.
-
awesome-vue: Vue.js 관련된 훌륭한 문서, 프로젝트 등을 살펴볼 수 있습니다.
