이 기사에서는 Vue 프로젝트 개발을 위해 반드시 설치해야 하는 VSCode 플러그인을 정리하겠습니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.
![[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치](https://img.php.cn/upload/article/000/000/024/6310a08c1aaf3272.jpg?x-oss-process=image/resize,p_40)
이전에 Webstorm을 사용하여 프로젝트를 개발했는데, Webstorm은 사용하기 쉽지만 두 가지 큰 단점이 있습니다. 첫째, 3년 전에 구입한 노트북에서 프로젝트를 열면 다시 시작해야 합니다. 기본적으로 매일 열어야 하는데 3개의 프로젝트가 직접 막혔고, 두 번째 프로젝트는 온라인에 크랙 버전이 있지만 가끔씩 실패하기 때문에 너무 고통스럽습니다.
그래서 저는 그것을 버리고 풀네임이 Visual Studio Code인 가볍고 무료인 vscode를 사용하기로 결정했습니다. 며칠간의 탐색 끝에 vs 코드에 다음 플러그인을 설치한 후 기본적으로 webstorm과 동일한 효과를 얻었거나 더 나은 경험을 얻었습니다. 이제부터는 더 이상 지연과 실패에 대해 걱정할 필요가 없습니다. [추천 학습: "vscode 입문 튜토리얼"]
플러그인 설치 및 지침
1. Visual Studio Code용 중국어(간체) 언어 팩
기능: 중국어 버전 VS Code
설치 단계:
![[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치](https://img.php.cn/upload/image/841/271/515/166203413142758%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%20Vue%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C%EC%9D%84%20%EC%9C%84%ED%95%9C%20VSCode%20%ED%95%84%EC%88%98%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%84%A4%EC%B9%98?x-oss-process=image/resize,p_40 "166203413142758[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치")
지침: 플러그인을 설치할 때 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
![[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치](https://img.php.cn/upload/image/447/945/542/166203415461635%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%20Vue%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C%EC%9D%84%20%EC%9C%84%ED%95%9C%20VSCode%20%ED%95%84%EC%88%98%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%84%A4%EC%B9%98?x-oss-process=image/resize,p_40 "166203415461635[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치")
![[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치](https://img.php.cn/upload/image/796/809/506/166203415796996%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%20Vue%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C%EC%9D%84%20%EC%9C%84%ED%95%9C%20VSCode%20%ED%95%84%EC%88%98%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%84%A4%EC%B9%98?x-oss-process=image/resize,p_40 "166203415796996[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치")
에 다음 코드를 복사합니다. 처음 두 줄은 플러그인에 필요하고, 마지막 두 줄은 각각 플러그인 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
기능: 프로젝트 구조 앞에 해당 아이콘이 있도록 만들어 더 아름답게 보입니다(필요하지 않음)
![[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치](https://img.php.cn/upload/image/928/189/639/166203418524732%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%20Vue%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C%EC%9D%84%20%EC%9C%84%ED%95%9C%20VSCode%20%ED%95%84%EC%88%98%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%84%A4%EC%B9%98?x-oss-process=image/resize,p_40 "166203418524732[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치")
13. One Dark Pro
기능: vs 코드 스킨, 인터페이스를 더 아름답게 만듭니다(필요하지 않음)
14. Markdown Preview Enhanced
기능: 일반적으로 모든 프로젝트에 README가 있습니다. md 파일을 설치한 후 각 md 파일을 마우스 오른쪽 버튼으로 클릭하면 효과를 미리 볼 수 있습니다
![[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치](https://img.php.cn/upload/image/359/651/415/166203419060386%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%20Vue%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C%EC%9D%84%20%EC%9C%84%ED%95%9C%20VSCode%20%ED%95%84%EC%88%98%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%84%A4%EC%B9%98?x-oss-process=image/resize,p_40 "166203419060386[정리 및 공유] Vue 프로젝트 개발을 위한 VSCode 필수 플러그인 설치")
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
Visual Studio vs. 대 코드 : 코드 편집기 비교Apr 28, 2025 am 12:15 AMVisualStudio는 대규모 프로젝트 개발에 적합한 반면 VSCODE는 경량 및 사용자 정의 가능한 환경에 적합합니다. 1. VisualStudio는 대규모 프로젝트 및 엔터프라이즈 수준 개발에 적합한 강력한 지능형 인식 및 디버깅 기능을 제공합니다. 2. VSCODE는 여러 프로그래밍 언어 및 크로스 플랫폼 개발에 적합한 확장 시스템을 통해 유연성 및 사용자 정의 기능을 제공합니다.
Visual Studio의 가격 : 구독 모델 이해Apr 27, 2025 am 12:15 AMVisualStudio 구독은 여러 수준으로 제공되며 다양한 개발자의 요구에 적합합니다. 1. 기본 버전은 무료이며 개인 및 소규모 팀에 적합합니다. 2. Professional 및 Enterprise와 같은 고급 버전은 엔터프라이즈 사용자에게 적합한 고급 도구 및 팀 협업 기능을 제공합니다.
Visual Studio vs. vs 코드 : 성능 및 자원 사용Apr 26, 2025 am 12:18 AM성능과 리소스 사용에서 VisualStudio와 VSCODE의 차이점은 주로 다음과 같이 반영됩니다. 1. 시작 속도 : VSCODE는 더 빠릅니다. 2. 메모리 사용 : VSCODE는 낮습니다. 3. CPU 사용 : 컴파일 및 디버깅 중에 VisualStudio가 더 높습니다. 선택할 때 프로젝트 요구 사항 및 개발 환경에 따라 결정해야합니다.
Visual Studio : C#, C 등의 IDEApr 25, 2025 am 12:10 AMVisualStudio (VS)는 Microsoft에서 개발 한 강력한 통합 개발 환경 (IDE)으로 C#, C, Python 등과 같은 여러 프로그래밍 언어를 지원합니다. 1) 코드 편집, 디버깅, 버전 및 테스트를 포함한 풍부한 기능 세트를 제공합니다. 2) vs는 강력한 편집자 및 디버거를 통해 코드를 프로세스하고 Roslyn 및 Clang/MSVC 컴파일러 플랫폼을 사용한 고급 코드 분석 및 재구성을 지원합니다. 3) 기본 사용법은 C# 콘솔 애플리케이션을 만드는 것과 같으며 고급 사용량은 다형성을 구현하는 것과 같습니다. 4) 중단 점을 설정하고 출력 창보기 및 인스턴트 윈도우를 사용하여 일반적인 오류를 디버깅 할 수 있습니다. 5) 성능 최적화 제안에는 비동기 프로그래밍, 코드 재구성 및 성능 분석 사용이 포함됩니다.
Visual Studio : 코드 컴파일, 테스트 및 배포Apr 24, 2025 am 12:05 AMVisureStudio에서 코드를 컴파일, 테스트 및 배포하기위한 단계는 다음과 같습니다. 1. 컴파일 : VisualStudio의 컴파일러 옵션을 사용하여 소스 코드를 실행 파일로 변환하여 C#, C 및 Python과 같은 여러 언어를 지원합니다. 2. 테스트 : 내장 MSTEST 및 NUNIT를 사용하여 단위 테스트를 수행하여 코드 품질 및 안정성을 향상시킵니다. 3. 배포 : 보안 및 성능을 보장하기 위해 웹 배포, Azure 배포 등을 통해 개발 환경에서 프로덕션 환경으로 응용 프로그램을 전송합니다.
Visual Studio : 통합 개발 환경 소개 (IDE)Apr 23, 2025 am 12:02 AMVisualStudioismicrosoft'sflagshipide, 지원 multipleprogramminglanguages 및 codingefficiency를 지원합니다 .1) itoffersfeaturesfeatireSteLlisenseForCodePdiction, multi-tabbedinterforprojectmanagement, andtoolsfordebugging, 리팩토링, 및 버전 콘트 롤 .2
Visual Studio : 무료 및 유료 제품 탐색Apr 22, 2025 am 12:09 AM무료 및 유료 버전의 VisualStudio의 주요 차이점은 풍부한 기능과 지원되는 서비스입니다. 무료 버전 (커뮤니티)은 개별 개발자 및 소규모 팀에 적합하여 기본 개발 도구를 제공합니다. 유료 버전 (Professional and Enterprise)은 대규모 프로젝트 및 엔터프라이즈 수준 개발에 적합한 고급 디버깅 및 팀 협업 도구와 같은 고급 기능을 제공합니다.
Visual Studio Community Edition : 무료 옵션이 설명되었습니다Apr 21, 2025 am 12:09 AMVisualStudiocommunityedition은 개별 개발자, 소규모 팀 및 교육 기관에 적합한 무료 IDE입니다. 1) 코드 편집, 디버깅, 테스트 및 버전 제어와 같은 기능을 제공합니다. 2) Roslyn 컴파일러 플랫폼을 기반으로 여러 프로그래밍 언어를 지원하고 GIT 및 TFVC를 통합합니다. 3) 고급 기능에는 단위 테스트, 최적화 제안에는 불필요한 확장을 끄고 가벼운 편집기 사용이 포함됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
드림위버 CS6
시각적 웹 개발 도구
