(Environment) (VS Code) - (1) 나만의 Extension 및 환경 설정
VS Code 유용한 Extension
VS Code 의 장점이자 단점은 다른 IDE 특히 Visual studio series 에 비해 가볍다는 점일 것입니다. 본인의 개발 성향에 맞는 유용한 Extension 를 이해 하고 잘 활용 할 줄 안다면 더 이상 바랄게 없는 개발 툴 이라 생각 합니다.
본인의 경우 노트북을 새로 구입 하거나 OS 또는 VS Code 를 설치 할 때마다 반복되는 Extension 확장 하는 과정에서, 그 이름이 기억 나지 않아, 탐색하는데 시간을 낭비한 경험이 적지 않습니다.
이에, 같은 실수(불필요한 시간 낭비를) 를 반복 하지 않고자 이를 기록해 나가고자 합니다.
VS Code 유용한 Extension
- Live Server 설치
- Web Server 실행 간소화
- beautify 설치
- 라인 정렬.. 최적화
- git (or git-scm.com 에서 다운로드)
- 프로젝트이력 관련
- github 이용을 원하는 경우에도 사전 설치 필요 (git bash 등 사용)
- HTML CSS Class Completion
- CSS class가 많을 때 유용한 익스텐션으로 같은 프로젝트 내에 있는 모든 CSS class를 cache 해서 자동완성 기능을 제공
- HTML Snippets
- 기본적으로 VS Code 에서 HTML Snippets 를 제공해주고 있지만 이 Extension 은 더 강력한 HTML Snippets 를 제공
- Debbuger for chrome
- MS에서 만든 익스텐션입니다. 이 익스텐션의 장점은 VS Code Editor 내에서 마치 크롬 디버깅을 하듯이 javascript를 디버깅
- Git History
- Git으로 관리되는 프로젝트의 commit history 등을 편리하게 확인할 수 있도록 해주는 익스텐션
- Active File In StatusBar (이동)
- 현재 편집 중인 파일의 경로를 하단 상태 막대에 표시
- Bracket Pair Colorizer (이동)
- 프로그램의 덩치가 커지면 여러 단계의 괄호를 이용해야 합니다. JavaScript 코드는 특히 더 심하죠. 괄호의 단계별로 다른 색을 적용
- CodeMetrics (이동)
- 코드의 복잡도를 실시간으로 평가해주는 확장 기능입니다.
- 이 기능에서 좋게 평가된 코드가 절대적으로 좋은 코드임을 보장하는 것은 아니지만, 경고가 표시되면 불필요하게 복잡하게 작성하진 않았는지 생각해 볼 수 있습니다.
- Color Highlight (이동)
- 코드에 있는 색상 코드에 실제 해당 색상을 표시해줍니다.
- 매번 색상 코드를 검색하거나, Photoshop에 입력하지 않아도 됩니다
- Git History (이동)
- 현재 작업 중인 Git Repository의 Git Log를 시각적으로 표시
- IntelliSense for CSS class names in HTML (이동)
- 작업 중인 디렉토리의 CSS 파일을 미리 로드해서 CSS Class를 자동 완성해주는 확장기능입니다.
- 매번 CSS 파일을 열어보지 않아도 될 뿐만 아니라, 사소한 오타 때문에 시간을 버리는 일을 방지
- TODO Highlight (이동)
- 언제나 완벽한 코드를 배포하는 것은 아닙니다. 나중에 고쳐야 할 버그를 주석에 남겨놓기도 하죠. 이 확장 기능은 해야할 작업과 고쳐야 할 버그를 주석에 남겨두면 눈에 띄도록 강조
- vscode-icons (이동)
- 파일 목록에서 바로 파일의 종류를 확인할 수 있도록 도와 줌
- 원격 서버 연결시 유용함
- GitLens
- 파일이 update 됐는지, 파일별로 어떤 commit이 찍혔는지 알 수 있는 창
- 각 파일에서 Line별로 가장 마지막에 누가, 언제, 무슨 commit했는 지 확인

Comments
Post a Comment