VS 코드: 생산성 향상을 위한 플러그인 23개와 편집 팁 23개

평소 자주 사용하고 사용하기 좋은 VS 코드의 플러그인과 편집 기법을 정리해 공유했다.
기사 상세 정보는 내 블로그를 참조하십시오.https://lishaoy.net
외관
메시지
여기에서 나는 두 가지 주제를 공유한다.
1.Material Theme
효과는 다음과 같습니다.
2.An Old Hope Theme
효과는 다음과 같습니다.
아이콘
3. Material Icon Theme, 물론 이 두 테마의 파일 관리자(왼쪽)의 icon 작은 아이콘은 Material Icon Theme를 사용합니다.
글꼴 및 기타
기타 모양새 관련 설정은 다음과 같습니다.

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": false,
    "workbench.activityBar.visible": false,
    "workbench.iconTheme": "eq-material-theme-icons-darker",
    "workbench.colorCustomizations": {},
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Darker",
        "accentPrevious": "Acid Lime"
    },
    "workbench.colorTheme": "Material Theme Darker",
    "material-icon-theme.angular.iconsEnabled": true,
    "material-icon-theme.folders.icons": "specific",
    "editor.lineHeight": 24,
    "editor.fontLigatures": true,
    "editor.fontFamily": "FiraCode-Medium"
}

특히 주의사항은 "editor.lineHeight": 24,과"editor.fontFamily": "FiraCode-Medium"였다."editor.lineHeight": 24,: 코드의 줄 간격을 설정합니다. 여기는 기본값보다 조금 큽니다. 이 작은 변화로 코드가 깔끔해 보입니다."editor.fontFamily": "FiraCode-Medium": 글씨체를 설정하면 코드가 더욱 생동감 있게 보일 수 있다. 다음과 같다.
빨간색 세로줄 왼쪽은 FiraCode-Medium 글씨체를 사용한 효과, 빨간색 세로줄 오른쪽은 FiraCode-Medium 글씨체를 사용하지 않은 효과
FiraCode-medium 글꼴에 대한 자세한 내용은https://github.com/tonsky/FiraCode주소.
코드 관리
서식 적용
4.Beautify: 포맷할 때 포맷된 텍스트 옵션을 다음과 같이 제공합니다.
5. Prettier: 개인적으로 이걸 좋아해요. 코드가 더 뚜렷해 보여요.
물론 여러분은 단축키를 사용자 정의할 수도 있고, ⌘-⇧-P를 눌러서 관련 명령을 검색할 수도 있습니다.
코드 검사
6.ESLint: 검사js 문법규범, 예를 들어airbnb,standard,구글 등 다양한 규범을 사용할 수 있습니다.7. TSLint: 구문 사양을 검토typescript합니다.8.Stylelint: 검사CSS/SCSS/Less 문법 규범.9.Markdownlint: 검사markdown 문법 규범.
자동 완성
다음 플러그인은 링크를 클릭하면gif동도를 볼 수 있으며 구체적인 기능을 자세히 알 수 있습니다.
10. Emmet: 여러분은 이 플러그인을 잘 아실 거예요(잘 쓰실 거예요). VS 코드는 이미 내장되어 있어서 잘 되어 있어요.11. Auto Close Tag: 자동 닫기html와 같은 이름표().12. Auto Rename Tag: html 태그를 수정하면 닫힌 태그가 자동으로 수정됩니다.13.Path Intellisense: 보정 경로가 자동으로 표시됩니다.
코드 세그먼트
14.snippets: 각종 코드 세션(vue,react,angular 등)을 스스로 설치할 수 있도록 구축한다. 여기에 열거하지 않는다.
기능 확장
다음 기능 확장 플러그인은 대부분gif동도가 있어 링크를 클릭하여 자세한 기능을 알 수 있습니다
15. Bracket Pair Colorizer: 코드의 여러 괄호를 다른 색상으로 표시합니다.16.Code Runner: 편집기에서 코드를 직접 실행하여 결과를 볼 수 있습니다.17. Color Picker: 편집기에서 직접 색상 팔레트를 열고 다양한 모드의 색상을 선택할 수 있습니다.18. Document This: 함수, 클래스 등에 자동으로 자세한 설명을 추가할 수 있습니다.19.Git History: git 버전 관리에 대한 자세한 정보를 쉽게 확인할 수 있습니다.20.Live Server: 원클릭으로 로컬에서 서버를 시작할 수 있습니다.21.Settings Sync: 이 플러그인을 중점적으로 소개합니다. 만약에 두 대의 컴퓨터(예를 들어 집과 회사)가 모두 VS 코드를 사용하지만 회사나 집에서 VS 코드에 플러그인을 설치하거나 설정을 수정했다면 집이나 회사에 가서 다시 한 번 하면 이 플러그인은 문제를 해결하고 여러 대의 컴퓨터 설정을 동기화할 수 있습니다.
GitHub에 프로필을 업로드하고 다른 곳에서 프로필을 다운로드하면 됩니다.
22.gi: .gitignore 파일에 다양한 언어로 파일 설정을 무시할 수 있습니다.23.Polacode: 코드를 그림으로 만들 수 있다(일부 지역에서는 코드 구조가 어지럽거나 코드가 밝지 않을 때 그림을 만들어서 보낼 수 있다).
편집 기교
커서
1. 커서를 파일의 첫 부분이나 끝 부분으로 이동
2. 커서를 줄의 첫 부분이나 끝 부분으로 이동
3. 단어별로 이동
4. 커서를 단어 대소문자 분해로 이동
선택 항목
5. 행 이상 또는 아래의 모든 항목 선택
6. 행의 첫 번째 또는 끝으로 컨텐트 선택
7. 알파벳이나 단어로 선택

←, ←-→ 문자로 선택

(45917) ⇧-⌥-←, ⇧-⌥-→ 단어별 선택8. 신축 선택
9. 일치하는 단어 선택
행
10. 행 위 또는 아래로 이동
11. 행 복사 또는 삭제
12. 여러 줄을 한 줄로 합치다
13. 들여쓰기 또는 들여쓰기 행
14. 현재 행 위 또는 아래에 행 삽입
여러 줄
15. 마우스 클릭, 여러 줄 편집
편집점 선택, 여러 줄 편집 종료
16. 단축키를 사용하여 여러 줄 편집
17. 선택한 줄의 끝에 편집점 삽입
18. 슬롯 선택
⇧-⇬을 누르고 칸을 선택하십시오
고급
19. 클래스나 방법의 정의를 보기

클릭 시 새 페이지에서 볼 수 있음

누르면 새 그룹에서 볼 수 있음

⇧-F12를 누르면 현재 페이지에서 볼 수 있습니다

20. 코드 축소

선택 줄의 끝 공백 제거

22. 지정된 행 번호로 이동
23. 파일에서 클래스나 방법을 찾다
마지막으로 이 단축키를 기억하지 못하면 ⌘-K,⌘-S 검색에 대응하는 단축키를 누르면 귀속됩니다