고급 사용자를 위한 VSCode 팁 및 요령

Visual Studio 고급 사용자가 되고 싶은 이유는 무엇입니까?

파워 유저가 되는 것은 앞서 나가는 또 다른 방법입니다. 개발자들은 종종 게임에서 최고를 유지하는 방법과 지속적으로 새로운 것을 배우고 기술을 계속 연마하는 방법에 대해 이야기합니다. 고용주가 자신의 기술을 확장하는 데 전념하는 인재를 선호하는 경향이 있기 때문에 이것은 자주 묻는 인터뷰 질문입니다. IDE와 컴퓨터를 마스터하는 것은 전문성 개발을 위한 최고의 투자 중 하나일 수 있습니다.

개발자는 항상 자신의 업무를 더 잘할 수 있는 새로운 블로그를 찾고 있습니다. 어떤 IDE를 사용하든 블로그가 있을 것입니다. 구독!

또 다른 이유는 단순히 시간을 절약하기 때문입니다. 워크플로를 개선하는 데 시간을 투자하면 생산성을 높이거나 더 많은 시간을 즐길 수 있습니다. 오늘 우리는 Visual Studio와 VSCode를 자세히 살펴보고 파워유저가 되는 시점까지 기술을 향상시키는 방법에 대해 논의할 것입니다.

VSCode 고급 사용자가 되려면 어떻게 해야 합니까?

일반 사용자와 고급 사용자를 구별하는 것은 다음과 같습니다.

• IDE에 대한 친밀한 지식: VSCode에는 훌륭한 문서가 있습니다. 읽어보세요!
• 사용자 지정: 고급 사용자는 특정 요구 사항에 맞게 워크플로를 조정합니다.
• 지루하고 반복적인 작업을 모두 자동화 하십시오.
• 워크플로를 지속적으로 개선 하고 IDE의 발전을 추적하십시오.

이 기사에서는 이러한 각 사항을 직접 해결한 방법을 설명하고 스스로 수행할 수 있는 지식을 갖추도록 하겠습니다. 내가 하는 일이 당신에게 반드시 효과가 있는 것은 아닙니다. 적어도 완전히는 아닙니다. 사람들은 서로 다른 환경과 프로젝트에서 일하지만(저에게는 대부분 Windows에서 React.js 및 TypeScript로 작업합니다) 전반적인 접근 방식은 모든 사람에게 유효합니다.

Jest로 테스트하기

한 번에 하나의 테스트를 작성합니다. 즉, 한 번에 하나의 테스트를 실행할 방법이 필요합니다. 그러나 기본 정규식 솔루션은 매우 투박합니다. 그래서 저는 Jest Runner를 사용합니다. 이 유용한 확장을 사용하면 개별 제품군 또는 테스트를 실행하거나 디버그할 수 있습니다.

아래 비디오에서는 테스트 이름을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴를 사용하여 실행하기만 하면 됩니다.

Pact로 테스트하기

계약 테스트를 작성하는 데 가장 시간이 많이 걸리는 부분은 틀림없이 일치하는 부분입니다. 반복 작업을 자동화하는 유용한 스니펫을 만들어 이 문제를 해결했습니다. 이것들은 내가 만든 것이므로 자유롭게 사용하십시오(즉, 단순히 복사하여 VSCode의 /snippets/typescript.json 에 붙여넣기 ).

아래 비디오는 이러한 스니펫을 사용하는 방법을 보여줍니다.

1. 동일한 유형의 모든 항목을 선택합니다. 즉, 모든 문자열, 시간 및 기타 값을 선택합니다.
2. 미리 정의된 키 바인딩을 사용하거나 스니펫 삽입 을 호출하고 관련 스니펫을 선택하거나 사용하려는 스니펫의 접두사를 입력하기 시작합니다.

힘내

대부분의 개발자는 매일 Git과 GitHub를 사용하고 저도 마찬가지입니다. 하지만 저는 터미널이나 github.com을 사용하지 않으려고 노력합니다.

GitHub Pull Requests and Issues를 사용하면 VSCode에서 편안하게 PR을 열고 편집하고 검토할 수 있습니다. 내 IDE는 GitHub의 웹 또는 데스크톱 앱보다 코드를 검토하기에 더 좋은 곳입니다. 일부 개발자는 동의하지 않을 수 있지만 저는 제 IDE에서 일관성과 편안함을 제공합니다.

Git은 많은 일을 할 수 있지만 나는 그 명령 중 너무 적은 수를 외웠습니다. 그러나 처음에는 왜 아무 것도 암기하지 않습니까? 루틴의 세부적인 측면을 너무 많이 암기하는 것은 지나치게 생산적이지 않습니다.

GitLens는 여러분의 손끝에서 수많은 놀라운 기능을 보여줍니다. 덕분에 Git을 사용하기 위해 터미널에 손을 댈 일이 거의 없습니다.

터미널 사용자 정의

사용하는 OS에 관계없이 기본 터미널보다 더 잘 할 수 있습니다. Windows 터미널 + cmder를 사용하고 있습니다. Unix 사용자라면 iTerm(macOS) 또는 Oh My Zsh(Linux 및 macOS)를 검색하십시오. VSCode와 통합하고 명령 작성 시간을 절약하는 많은 별칭(바로 가기)을 추가했습니다.

예를 들어:

• ys = yarn start - 단 두 글자로 앱을 시작하는 데 도움이 됩니다.
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - 제공된 디렉토리를 삭제하고 완료되면 성공 메시지를 표시합니다.
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - master 를 제외한 모든 로컬 분기 삭제

여기 저기에 몇 개의 문자를 저장하는 것이 어리석은 것처럼 보일 수 있지만 이러한 시간 절약 기능은 장기적으로 합산됩니다. 별칭을 사용하는 것의 두 번째 이점을 찾았습니다. 별칭을 입력하는 데 시간을 덜 소비하면 명령을 호출하는 방법을 기억하려고 하지 않기 때문에 집중력을 유지하고 생각의 흐름을 잃지 않는 데 도움이 됩니다.

코드 생성

새 구성 요소, 페이지 등을 만드는 것은 제가 자주 하는 일이며 대부분의 독자가 알다시피 매우 간단합니다. 그러나 새 폴더를 만들고 그 안에 있는 파일을 초기화하는 것은 지루할 수 있습니다. 그래서 저는 이 과정을 자동화했습니다.

아래 동영상은 Supercharge React가 사용 중인 모습을 보여줍니다. New Component 를 사용하여 새 구성요소의 이름과 위치를 지정할 수 있습니다. 그런 다음 확장 프로그램은 폴더를 만들고 이 새 구성 요소를 초기화하는 스크립트를 실행합니다.

인텔리센스

VSCode에는 강력한 IntelliSense가 있으며 대부분의 경우 사용에 대해 생각할 필요가 없습니다. 그러나 제안을 탐색할 때 Ctrl+Space 를 눌러 사용 가능한 각 옵션에 대한 설명서를 볼 수 있습니다.

IntelliSense는 워크플로 및 개인 기본 설정에 맞게 추가로 사용자 지정할 수 있습니다.

키보드 단축키

Ctrl+S 및 Ctrl+F 와 같은 단축키를 사용한다고 확신합니다. 그것들은 모두 잘 문서화되어 있으며 VSCode의 방대한 단축키에 익숙하지 않다면 이것을 변경하고 마스터하기 위해 더 많은 노력을 기울일 것을 촉구합니다. 특정 바인딩이 너무 투박합니까? 소환하는 명령이 입력하는 데 너무 오래 걸리나요? VSCode의 키보드 편집기를 열어 바로 가기를 만듭니다.

특정 키 콤보에 명령이 할당되었는지 여부가 궁금한 경우 키 입력을 기록할 수 있는 검색 표시줄에서 키보드 버튼을 클릭합니다. 그러면 what/if 명령이 관련되어 있는지 확인할 수 있습니다.

마우스 단축키

개발자들은 생산성을 높이려면 마우스를 싫어하고 키보드를 사랑하는 법을 배워야 한다고 종종 말합니다. 작고 조밀한 파일에 대해 작업하는 경우 유효할 수 있습니다. 그러나 수백 줄의 코드가 포함된 파일과 자동 코드 형식화의 시대에는 규칙보다 예외에 가깝습니다.

마우스를 적극적으로 사용할 뿐만 아니라 Logitech Options를 사용하여 작업 흐름에 맞게 마우스를 사용자 지정했습니다. VSCode에서 특정 명령을 수행하도록 마우스의 특수 키를 프로그래밍했습니다.

다음은 단순히 커서를 이동하고 클릭하는 것 이상을 수행하도록 마우스를 "가르칠" 수 있는 방법입니다.

1. 오른쪽 상단 메뉴에서 VSCode를 선택합니다.
2. 사용자 정의하려는 버튼을 클릭하십시오.
3. 왼쪽에 있는 작업 목록에서 키 입력 할당 을 선택합니다.
4. VSCode에 미리 정의된 바로 가기를 입력합니다.

백업 및 동기화 설정

백업할 수 없고 다시 필요할 때마다 재사용할 수 없다면 아무 것도 사용자 정의하는 것은 의미가 없습니다.

기본 솔루션은 현재 내부자만 사용할 수 있습니다. 그러나 설정 동기화를 사용하면 코드 설정을 Gist로 저장하고 여러 컴퓨터 간에 워크플로를 동기화할 수 있습니다. 구성하려면 GitHub 토큰이 필요하지만 이후에는 단일 명령을 실행하여 설정을 업로드하고 다운로드하면 됩니다.

권장 VSCode 확장

이미 여러 확장을 언급하고 사용 방법을 설명했습니다. 다음은 몇 가지 주목할만한 언급입니다.

• 서라운드: 화살표 함수 또는 try-catch 블록에서 선택한 코드를 래핑해야 합니까? 이 확장이 당신을 위해 그것을 할 것입니다!
• node_modules 검색: 성능 향상을 위해 VSCode의 탐색기에서 node_modules 를 제외하지 않았더라도 해당 폴더가 너무 커서 탐색이 불가능합니다. 이 확장을 사용하면 끝없이 스크롤하는 대신 원하는 것을 검색할 수 있습니다.
• Glean 및 React Refactor는 JSX 파일을 위한 몇 가지 유용한 리팩토링 도구를 제공합니다.
• 자동 닫기 태그는 HTML/JSX/TSX 파일에 대한 닫기 태그를 자동으로 추가합니다.
• 파일 유틸리티: 파일 및 디렉토리를 생성, 복제, 이동, 이름 변경 및 삭제하는 편리한 방법입니다. 또한 사용자 정의할 수 있습니다.
• JavaScript Booster는 몇 가지 일반적인 리팩토링 작업을 자동화합니다.

요약

일반 사용자가 되지 마십시오. 대신 파워 유저가 되십시오. 항상 다른 사람들보다 한 걸음 더 나아가서 어디로 가는지 보십시오. 항상 비효율에 주목하고 이를 완화하려고 노력하십시오.

이에 대한 내 솔루션은 대부분의 개발자에게 친숙해야 합니다. Kanban 보드 . 나를 느리게 하는 무언가를 발견할 때마다 나는 그것을 할 일이라고 적는다. 여유가 있을 때마다 해결 방법을 찾으려고 노력합니다.

이 게시물이 압도적이고 어디서부터 시작해야 할지 모르겠다 면 문서를 읽으면 최고의 ROI를 얻을 수 있습니다 ! 공식 문서를 읽는 것이 지루하게 들린다는 것을 알고 있지만 장기적으로 대가를 치르게 될 것이라고 약속합니다. 생산성을 높이는 방법을 가르칠 뿐만 아니라 문서를 작성하는 방법도 배우게 됩니다.

더 쉽게하기 위해 문서에서 반드시 읽어야 할 부분 목록을 작성했습니다.

• 팁과 요령: 일부는 분명하고 이미 알고 있을 것입니다. 하지만 몰랐던 것을 발견하게 될 것이라고 장담할 수 있습니다.
• 편집 핵: 이 편집 핵은 믿을 수 없을 정도로 강력하며 이를 배우면 매일 도움이 될 것입니다.
• 코드 축소/확장: 다른 개발자와 짝을 이룰 때 이 단축키를 사용해 보세요.
• 키바인딩: 키바인딩이 작동하는 방식과 이를 사용자 정의하는 방법을 배우십시오. 이는 IDE를 마스터하는 초석 중 하나입니다.
• 수백 가지 프로그래밍 언어 지원: VSCode가 선택한 언어에 대해 어떤 특정 기능을 가지고 있는지 알아보세요.