2022년 Visual Studio Code 최적화

이 문서에서는 Visual Studio Code에서 개발 및 생산을 쉽고 빠르게 하기 위해 필요한 유용한 확장, 플러그인 및 설정을 다룰 것입니다.

Visual Studio Code는 데스크톱에서 실행되고 Windows, macOS 및 Linux에서 사용할 수 있는 가볍지만 강력한 소스 코드 편집기입니다.

이미 VS Code가 설치되어 실행 중이라고 가정하겠습니다. 그렇지 않은 경우 Visual Studio Code에서 다운로드하십시오.

시작하자

1. 설정 및 팁

브래킷 쌍 색상화

브래킷 쌍 색상화는 이제 VS Code에서 기본이므로 이전의 안정적인 브래킷 쌍 색상화 확장을 더 이상 사용할 수 없습니다.
아래 단계에 따라 사용해 보세요.

Bracket Pair Colorizer 익스텐션을 제거해야 합니다.

VS 코드 업데이트

CMD(Mac 이외 사용자의 경우 CTRL) +를 통해 사용자 설정을 엽니다.Shift + P 및 유형 설정.

설정 JSON 파일이 열립니다. 다음을 추가합니다.

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,

에밋

Emmet을 사용하면 바로 가기를 작성한 다음 코드 조각으로 확장할 수 있습니다. 예는

 ul>li.num$*3 

여기서 우리는 내부에 클래스 이름이 "num"인 3개의 항목이 있는 정렬되지 않은 목록 요소를 만들려고 합니다. 클래스 이름도 아래에 번호가 매겨져 있습니다.

  <ul>
       <li class="num1"></li>
       <li class="num2"></li>
       <li class="num3"></li>
  </ul>

NB: VS Code의 Interactive Editor Playground 페이지를 확인하면 여러 편집기 기능이 강조 표시됩니다. 이 섹션에서는 매우 유용한 Emmet Cheat Sheet에 대한 링크도 찾을 수 있습니다.

연결된 편집

Auto Rename Tag 확장과 별개인 VS Code의 기본 제공 기능입니다. 언어에 따라 관련 기호(예: HTML 태그)는 편집하는 동안 업데이트됩니다.

2. 확장 및 플러그인

라이브 서버

정적 및 동적 페이지에 대한 라이브 다시 로드 기능을 사용하여 로컬 개발 서버를 시작할 수 있는 기능을 제공합니다.

VS 코드 아이콘

VSCode에 아름다운 아이콘을 도입하십시오. IDE에 새롭고 쉬운 느낌을 줍니다.

코드 시간

Code Time은 Visual Studio Code에서 자동 프로그래밍 메트릭 및 시간 추적을 위한 오픈 소스 플러그인입니다. 집중적이고 중단 없는 코딩을 위해 시간을 확보하기 위해 Code Time을 사용하는 200,000명 이상의 개발자 커뮤니티에 참여하세요. 귀중한 코드 시간을 보호하고 흐름을 유지하십시오.

VS 코드 인텔리코드

이 확장은 완성 목록 맨 위에 코드 컨텍스트에 대한 권장 완성 항목을 표시하여 AI 지원 IntelliSense를 제공합니다. 속도를 높이는 데 정말 도움이 됩니다.

에스린트앤프리티어

코드 형식이나 표준을 시행하는 조직이나 팀에서 일하고 있다면 위에서 언급한 도구 중 하나를 채택할 수 있습니다.
ESlint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구인 반면 Prettier는 독단적인 전문 코드 서식 지정 도구입니다. 둘 다 개발자가 일관된 스타일을 유지하도록 돕는 데 사용됩니다. 그들은 또한 손을 맞잡고 일할 수 있습니다.

결론

작업하기 위해 선택한 언어에 특정한 다른 많은 유용한 확장 및 설정이 있지만 다른 기사나 비디오에서 다루겠습니다. 지금은 이 가이드를 통해 작업을 보다 쉽게 ​​수행할 수 있는 방법을 소개할 수 있기를 바랍니다. 행복한 코딩을 유지하고 향후 게시물에서 뵙겠습니다.