[정리 및 공유] 2023년 프런트엔드에 꼭 필요한 VSCode 플러그인

Visual Studio Code는 최신 웹 및 클라우드 애플리케이션 작성을 위해 Microsoft에서 개발한 무료 크로스 플랫폼 소스 코드 편집기입니다. 풍부한 플러그인 시장을 포함하고 있어 실용적인 플러그인을 많이 제공합니다. 2023년 프런트엔드 필수 VS Code 플러그인을 공유해보겠습니다!

프런트 엔드 프레임워크

---

ES7+ React/Redux/React-Native 스니펫

이 플러그인은 개발 속도를 높이고 개발자가 React, Redux, GraphQ L React Native를 사용하여 코드 조각과 구문을 만듭니다. 예를 들어 새 파일을 만들고 rfce를 입력한 다음 Enter를 누르면 React 함수 구성 요소가 생성되고 React를 가져오고 구성 요소를 내보냅니다.

VSCode React Refactor

React 개발자를 위해 특별히 설계된 VS Code 확장입니다. 대규모 프로젝트를 작업할 때 리팩토링이 어려울 수 있습니다. JSX 코드 조각을 새로운 클래스와 구성 요소로 추출하는 VSCode React Refactor를 사용하여 코드를 신속하게 리팩터링할 수 있습니다. 또한 TypeScript, TSX, 일반 함수, 클래스 및 화살표 함수를 지원합니다.

Simple React Snippets

이 플러그인은 몇 글자만 입력하면 코드에 쉽게 추가할 수 있는 엄선된 React 스니펫 세트를 제공합니다. 예를 들어 imr을 입력하면 React를 구성 요소로 가져옵니다.

Typescript React 코드 조각

이 플러그인에는 Typescript(.ts) 또는 TypeScript React(.tsx)와 같은 언어를 지원하는 React 코드 조각이 포함되어 있습니다. 다음은 TypeScript를 사용하여 React 구성 요소를 만드는 두 가지 스니펫입니다.

• 기본적으로 React 내보내기:

• React 구성 요소 내보내기:

Vue 언어 기능(Volar)

기본적으로 Vue 구성 요소는 다음과 같습니다.

이 플러그인을 사용하면 아름다운 구문 강조, 오류 검사 및 코드 서식을 얻을 수 있습니다. 또한 입력하는 동안 훌륭한 제안을 제공하기 위해 많은 Vue 지시문과 이벤트 핸들러를 추가합니다.

volar는 Vue 3용으로 특별히 제작된 언어 지원 플러그인입니다. 이는 필요에 따라 모든 것을 계산하여 기본 TypeScript 언어 서비스 수준 성능을 지원하는 @vue/reactivity를 기반으로 합니다.

Vue 3 + TypeScript가 점점 대중화되면서 Vetur(Vue의 공식 VS Code 확장)는 TypeScript와 함께 Vue를 사용할 때 CPU 사용량이 높아지거나 Vue 3의 새로운 구문. Volar는 Vetur의 문제를 해결하고 Vue 3 + TypeScript 사용자에게 최고의 개발 경험을 제공합니다. 표준 단일 파일 그룹 <script setup></script> 语法。而 Volar 就解决了 Vetur 的问题，并为 Vue 3 + TypeScript 用户提供了最佳的开发体验。它为 Vue 3 提供完整的语言支持，包括标准的单文件组件 (SFC) 语法及其最新添加的 <script setup></script>ware

(SFC) 구문과 최신 추가 기능인 <script setup></script>을 포함하여 Vue 3에 대한 전체 언어 지원을 제공합니다.

Vue 3 스니펫

이 플러그인에는 Vue.js 2 및 Vue.js 3 API에 해당하는 모든 코드 스니펫이 포함되어 있습니다.

Vue VSCode 조각

이 플러그인은 Vue 2 조각 및 Vue 3 조각을 Visual Studio 코드에 추가합니다.

🎜

React Native Tools

React Native Tools 확장은 Microsoft 팀에 의해 구축되었으며 React Native 프로젝트를 위한 개발 환경을 제공합니다. 플러그인을 사용하면 다양한 시뮬레이터 또는 에뮬레이터에서 코드를 쉽게 실행 및 디버깅할 수 있고, 터미널에서 수동으로 명령을 실행할 필요 없이 명령 팔레트에서 반응 네이티브 명령을 빠르게 실행할 수 있으며, IntelliSense를 사용하여 React Native 함수, 개체, 매개 변수 등을 탐색할 수 있습니다. .

JavaScript(ES6) 코드 조각

이 플러그인을 사용하면 사전 정의된 ES6 구문 조각 약어를 사용할 수 있으므로 개발 효율성이 향상됩니다. 이 VS Code 플러그인은 프레임워크에만 국한되지 않으므로 사용자 정의할 수 있습니다.

Git 통합

---

GitLens

이 플러그인은 VS Code의 Git을 향상시키고 모든 저장소에서 숨겨진 데이터를 해제합니다. 누가 코드를 작성했는지 빠르게 확인하고, Git 리포지토리를 쉽게 탐색 및 탐색하고, 풍부한 시각화와 강력한 비교 명령을 통해 통찰력을 얻고, 코드를 더 잘 이해하는 데 도움이 되는 더 많은 작업을 수행할 수 있습니다.

Git History

이 플러그인은 Git 로그와 파일 기록을 보고 분기 또는 커밋을 비교하는 데 사용됩니다.

Git Graph

Git Graph 플러그인은 저장소의 Git 작업을 시각적으로 보고 그래프에서 Git 작업을 쉽게 수행하는 데 사용됩니다.

데이터 분석

---

가져오기 비용

가져오기 비용은 특정 라이브러리를 프로젝트로 가져오는 데 드는 비용을 확인하는 데 사용됩니다. . 플러그인은 가져온 라이브러리의 크기를 표시합니다. 크기가 녹색이면 라이브러리가 작음을 의미하고 빨간색은 라이브러리가 크다는 것을 의미합니다.

Time Master

프로그래밍 활동에서 자동으로 생성된 지표, 통찰력 및 시간 추적. 네트워크 환경에 구애받지 않는 오픈소스 프로젝트로 안전하고 가볍습니다.

VS Code Counter

VS Code Counter 플러그인은 프로젝트 코드의 줄 수를 계산하는 데 사용됩니다. 플러그인을 설치한 후 코드를 계산해야 하는 폴더를 마우스 오른쪽 버튼으로 클릭하고 "디렉터리의 줄 수 계산"을 선택하면 프로젝트 루트 디렉터리에 .VSCodeCounter라는 폴더가 나타나며, 편집기에서는 .md 형식의 결과가 열립니다. 결과에는 총 코드 줄 수, 다양한 형식의 파일 줄 수, 다양한 경로의 파일 기능 등이 표시됩니다. 코드 줄 수에는 순수 코드 줄 수, 빈 줄 수, 주석 줄 수가 포함됩니다.

기능 강화

---

중복 작업

개발하다 보면 파일(컴포넌트)을 복사해야 하는 상황이 발생할 수 있습니다. 기본적으로 마우스 오른쪽 버튼을 클릭해야 합니다. 파일을 선택한 다음 복사를 클릭합니다. 파일을 복사하려는 폴더를 마우스 오른쪽 버튼으로 클릭하고 붙여넣기를 클릭합니다. 파일을 다시 마우스 오른쪽 버튼으로 클릭하고 이름을 바꿉니다.

이 플러그인을 사용하면 파일을 마우스 오른쪽 버튼으로 클릭하면 새로운 "파일 또는 디렉터리 복제" 옵션이 표시됩니다. 그것을 클릭하고 파일의 새 이름을 입력한 후 Enter를 누르십시오.

npm Intellisense

이 플러그인은 import 문에서 npm 모듈에 대한 자동 완성 기능을 제공합니다. npm 모듈의 모든 가져오기는 이 확장을 사용하여 자동으로 처리됩니다.

Path intellisense

이 플러그인은 파일 이름을 자동으로 완성하는 데 사용됩니다. 다른 파일을 가져올 때 파일을 묻는 메시지를 표시하고 가져올 파일 이름을 빠르게 완성할 수 있습니다.

태그 자동 이름 바꾸기

이 플러그인을 사용하면 HTML 태그의 이름을 바꿀 때 HTML 태그의 열기 및 닫기 태그 이름을 자동으로 바꿀 수 있습니다. 여는 태그만 수정하고 닫는 태그를 수정하는 것을 잊어버리지 마세요. 이 확장은 HTML, XML, PHP 및 JavaScript와 함께 작동합니다.

자동 닫기 태그

보통 특정 HTML 요소를 사용하려면 시작 태그와 종료 태그를 입력해야 합니다. 이 플러그인을 사용한 후 여는 태그만 입력하면 자동으로 닫는 태그가 추가됩니다. Vue 개발자의 경우 사용자 정의 유형 이름도 지원합니다. 사용자 컴포넌트의 여는 태그를 입력하면 자동으로 닫는 태그가 추가됩니다.

CSS Peek

이 플러그인을 사용하면 HTML 및 JavaScript 파일에서 직접 외부 스타일시트에 정의된 CSS 스타일을 빠르게 탐색하고 편집할 수 있습니다. HTML에서 클래스 또는 ID 이름을 선택하고 Ctrl 키 + 마우스 왼쪽 버튼을 누르면 이름의 CSS 위치를 직접 찾을 수 있는 "Peek" 기능을 제공합니다.

이 플러그인은 여러 파일을 탐색하거나 많은 양의 코드를 검색할 필요 없이 특정 요소에 적용된 스타일을 빠르게 찾고 편집할 수 있으므로 크거나 복잡한 CSS 스타일시트 작업에 유용합니다.

Regex Previewer

Regex Previewer는 정규 표현식을 테스트하는 데 사용됩니다. 정규식을 작성할 때 단축키 Ctrl+Alt+M(Windows) 또는 ⌥+⌘+M(Mac)을 직접 사용하여 편집기 오른쪽에 있는 탭을 실행하여 정규식 테스트를 작성할 수 있습니다. 사용 사례, 작성한 후 정규식 위에 있는 정규식 테스트...를 클릭하면 오른쪽 탭 페이지에서 일치하는 문자가 강조 표시됩니다. 단어에 철자 오류가 있는지 여부 검사 규칙은 camelCase(camel Case 철자법)를 따릅니다.

프로그래밍 미화

하이라이트 매칭 태그

HTML 태그가 많은 경우, 종료 태그를 해당 시작 태그에 위치시키는 것이 어려울 때가 있고, 그 반대의 경우도 마찬가지입니다. 이 플러그인을 사용하면 시작 태그를 클릭하면 닫는 태그에 밑줄이 그어진 것을 볼 수 있습니다. 또한 코드 트리에서 여는 태그와 닫는 태그를 강조 표시합니다. 원하는 경우 스타일을 사용자 정의하여 밑줄을 더욱 돋보이게 할 수 있습니다.

그 외에도 플러그인에는 몇 가지 편리한 명령이 있으므로 태그를 클릭하면 ctrl + Shift + P를 사용하여 명령 패널을 열고 **"

---

Highlight Matching Tag를 검색할 수 있습니다.

”**, 프로젝트에서 사용할 수 있는 두 가지 명령이 표시됩니다.

TODO 하이라이트

TODO 하이라이트 VS 코드 플러그인은 코드를 프로덕션에 출시하기 전에 코드에서 완료되지 않은 메모나 작업을 상기시키려는 경우 매우 유용합니다. 플러그인은 코드 주석에서 FIXME: 및 TODO:와 같은 특정 키워드를 강조 표시하여 참고할 사항이나 아직 완료되지 않은 사항을 상기시킵니다. ctrl + shift + P打开命令面板并搜索**“Highlight Matching Tag”**，会看到两个可以在项目中使用的命令。

TODO Highlight

如果想在将代码发布到生产环境之前提醒自己注意事项或代码中未完成的事情，TODO Highlight VS Code 插件会非常有用。该插件会在代码注释中突出显示某些关键字，如 FIXME: 和 TODO:

그 외에도 단축키 ctrl + Shift + P를 사용하여 명령 팔레트를 열고 Todo 강조 표시 강조 표시된 주석 목록 선택을 검색한 다음 모두를 선택하여 모든 파일에 남아 있는 강조 표시된 모든 주석을 나열합니다.

더 나은 댓글

이 플러그인은 다양한 유형의 댓글에 다양한 색상을 추가하여 코드에서 더 쉽게 구별하고 더 인간적인 댓글을 작성할 수 있도록 도와줍니다.

Colorize

Colorize는 현재 코드 색상과 일치하는 색상 코드에 배경을 추가합니다. CSS 변수, 전처리기 변수, hsl/hsla 색상, 크로스 브라우저 색상, exa, rgb, rgba 및 argb 색상 배경을 통해 CSS 색상을 시각화하여 개발자가 색상을 빠르게 구분할 수 있도록 도와줍니다.

이미지 미리보기

이 플러그인을 통해 이미지 링크 위에 마우스를 올리면 실시간으로 이미지를 미리 볼 수 있습니다. 또한, 이미지의 크기와 해상도도 확인할 수 있습니다. 이미지.

CodeSnap

CodeSnap은 스크린샷을 찍고 코드를 공유하는 데 사용됩니다. 스크린샷에는 텍스트나 모양으로 주석을 달 수 있고 링크를 통해 공유하거나 웹사이트나 문서에 포함할 수 있습니다. Ctrl + Shift + P를 사용하고 CodeSnap을 입력한 다음 Enter를 누르면 CodeSnap 창이 열립니다.

Error Lens

Error Lens는 코드 검사(오류, 경고, 구문 문제)를 강조하는 플러그인입니다. Error Lens는 진단을 더욱 두드러지게 만들고, 언어에 의해 생성된 진단의 전체 줄을 강조 표시하고, 코드 줄 위치에 온라인으로 진단 메시지를 인쇄하여 언어의 진단 기능을 향상시킵니다.

테마 아이콘

---

One Dark Pro

Dracula 공식

GitHub 테마

Winter Is Coming 테마

올빼미

Monokai Pro

One Monokai

보라색 음영

Ayu

vscode-icons

VSCode 공식 아이콘 라이브러리.

Material Icon Theme

이 플러그인은 최신 Material Design 테마를 기반으로 파일 및 폴더에 대한 아이콘을 제공합니다. 이는 파일을 식별하고 편집기에 사용자 정의 모양을 추가하는 데 도움이 됩니다.

VSCode에 대한 자세한 내용을 보려면 vscode 기본 튜토리얼을 방문하세요!

위 내용은 [정리 및 공유] 2023년 프런트엔드에 꼭 필요한 VSCode 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!