(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

Popular posts from this blog

[MaritimeCyberTrend] Relationship and prospects between U.S. Chinese maritime operations and maritime cybersecurity

Examining the Reality of Cyber Incidents and the Shortfalls in Compliance Frameworks

Comprehensive List of Shipboard Systems in Commercial Vessels