풀 스택 개발자를 위한 최고의 VS 코드 확장 목록
본문
목 차
설명서, 버전 관리 및 일반 유지 관리 확장
이것을 문서화하십시오
더 나은 의견
dotENV
원격 개발
GitLens
Git Graph
GitHub Pull Requests
Beautify
Prettier
Settings Sync
Bookmarks
IntelliSense Extension
PHP IntelliSense
Path IntelliSense
IntelliSense for CSS class names in HTML
npm Intellisense
Node.js Modules Intellisense
SCSS IntelliSense
Visual Studio IntelliCode
VS Code Back End Development Extension
REST Client
Code Runner
Node.js
The Node.js Extension Pack
PHP
PHP Debug
PHP DocBlocker
php cs fixer
phpcs
Python
Python
Anaconda Extension Pack
Django
kite
Better Jinja
autoDocstring
Pyright
Java
Maven for Java
Language Support for Java
Java Test Runner
Debugger for Java
Java Dependency Viewer
Spring Initializr Java Support
Spring Boot Extension Pack
VS Code Front End Development Extension
TypeScript
TSLint
React
ES7 React/Redux/React-Native/JS snippets
React Pure To Class
Angular
Angular 8 Snippets
Angular Language Service
Angular Console
Angular Files
Vue
Vetur
Vue 2 Snippets
Vue Peek
Extension Good for Every Framework
Debugger for Chrome
Live Server
Color Picker
Readability Extension
My Favorite VS Code Theme: Better Solarized Dark
A Great Font with Ligatures: Fira Code
Bracket Pair Colorizer
Indent Rainbow
VS Code Icons
풀 스택 개발자는 가능한 한 빨리 양질의 웹 앱을 구축 할 수 있어야 합니다. 이를 위해 수행 중인 작업에 최적화 된 최상의 설정을 유지하는 것이 가장 좋습니다. 나와 같은 사람이라면 Visual Studio Code (VS Code)를 선택한 편집기로 사용합니다. VS 코드는 매우 유연하고 확장 가능한 편집기로 표준에 따라 빌드 할 수 있으므로 좋아합니다. 로컬 서버에서 코드 제안에 이르기까지 다양한 확장 기능이 있습니다. 이 게시물에서는 VS Code를 사용하여 전체 스택 개발에 도움이 되는 모든 확장을 컴파일했습니다. 이러한 확장을 다음과 같이 나눕니다.
https://www.jonrcorbin.com/the-best-vs-code-extension-list-for-full-stack-developers/
- 설명서, 버전 관리 및 일반 유지 관리
- 서버 개발
- 클라이언트 개발
- 가독성
설명서, 버전 관리 및 일반 유지 관리 확장
문서 작성은 어려울 수 있습니다. Document This은 함수, 클래스 등에 대한 JSDoc 문서를 자동으로 생성하는 깔끔한 확장입니다.
Better Comments은 색상과 표기법을 추가하여 보다 체계적인 주석을 허용합니다. 예를 들어 댓글 앞에“!”를 추가하면 밝은 빨간색으로 표시되어 주의가 필요한 경고임을 알 수 있습니다.
dotEnv는 .env 파일에 대한 구문 강조 표시를 추가하며 그 점에서 마음에 들지 않는 점은 무엇입니까?
Remote Development은 원격으로 또는 Linux 용 Windows Subsystem으로 작업하는 경우 가장 유용한 플러그인 중 하나입니다. 이 확장은 다음과의 원격 작업을 허용합니다.
- SSH – SSH를 사용하여 원격 시스템 / VM의 폴더를 열어서 어느 위치에서나 소스 코드로 작업 할 수 있습니다. x86_64 glibc 기반 Linux 호스트 연결을 지원합니다.
- 컨테이너 – 컨테이너 내부 또는 내부에 마운트 된 폴더를 열어 샌드 박스 툴체인 또는 컨테이너 기반 응용 프로그램으로 작업합니다.
- WSL – Linux 용 Windows 서브 시스템에서 폴더를 열어 Windows에서 편안하게 Linux 기반 개발 경험을 얻을 수 있습니다. glibc 기반 Linux 배포판을 지원합니다.
이것은 외침만큼 확장이 아닙니다. GitLens는 VS Code 내부의 git에 대한 통합 시각화입니다. 이 확장은 인라인 비난을 추가하여 빌드를 마지막으로 중단한 사람을 신속하게 불러냅니다. 또한 커밋과 현재 작업을 구분하는 데 유용한 명령을 제공합니다. 전반적으로 이것은 팀에 속한 사람이나 심지어는 혼자 일하는 사람에게 있어 매우 중요한 확장입니다.
Git Graph는 정확하게 소리를 냅니다. 이 확장은 git 저장소에 대한 대화식 그래프를 추가합니다. 그래프에서 바로 git 작업을 수행 할 수도 있습니다. 또한 고도로 구성 가능하므로 원하는 모양으로 만들 수 있습니다.
오픈 소스 프로젝트를 다룰 때나 팀과 함께 일할 때는 풀 요청을 해야 합니다. GitHub Pull Requests 확장 기능은 VS Code에서 바로 풀 요청을 체크 아웃 하는 기능을 추가합니다. VS Code를 인증하고 GitHub에 연결하기 만하면 됩니다.
자바 스크립트, JSON, CSS, Sass 또는 HTML 파일을 빠르게 포맷 해야 합니까? Beautify는 바로 그 확장 기능입니다. 그것은 후드 아래에서 js-beautify에 의존하지만 프로젝트에서 사용자 정의 코드 스타일을 허용하는 .jsbeautfyrc 파일을 정의하는 기능을 추가합니다. 지저분한 반환 API 데이터를 읽는데도 매우 유용합니다. 개인 참고 사항 : 최근에 저는 Prettier로 전환했으며 이제 아름답기보다 더 많은 언어를 다루기 때문에 Prettier를 아름답게 선호합니다. 하지만 이 목록에서 공물로 아름답게 남겨 두겠습니다.?
Beatify와 마찬가지로 Prettier는 코드 포맷터이지만 훨씬 더 다양한 언어 및 프레임 워크를 지원합니다. Prettier는 또한 .prettierrc 형식의 구성 파일을 지원하며 다음을 포함한 언어를 지원합니다.
- JavaScript, including ES2017
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
여러 시스템 또는 플랫폼을 사용하는 경우 설정 동기화가 중요한 확장입니다. 동기화 설정을 사용하면 확장 프로그램, 테마 및 설정을 GitHub 요지와 동기화 한 다음 각 시스템의 모든 VS 코드로 다시 동기화 할 수 있습니다. 자동 밀고 당기기 때문에 현재 설정으로 모든 시스템을 최신 상태로 유지할 수 있습니다.
즐겨 찾기는 생각할 필요가 없습니다. 이 확장 기능은 코드베이스를 훨씬 빠르게 이동하는 데 사용할 수 있는 책갈피를 추가합니다. 나중에 자리를 기억해야 합니까? 북마크를 추가하십시오! 필요한 만큼 추가하고 간단한 명령을 사용하여 모든 북 마크를 확인하십시오.
IntelliSense Extension
IntelliSense에는 VS 코드가 기본으로 제공되지만 기능에 추가되는 추가 확장 기능은 항상 편리합니다! 아래의 모든 이름은 링크이므로 클릭하면 확장 페이지로 이동합니다. 각각은 자신의 언어를 제외하고 IntelliSense에 동일한 유형의 기능을 추가합니다.
IntelliSense for CSS class names in HTML
IntelliCode는 다른 IntelliSense 확장과 약간 다릅니다. IntelliCode는 Python, TypeScript / JavaScript 및 Java를 위한 AI 지원 자동 완성 기능을 추가합니다.
VS 코드 백엔드 개발 확장
백엔드에서 작업하는 동안 API를 테스트 할 수 있어야 합니다. 바로 Rest Client가하는 일입니다. 이 확장 프로그램을 사용하면 VS 코드 내에서 간단한 rest client를 사용할 수 있으므로 VS 코드의 안락함에서 API를 테스트 할 수 있습니다.
Code Runner 확장 프로그램은 빠른 키보드 단축키를 통해 VS Code 자체 내에서 코드를 실행할 수 있으므로 서버 개발 이상으로 매우 유용합니다. 방금 작성한 재귀 함수에 대해 완전히 확신하지 못하는 경우 코드 스니펫을 실행할 수도 있습니다. 작은 스니펫이 내가 생각하는 방식으로 실행되고 있음을 확인하고 빠르게 확인하기 위해 이것을 많이 사용합니다.
Node.js
Node.js Extension Pack은 다음과 같은 유용한 Node.js 확장 모음입니다. 각 Node Extension을 자체적으로 나열하는 대신 모든 필수 요소를 포함하는 환상적인 확장 팩이 있습니다.
- ES Lint – ESLint를 VS 코드에 통합합니다.
- npm – palatte 명령에서 npm 스크립트를 실행하고 package.json에 정의 된 설치된 모듈의 유효성을 검사하십시오.
- JavaScript (ES6) 스니펫 – ES6 구문에서 JavaScript 개발을 위한 코드 스니펫을 추가합니다.
- Search node_modules – 프로젝트에서 노드 모듈을 빠르게 검색합니다.
- NPM IntelliSense – 코드에 npm 모듈 용 IntelliSense를 추가합니다.
- Path IntelliSense – 코드에서 파일 이름을 자동 완성합니다.
PHP
PHP 디버그 확장은 VS Code와 XDebug 사이에 어댑터를 추가합니다. XDebug는 서버에 설치해야 하는 PHP 확장입니다. 이를 통해 PHP 파일을 원격으로 디버깅 할 수 있습니다. 로컬 디버깅을 위한 XDebug 설정에 대해서는 이 게시물을 참조하십시오.
PHP DocBlocker는 간단하고 의존성이 없는 PHP 전용 DocBlocking 패키지입니다. 그것은 특징 :
- 클래스, 함수, 클래스 속성 위의 / ** 이후에 완료 스니펫
- DocBlock에서 Enter 키를 누를 때 DocBlock 계속
- @param, @return, @throws와 같은 DocBlock 태그 완성
- 서명에서 param 및 return 유형 유추
- 각 유형의 docblock 완성을위한 템플릿 구성
php cs fixer는 PHP 표준 수정 프로그램 확장입니다. 빠른 표준 수정을 허용하는 간단한 명령을 제공합니다.
phpcs 확장은 phpcs.net과의 인터페이스를 제공하는 linter 확장입니다. 사용하려면 시스템에 phpcs를 설치하여 이 확장을 올바르게 사용하십시오
Python
파이썬 익스텐션은 모든 파이썬 개발자가 linting, 디버깅, 인텔리전스, 포맷팅 등을 VS 코드 설정에 추가 할 때 사용합니다. 일반적으로 파이썬 파일을 열 때 VS Code에서 권장하는 것이 가장 좋습니다.
anaconda를 선택한 환경 관리자로 사용하는 경우 Anaconda Extension Pack이 필요합니다. 이 팩은 다음을 포함합니다 :
Django 확장 프로그램은 구문과 스니펫을 추가하여 이를 프레임 워크로 사용하는 모든 사람에게 도움이 됩니다. 파일 연결이 올바른지 확인하십시오. 심지어 emmet 구성도 제공합니다.
kite는 인공 지능 기반의 자동 완성 기능으로 마이크로 소프트의 인텔리전스보다 조금 낫습니다 (적어도 제 생각에는). AI 기반 자동 완성, 기능 서명 및 문서를 제공합니다. 그러나 Kite Engine을 설치해야 합니다.
Better Jinja는 HTML, Markdown, YAML, Ruby 및 LaTeX를 포함하여 jinja2에 대한 구문 강조를 추가하는 확장입니다.
autoDocstring은 정확하게 들리는 확장 기능 중 하나입니다. 이 확장 기능은 적절한 docstring의 본을 자동으로 생성하는 기능을 제공합니다.
Pyright는 파이썬 소스의 유형 검사기입니다. "감시"모드로 실행되는 동안 파일을 빠르게 검사합니다. 파이썬 환경이나 써드 파트 패키지가 필요하지 않으므로 시도해 볼만한 가치가 있습니다!
Java
Maven for Java는 VS Code에 maven 통합을 제공합니다. 이 확장은 다음을 제공합니다.
- Maven Archetype에서 프로젝트 생성 지원
- 효과적인 POM 생성 지원
- 공통 목표, 플러그인 목표 및 사용자 정의 명령에 대한 바로 가기를 제공하십시오.
- 빠른 실행을 위해 명령 기록을 유지하십시오.
VS 코드는 Java에서 그다지 훌륭하지 않은 것으로 알려져 있지만 언어 지원이 기본적으로 제공되지 않기 때문입니다. Java 언어 지원은 바로 그 기능을 제공합니다!
Java 및 다른 언어에서는 항상 테스트를 통과해야 합니다. 이렇게 하려면 테스트를 실행할 수 있어야 합니다! Java Test Runner를 사용하면 그렇게 할 수 있습니다.
작성한 코드를 디버깅 하지 않고 텍스트 편집기를 사용할 수는 없습니다. 이제 가능합니까? Java 개발자에게는 Debugger for Java가 확장 기능입니다. 다음과 같은 기능을 제공합니다.
- Launch/Attach
- Breakpoints/Conditional Breakpoints/Logpoints
- Exceptions
- Pause & Continue
- Step In/Out/Over
- Variables
- Callstacks
- Threads
- Debug console
- Evaluation
- Hot Code Replace
Launch/AttachJava Dependency Viewer
Java 프로젝트로 작업 할 때 종속성을 최대한 빨리 볼 수 있으면 매우 도움이 됩니다 (거의 필요). Java 종속성 뷰어는 모든 종속성을 몇 초 안에 볼 수 있도록 창을 추가합니다.
Spring Initializr Java Support
Spring은 Java와 함께 사용할 수 있는 매우 뜨거운 기술입니다. Spring Initializr Java Support 확장은 Spring Boot 프로젝트를 빠르게 시작할 수 있는 기능을 추가합니다. 이 확장은 Spring Initializr을 기반으로 합니다.
Spring Boot Extension Pack은 Spring Initializr을 포함하여 몇 가지 다른 확장 기능을 추가합니다. 이 팩은 다음을 포함합니다 :
- Spring Boot Support 확장은 다음을 제공합니다.
-, Spring Boot 애플리케이션 개발 및 문제 해결을 위한 IDE Java 툴링.
-, Spring Boot Application 구성 특성 파일 (.properties 및 .yml) 편집 지원 - Cloud Foundry Manifest YML 지원 확장은 Spring Boot 애플리케이션 배치를 위한 Cloud Foundry 배치 Manifest .yml 파일 편집을 지원합니다.
- Concourse CI 파이프 라인 편집기는 Spring Boot 애플리케이션을위한 Concourse 빌드 파이프 라인 설정을 지원합니다.
- Spring Initializr Java Support 확장은 Spring Initiailizr API를 사용하여 빠른 시작 Spring Boot Java 프로젝트 생성을 지원합니다.
- 스프링 부트 대시 보드 확장 기능은 사이드 바에 탐색기를 제공하여 작업 공간의 모든 스프링 부트 프로젝트를 한 곳에서 편리하게 볼 수 있습니다. Spring Boot Support 확장 기능은 다음과 같은 기능을 제공합니다.
-, Spring Boot 애플리케이션 개발 및 문제 해결을 위한 IDE Java 툴링.
-, Spring Boot Application 구성 특성 파일 (.properties 및 .yml) 편집 지원 - Cloud Foundry Manifest YML 지원 확장은 Spring Boot 애플리케이션 배치를 위한 Cloud Foundry 배치 Manifest .yml 파일 편집을 지원합니다.
- Concourse CI 파이프 라인 편집기는 Spring Boot 애플리케이션을위한 Concourse 빌드 파이프 라인 설정을 지원합니다.
- Spring Initializr Java Support 확장은 Spring Initiailizr API를 사용하여 빠른 시작 Spring Boot Java 프로젝트 생성을 지원합니다.
- 스프링 부트 대시 보드 확장 기능은 사이드 바에 탐색기를 제공하여 작업 공간의 모든 스프링 부트 프로젝트를 한 곳에서 편리하게 볼 수 있습니다. 프로젝트를 빠르게 시작, 중지 또는 디버그 할 수도 있습니다.
VS 코드 프런트 엔드 개발 확장
TypeScript
TSLint는 VS Code에서 Typescript Linting에 대한 지원을 추가합니다. 이 확장은 TypeScript TSLint 언어 서비스 플러그인을 사용합니다.
React
ES7 React/Redux/React-Native/JS snippets
ES7 스니펫은 구성 요소 생성과 같은 반응 프로젝트 내에서 반복적인 스니펫을 빠르게 입력하는 방법을 추가합니다. ES7 스니펫을 사용하면 파일을 만든 다음 rcc를 입력하고 Enter 키를 누르는 것만 큼 쉽게 구성 요소를 만들 수 있습니다. 확장 프로그램은 기본 반응 구성 요소, 가져 오기 및 모두를 생성합니다! 거기에 더 많은 스니펫이 있으며 모두 도움이 됩니다.
이 확장은 React 프로젝트를 리팩토링 하는 데 유용합니다. React Pure To Class는 순수한 기능적 반응 구성 요소를 클래스 구성 요소로 대체합니다.
Angular
Angular 8 스니펫 확장은 Angular 개발자가 사용할 242 스니펫을 추가합니다. 이 스니펫에는 HTML, Typescript 및 Angular 2,4,5,6, 7 및 8 베타가 포함됩니다. 모든 스니펫은 Angular 스타일 가이드도 따릅니다.
Angular Language Service는 다음을 포함한 인라인 및 외부 템플릿을 제공합니다.
- Completions lists
- AOT Diagnostic messages
- Quick info
- Go to definition
Angular Console 확장은 VS Code 내에 Angular CLI 용 UI를 통합합니다. Angular CLI는 명령 줄 도구로, 응용 프로그램을 제공하거나 간단한 구성 요소를 생성 할 때 유용합니다. 그러나 고급 작업을 시작하면 부족합니다.
Angular Files 확장자는 새로운 angular 파일의 빠른 생성을 위한 빠른 스캐 폴드 템플릿을 추가합니다. angular.json을 자동으로 스캔하여 이미 설정 한 기본 옵션을 결정합니다.
Vue
Vetur는 vue-language-server를 활용하여 VS Code에 탁월한 Vue 툴링을 추가합니다. 이 확장에는 다음과 같은 기능이 포함됩니다.
- Syntax-highlighting
- Snippet
- Emmet
- Linting / Error Checking
- Formatting
- Auto Completion
- Debugging
이번에 Vue 개발자를 위한 또 다른 스니펫 확장은 Vue2 스니펫입니다. 이 확장 기능은 Vue 프레임 워크에 빠른 스니펫을 추가하여 작업을 더 빨리 완료합니다.
Vue Peek 확장명은 .vue 확장명을 가진 단일 파일 구성 요소의 구성 요소 및 파일 이름에 대한 정의로 이동 및 Peek 정의 지원을 통해 Vue 코드 편집 기능을 확장합니다.
모든 프레임 워크에 적합한 확장
Chrome 용 디버거는 Chrome 용 디버거 (또는 Chrome 디버거 프로토콜을 지원하는 다른 대상)를 VS 코드에 바로 추가합니다. 다음을 지원합니다.
- 소스 맵이 사용 가능한 경우 소스 파일을 포함하여 중단 점 설정
- Chrome 페이지의 버튼을 포함한 스테핑
- 지역 창
- 동적으로 추가되는 평가 스크립트, 스크립트 태그 및 스크립트 디버깅
- Watches
- Console
라이브 서버는 라이브 서버와 똑같습니다. 이 확장 기능을 사용하면 웹 페이지를 빠르게 개발할 수 있도록 핫 리로드를 통해 로컬 라이브 서버를 신속하게 실행할 수 있습니다. 로컬 node.js 서버와 같은 서버 기능을 실행하기 위해 확장을 추가 할 수도 있습니다.
색상 선택기 확장을 사용하여 색상을 시각적으로 선택하십시오. 더 이상 인터넷 검색을 하지 않아도 됩니다. "Dunkk-Tank Pink의 16 진수 코드는 무엇입니까?" 그 코드.
가독성 확장
가독성으로 인해 코드를 보다 쉽게 읽을 수 있습니다. 분명히 알고 있습니다. 그러나 이것은 빠르고 효율적으로 읽을 수 있도록 완벽하게 설정 되어야 하는 곳이므로 개발에 있어 매우 중요한 측면입니다. 클래스, 함수 및 변수 이름을 색상으로 신속하게 지적하고 해독 할 수 있어야 합니다.
Better Solarized Dark는 각 키워드마다 고유 한 색상이 있어 변수가 고유 한 색상을 갖도록 하여 모든 항목을 즉석에서 차별화하는 독창적 인 Solarized Dark의 환상적인 복제 테마입니다. 파란색 배경은 눈에 매우 쉽습니다. 특히 파란색 조명 필터가 적용되어 있습니다 (물론 필터 없이도 훌륭함). 전경색과 배경색 사이의 대비는 눈에 쉽게 나타나며 이름이 잘못 지정된 변수의 정확한 위치를 빠르게 스캔할 수 있습니다.
A Great Font with Ligatures: Fira Code
Fira Code는 단순한 고정 폭 글꼴이지만 VS Code에 합자를 추가합니다. 이것은->와 같은 일반적인 기호를 훨씬 더 멋지고 멋진 기호로 바꿉니다!
내 마음에 소중한 자리를 차지하는 확장은 Bracket Pair Colorizer입니다. 이 확장을 사용하면 대괄호 쌍의 색상이 동일하므로 다른 대괄호 또는 괄호가 닫힐 지 여부를 빠르게 해독 할 수 있습니다. 기본적으로 (), [] 및 {}은 모두 색상이 일치하지만 이 확장을 사용하면 일치하는 대괄호 문자를 정의 할 수 있습니다. 즉, 정말로 재미 있다면 세미콜론이 색상을 일치하도록 만들 수 있습니다.
가독성을 높여야 하는 또 다른 확장은 Indent Rainbow입니다. 이 확장은 파일의 각 들여 쓰기에 색상을 추가하여 다른 항목과 동일한 들여 쓰기 수준에 있는 것을 쉽고 빠르게 구별 할 수 있습니다. 이것은 특히 들여 쓰기에 의존하는 Python과 같은 언어에 유용합니다.가독성을 높여야 하는 또 다른 확장은 Indent Rainbow입니다. 이 확장은 파일의 각 들여 쓰기에 색상을 추가하여 다른 항목과 동일한 들여 쓰기 수준에 있는 것을 쉽고 빠르게 구별 할 수 있습니다. 이것은 특히 들여 쓰기에 의존하는 Python과 같은 언어에 유용합니다.
VS 코드의 주식 아이콘은 VSCode 아이콘이 있는 곳이 아닙니다.이 확장 프로그램은 주식 아이콘을 눈에 훨씬 쉽게 볼 수 있는 새롭고 더 좋아 보이는 세트로 대체하며 파일 유형을 해독하기가 매우 쉽습니다.
- 이전글Nodejs-백엔드 개발 시작하기 19.08.22
- 다음글새로운 React DevTools 소개 19.08.22