효율적인 개발을 위해 반드시 설치해야 하는 VSCode 플러그인 10가지

이 글에서는 소프트웨어 개발 효율성을 크게 향상시키기 위해 가장 널리 사용되는 프런트엔드 개발 도구인 VSCode용 개발 플러그인 10가지를 소개합니다.

VSCode(Visual Studio Code)는 Microsoft에서 개발한 무료 오픈 소스 크로스 플랫폼 텍스트(코드) 편집기로 현재 프런트 엔드 개발을 위한 거의 완벽한 소프트웨어 개발 도구입니다.

공식 웹사이트는 다음과 같습니다: https://code.visualstudio.com/

10개의 필수 편집기 플러그인

이것은 비디오 튜토리얼의 보충 업데이트에 해당합니다. 모두를 위한 필수 설치 편집기 플러그인 10개. 에디터의 기본적인 사용법과 플러그인 설치는 위의 동영상 튜토리얼을 직접 참고하시면 됩니다.

1. 파일 아이콘 vscode-icons

플러그인 이름: vscode-icons
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

첫 번째 코딩할 때 우리 모두를 위해 효율적이고 사용하기 쉬운 인터페이스를 갖기 위해서는 일부 불분명한 구성 요소를 아름답게 해야 합니다.

vscode-icons 플러그인은 다양한 파일 유형의 파일 앞에 아이콘 표시를 최적화할 수 있으므로 긴 파일 목록을 볼 때 파일 아이콘을 통해 직접 파일 유형을 빠르게 알 수 있습니다. of 파일의 접미사를 확인하세요.

2. 다크 테마 One Dark Pro

플러그인 이름: One Dark Pro
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

장시간 코딩, 어두운 코딩 환경에서는 눈의 피로가 덜하고 집중력도 높아질 수 있습니다.

One Dark Pro 플러그인을 설치한 후, 한 번의 클릭으로 VSCode 편집기의 색상을 어두운 색상으로 조정할 수 있어 코딩이 더욱 편안해집니다.

3. 코드 미화 Beautify

플러그인 이름: Beautify
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify 플러그인 코드 형식을 빠르게 지정할 수 있습니다. 형식은 코드를 작성할 때 지저분한 코드 구조를 즉시 매우 규칙적으로 만듭니다. 코드 강박 장애의 필수 요소입니다. 더 나은 코드 형식은 나중에 유지 관리하고 다른 사람이 읽을 수 있도록 훨씬 더 편리해집니다.

플러그인은 기본적으로 모든 현재 언어를 포괄하는 다양한 언어를 지원하며 코드 형식 구조를 사용자 정의할 수도 있습니다.

4. 코드 검사 도구 ESLint

플러그인 이름: ESLint
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint는 문법 규칙과 코드 스타일 검사 도구를 사용하면 올바른 구문과 균일한 스타일로 코드가 작성되었는지 확인할 수 있습니다.

VSCode의 ESLint 플러그인은 ESLint의 기능을 직접 통합하며 설치 후 사용할 수 있습니다. 코드 형식 및 사양의 세부 사항도 사용자 정의할 수 있으며 팀은 동일한 구성 파일을 공유하여 모든 구성원이 사용할 수 있습니다. 팀에서 작성하는 코드는 동일한 코드 사양을 사용할 수 있으며, 코드가 체크인되기 전에 누구나 자신의 코드 사양 확인을 완료할 수 있습니다.

5. 필수 디버깅 도구 Chrome용 디버거

플러그인 이름: Chrome용 디버거
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for -chrome

이 도구는 프런트엔드 개발에 꼭 필요한 도구이며 개발 및 디버깅 모드를 크게 바꿔줄 것입니다.

과거에는 프런트 엔드 디버깅이 주로 JavaScript 디버깅이었습니다. Chrome 콘솔에서 해당 코드 부분을 찾아 중단점을 추가한 다음 Chrome 콘솔에서 디버깅을 단계별로 진행하고 값 변경 사항을 확인해야 합니다.

Chrome용 Debugger를 사용한 후 Chrome에서 코드가 실행될 때 VSCode에 중단점을 직접 추가할 수 있습니다. 실행을 클릭한 후 VSCode에 추가한 중단점까지 Chrome의 페이지가 계속 실행됩니다. VSCode에서 직접 단일 단계 디버깅을 수행합니다.

Chrome 디버깅 도구 사용에 관해서는 제가 Knowledge Planet에서 공유한 원본 동영상 튜토리얼 "50가지 필수 Chrome 개발자 도구 팁"을 참조하세요. 이 과정에서는 프런트엔드 개발을 위한 필수 브라우저 디버깅 도구인 Chrome 개발자를 공유했습니다. 도구 사용 시 50가지 필수 사용 및 디버깅 기술 이러한 지식은 자격을 갖춘 프런트 엔드 개발자가 되기 위한 필수 기술입니다.

6. 범용 언어 실행 환경 Code Runner

플러그인 이름: Code Runner
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

다양한 개발 언어를 배우거나 접해야 한다면, Code Runner 플러그인을 사용하면 다양한 언어에 대한 개발 환경을 구축할 필요 없이 이 플러그인을 통해 해당 언어의 코드를 직접 실행할 수 있어 다양한 개발 언어를 학습하거나 테스트하는 데 매우 적합합니다.

지원되는 언어는 다음과 같습니다: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F#(.NET Core ), C# 스크립트, C#(.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust , Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D 및 일부 사용자 정의 명령.

기능

● 현재 활성화된 텍스트 편집기에서 코드 파일 실행

● 파일 탐색기의 상황에 맞는 메뉴를 통해 코드 파일 실행

● 텍스트 편집기에서 선택한 코드 조각 실행

● Shebang당 모든 실행 코드

● 파일 이름 glob별로 코드 실행

● 사용자 정의 명령 실행

● 코드 실행 중지

● 출력 창에서 출력 보기

● 실행할 기본 언어 설정

● 실행 언어 선택

● REPL 지원 통합 터미널에서 코드 실행

7. 빠른 주석 Document This

플러그인 이름: Document This
플러그인 주소: https://marketplace.visualstudio.com/items?itemName =joelday.docthis

우수한 성능과 표준화된 형식 외에도 우수한 코드를 위해서는 주석도 필수이며 주석에는 특히 JavaScript와 같은 언어의 경우 표준 주석 방법 세트가 있어야 합니다.

Document 이는 주석을 빠르게 생성하는 데 도움이 될 수 있습니다. 예를 들어 일부 함수에 대한 주석은 매개변수 정의 등을 추출하는 데도 도움이 될 수 있습니다. 표준화된 코드를 작성하는 데 필수적인 도구입니다.

8. CSS 클래스 이름에 대한 스마트 프롬프트

플러그인 이름: HTML의 CSS 클래스 이름을 위한 IntelliSense
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=Zignd .html-css- class-completion

HTML에서 정의된 스타일 이름을 호출할 때 정의된 CSS 클래스 이름을 확인하기 위해 HTML과 CSS 파일 사이를 자주 전환해야 하는 경우가 있습니다.

HTML 플러그인의 CSS 클래스 이름용 IntelliSense를 사용하면 HTML에서 CSS 클래스 이름을 호출해야 하는 위치를 사용할 수 있으며, 이 플러그인은 정의된 CSS 클래스 이름을 지능적으로 알려줍니다.

Features

●　작업 공간에서 찾을 수 있는 CSS 클래스 정의에 대한 자동 완성 기능 제공(CSS 파일 또는 "지원되는 언어 모드" 섹션에 나열된 파일 형식에 정의됨)

● 지원 linkHTML 파일의 요소를 통해 참조되는 외부 스타일시트용

● 자동 완성에 사용된 클래스 정의를 수동으로 다시 캐시하는 명령

● 사용자 설정은 캐시 프로세스에서 고려하거나 제외해야 하는 폴더와 파일을 재정의합니다.

9 코드 맞춤법 검사기

플러그인 이름: Code Spell Checker
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

이 플러그인 설치 걱정하지 마세요. 나중에 코드에 철자가 틀린 단어가 있는 경우, 우리는 많은 수의 영어 단어 변수 정의를 사용하여 코드를 작성하고, 플러그인은 철자가 틀린 단어에 대한 제안도 제공할 수 있으므로 이점을 찾을 수 있습니다.

10. 메모 플러그인 TODO 하이라이트

플러그인 이름: TODO 하이라이트
플러그인 주소: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo- 하이라이트

다른 많은 코드 편집기에는 TODO 주석 기능이 있습니다. 코드의 특정 부분을 작성하면 일부 기능을 나중에 구현해야 합니다. 이 경우 해당 코드에 TODO 유형 주석을 추가하면 됩니다. 나중에 이 부분으로 빠르게 건너뛰어 계속 작성할 수 있으며, 프로젝트 규모가 클 경우 TODO가 더 유용해집니다. 때로는 어떤 기능을 구현하거나 최적화해야 하는지 표시하는 데 도움이 되는 수십 개의 TODO가 있을 수 있기 때문입니다.

요약

물론, 여기서 소개하는 플러그인은 꼭 필요한 플러그인 중 10개에 불과합니다. 실제로 개발하는 언어에 따라 설치해야 할 도구도 많습니다. 개발 효율성을 높일 수 있습니다. VSCode 플러그인 센터에서 다운로드 및 설치를 확인하세요.

추천 튜토리얼: vscode 튜토리얼

위 내용은 효율적인 개발을 위해 반드시 설치해야 하는 VSCode 플러그인 10가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!