[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치

이 기사에서는 Vue 프로젝트 개발을 위해 반드시 설치해야 하는 VSCode 플러그인을 정리하겠습니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

이전에 Webstorm을 사용하여 프로젝트를 개발했는데, Webstorm은 사용하기 쉽지만 두 가지 큰 단점이 있습니다. 첫째, 3년 전에 구입한 노트북에서 프로젝트를 열면 다시 시작해야 합니다. 기본적으로 매일 열어야 하는데 3개의 프로젝트가 직접 막혔고, 두 번째 프로젝트는 온라인에 크랙 버전이 있지만 가끔씩 실패하기 때문에 너무 고통스럽습니다.

그래서 저는 그것을 버리고 풀네임이 Visual Studio Code인 가볍고 무료인 vscode를 사용하기로 결정했습니다. 며칠간의 탐색 끝에 vs 코드에 다음 플러그인을 설치한 후 기본적으로 webstorm과 동일한 효과를 얻었거나 더 나은 경험을 얻었습니다. 이제부터는 더 이상 지연과 실패에 대해 걱정할 필요가 없습니다. [추천 학습: "vscode 입문 튜토리얼"]

플러그인 설치 및 지침

1. Visual Studio Code용 중국어(간체) 언어 팩

기능: 중국어 버전 VS Code

설치 단계:

지침: 플러그인을 설치할 때 123단계는 동일합니다. 대부분의 플러그인에는 123단계만 있습니다. 이 플러그인에는 추가 4단계가 있으므로 비용을 지불해야 합니다. 특별한 관심.

2. Vue 언어 기능(Volar)

기능: vs 코드의 기본 vue 파일은 모두 동일한 텍스트를 가지며 클릭할 수 없습니다. 이 플러그인을 사용하면 vue 파일의 내용을 색상으로 구분할 수 있으며 상대 경로 파일을 클릭하여 점프하고 클래스 이름의 위치 지정을 지원합니다(클래스 이름과 스타일이 동일한 파일에 있어야 하는 경우)

3 . vue-helper

기능: 템플릿에서 vue 컴포넌트, vue 변수 또는 vue 메소드를 클릭하면 해당 파일이나 위치를 찾을 수 있습니다. vue 클릭 시 해당 파일로 이동하는 것을 전제로 합니다. 구성 요소는 구성 요소가 상대 경로(즉, 별칭 소개를 지원하지 않음)로 설치되고 구성 요소 이름이 구성 요소의 파일 이름과 동일하다는 것입니다. 예를 들어 컴포넌트 파일 이름이 select.vue인데 컴포넌트가 도입되면 클릭할 수 없습니다. 컴포넌트 파일 이름을 common-select.vue

4로 변경해야 합니다. vue peek

기능: 템플릿을 클릭하면 Vue 구성 요소가 해당 파일로 이동할 수 있고 별칭으로 도입된 Vue 구성 요소를 지원할 수 있습니다. 예를 들어 플러그인 3의 단점을 보완하는 import commonSelect from '@/commons/common-select'; 가져오기 방법을 지원합니다.

5. css peek

기능: 파일 간 클래스 이름 점프를 지원합니다. 즉, 클래스 이름과 해당 스타일이 동일한 파일에 있지 않아 플러그인 2의 단점을 보완합니다.

6.Alias ​​​​경로 점프

기능: 플러그인 2의 단점을 보완하기 위해 별칭 파일 도입 방법 조정 지원 (별칭을 사용하지 않는 프로젝트는 설치할 필요가 없습니다)

7. 태그 자동 이름 바꾸기

기능: 태그 이름을 자동으로 변경합니다. 즉, 시작 태그를 수정하면 종료 태그도 자동으로 수정됩니다.

8. 코드 맞춤법 검사기

기능: 단어 맞춤법 검사. , 철자가 틀린 단어에는 물결선 알림이 표시됩니다

9. GitLens — Git supercharged

기능: 마우스 커서가 코드 줄에 있으면 해당 코드 줄의 git 수정 정보가 표시됩니다. 코드 문제가 있을 때 책임을 지지 마세요

10. Git Graph

기능: 설치가 완료되면 왼쪽 하단에 Git Graph 버튼이 나타납니다. 클릭하면 모든 Git 커밋에 대한 자세한 정보를 볼 수 있습니다. 그리고 각 커밋 코드의 명백한 변경 사항

11. Prettier - 코드 포맷터

기능: 파일 형식 지정, 구성 가능 파일을 저장할 때 파일 형식을 지정하세요

단계: 플러그인을 설치한 후 설정을 찾으세요. json

에 다음 코드를 복사합니다. 처음 두 줄은 플러그인에 필요하고, 마지막 두 줄은 각각 플러그인 12와 13에 필요합니다. 플러그인 12와 13을 설치하면 마지막 두 줄을 삭제할 수 있습니다

{
  "editor.formatOnSave": true, // 保存时是否格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件
  "editor.tabSize": 2, // tab健空格
  "editor.fontSize": 14, // 字体大小
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.colorTheme": "One Dark Pro"
}

다른 규칙을 구성하려면 프로젝트의 루트 디렉터리에 새 .prettierrc 파일을 생성하면 됩니다. 각 줄의 의미는 다음과 같습니다. 1. 작은따옴표, 2. 개체의 마지막 요소에 쉼표가 없습니다. 3. 화살표 함수에 매개변수가 하나만 있는 경우 대괄호가 없습니다. 4. 100자를 초과하는 경우 줄 바꿈입니다.

{
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 100
}

12. VSCode Great Icons

기능: 프로젝트 구조 앞에 해당 아이콘이 있도록 만들어 더 아름답게 보입니다(필요하지 않음)

13. One Dark Pro

기능: vs 코드 스킨, 인터페이스를 더 아름답게 만듭니다(필요하지 않음)

14. Markdown Preview Enhanced

기능: 일반적으로 모든 프로젝트에 README가 있습니다. md 파일을 설치한 후 각 md 파일을 마우스 오른쪽 버튼으로 클릭하면 효과를 미리 볼 수 있습니다

15. koroFileHeader

기능: 주로 파일 헤더 설명 및 기능 설명에 사용됩니다. 즉, 단축키를 누릅니다. 자동으로 생성됩니다. 구성된 주석이 구성되지 않은 경우 플러그인의 기본 주석을 생성합니다.

파일 헤더 주석 단축키 window: ctrl+win+i, mac: ctrl+cmd+i window：ctrl+win+i，mac：ctrl+cmd+i

函数注释快捷键 window：ctrl+win+t,mac：ctrl+cmd+t

함수 주석 단축키 window: ctrl+win+t, mac: ctrl+cmd+t , 먼저 기능 라인에 커서를 놓은 다음 바로 가기 키를 눌러야 합니다.

구성 문서: https://github.com/OBKoro1/koro1FileHeader/wiki/설치 및 빠른 시작

VSCode에 대한 더 많은 관련 지식을 보려면 vscode 튜토리얼
을 방문하세요!

🎜

위 내용은 [정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!