다음 글에서는 일반적으로 사용되는 VSCode 확장에 대해 소개하겠습니다.

1. 확장

2. 테마

스타일러스 구문 강조 및 팁 ㅋㅋㅋ G 뷰어 vetur Volar 노드 패키지 보기 Visual Studio IntelliCode VS Live Share VSCode Great Icons vscode-데이터베이스 vscode-icons vscode-random vscode-spotify vscode-styled- Components

Name	간단한 설명
태그 자동 닫기	HTML 태그 자동 닫기
자동 가져오기	가져오기 팁
태그 자동 이름 바꾸기	Mo 입체화 HTML 태그, 일치하는 태그 자동 수정
Babel JavaScript	babel 플러그인, 구문 강조
Babelrc	.babelrc 파일 강조 팁
css/sass/scss/less를 아름답게 만드세요	css/sass/less 형식화
더 나은 정렬	할당 기호 및 주석 정렬
더 나은 댓글	쓰기 더욱 사용자 친화적인 메모
북마크	라인 북마크 추가
브래킷 렌즈	닫힌 괄호에 대한 팁 괄호 머리에 코드 ㅋㅋㅋ	HTML5, CSS3, SVG에 대한 브라우저 호환성 확인
코드 개요	코드 구조 트리 표시
코드 러너	선택한 코드 조각 실행(대부분의 언어 지원)
코드 맞춤법 검사기	단어 맞춤법 검사기
CodeBing	빠른 Bing 열기 및 검색을 수행하면 검색 엔진을 구성할 수 있습니다
색상 강조	색상 값은 코드에서 강조 표시됩니다
색상 정보	작은 창 디스플레이 색상 값, rgb, hsl, cmyk, hex 등
CSS-in-JS 강조 표시 및 변환	Dash
Integrated Dash	Chrome용 디버거
Chrome 디버그	Document This
주석 문서 생성	DotENV
.env 파일 강조 표시	csv 편집
CSV 파일 편집
VS Code용 EditorConfig	EditorConfig 플러그인
Emoji	이모티콘 입력 코드에서
endy	입력 커서를 현재 줄의 끝으로 이동
Error Gutters	줄 번호에 오류 코드 표시
ES Lin ㅜㅜ	ESLint 플러그인, 하이라이트 팁
파일 Peek	경로를 기준으로 파일을 빠르게 찾습니다.
파일 크기	상태 막대 표시 현재 파일 크기
Find-Jump	지정된 단어 위치로 빠르게 점프
HTML용 글꼴이 멋진 코드	FontAwesome 팁 코드 세그먼트
ftp-sync	파일을 ftp
Git Blame	으로 동기화 현재 줄의 Git 정보를 표시합니다. 상태 표시줄
Git 파일 기록	단일 파일 커밋 변경 내역을 빠르게 탐색
Git Graph	Git 그래픽 보기, 편리함 찾아보기
Git History(git log) 을 운영합니다.	git 로그 보기
Git 트리 비교	Git 트리 비교를 통해 다양한 브랜치 간의 차이점 확인
gitignore	.gitignore 파일 구문
GitLens	파일의 최근 커밋과 작성자를 표시하고, 현재 줄 커밋 정보를 표시합니다.
VS용 GraphQL 코드	graphql 하이라이트 및 팁
Guides	하이라이트 들여쓰기 지침
Gulp Snippets	꿀꺽 삼키기 스니펫
일치하는 태그 강조 표시	일치하는 선택한 태그 강조 표시
HTML CSS 클래스 완성	CSS 클래스 팁
HTML CSS 지원	css 힌트(vue 지원)
HTMLHint	HTML 형식 팁
htmltagwrap	html 태그를 빠르게 래핑
htmltagwrap	HTML 포함
가져오기 Beautify	가져오기 그룹화, 정렬, 서식 지정
가져오기 비용	가져온(가져오기/필수) 패키지의 크기를 인라인으로 표시
Indenticator	들여쓰기 강조 표시
Css 클래스 이름용 IntelliSense	css 클래스 입력 팁
JavaScript(ES6) 코드 조각	ES6 구문 코드 조각
자바스크립트 표준 Style	Standard style
Jest Runner	Jest 단일 테스트 파일 또는 단일 사용 사례 실행 지원
JS 리팩터링	코드 재구성 도구, 추출 함수, 변수 이름 바꾸기 등
JSON을 TS	JSON 구조를 TypeScript 인터페이스로
JSON 도구	JSON 형식 지정 및 압축
jumpy	지정된 단어 위치로 빠르게 이동
	ㅋㅋㅋ Lodash 코드 조각
로그 래퍼	선택한 변수를 인쇄하기 위한 생산 코드
markdownlint	마크다운 형식 팁
MochaS 니펫	모카 스니펫
노드 모듈 해결	빠르게 노드 모듈로 이동
npm	npm 명령 실행
npm Intellisense	모듈을 가져올 때 설치된 모듈 이름을 묻는 메시지가 표시됩니다.
Output Colorizer	다채로운 출력 정보
부분 차이	두 가지를 비교해보세요 코드 조각 또는 파일
매개변수 힌트	함수 호출 시 매개변수 이름 표시
경로 자동 완성	경로 완성 팁
Path Intellisense	또 다른 경로 완성 팁
Polacode	코드를 사진으로 생성
PostCss 정렬	CSS 정렬
Prettier - 코드 포맷터	prettier 공식 플러그인 ㅋㅋㅋ
Quokka.js	수동으로 실행할 필요가 없습니다. 변수 결과가 인라인으로 표시됩니다.
Rainbow CSV	CSV 파일은 무지개 색상을 사용하여 다양한 열을 렌더링합니다.
React 네이티브 스토리북	storybook 미리보기 플러그인, React 지원
React Playground	은 디버깅을 용이하게 하는 편집기용 React 구성 요소 실행 환경을 제공합니다
리액트 표준 스타일 코드 조각	react 표준 스타일 코드 블록
REST Client	REST 스타일 HTTP 요청 보내기
Sass	sass 플러그인
설정 동기화	VSCode 설정이 Gist
라인 정렬	선택한 행 정렬
Typescript 가져오기 정렬	typescript 가져오기 정렬
문자열 조작	문자열 변환 처리(카멜 표기, 대문자 시작, 밑줄 등)
동기화 중	vscode 설정이 gist
Test Spec Generator	테스트 사례 생성(chai, should, jasmine 지원)
과 동기화되었습니다. TODO 파서	Todo 관리
Todo Todo Tree	코드에 TODO 댓글을 모아 빠른 검색 지원
Togg le Qu otes	스위치 " -> ' -> `
TS/JS 접미사 완성	ts/js 접미사 프롬프트
의 JS 인용문	TypeScript 구문 검사
Types 자동 설치 프로그램	@types 선언된 종속성을 자동으로 설치
TypeScript Hero	TypeScript 보조 플러그인, 관리 import , 개요 등
TypeScript Import	TS 자동 가져오기
TypeScript Import Sorter	가져오기 정렬
Typescript React 코드 조각		React Typescript 스니펫
TypeSearch	TS 선언 파일 검색
버전 렌즈	package.json 파일은 모듈이 현재 버전이며 최신 버전입니다
Vue Plugin
Vue 플러그인, Vue3	지원
선택한 모듈의 홈페이지와 코드 저장소를 빠르게 엽니다.
AI 기반 코드 프롬프트
실시간 멀티플레이어 지원
파일 아이콘 확장
데이터베이스 운영, mysql 및 postgres 지원
파일 아이콘을 사용하여 파일 찾기를 용이하게 합니다
Random String Generator
Spotify 통합, 음악 재생
스타일 구성 요소 강조 표시 지원
vscode-styled-jsx	styled-jsx 강조 표시 지원
Vue Peek	Vue 구성 요소 정의 파일로 점프 지원
Vue TypeScript 스니펫	Vue Typescript 스니펫
VueHelper	Vue2 코드 스니펫(Vue 포함 2 API, vue-router2, vuex2)
Wallaby.js	실시간 테스트 플러그인
Wrap Console Log Lite

Enki 테마 플랫 UI GitHub 테마

이름	미리보기
Atom One 라이트 테마	ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

eppz!(Unity용 C# 테마)
Eva 테마


Monokai Pro
New Moon VSCode
One Dark Pro
Plastic
spacegray-vscode
Splus

三、个人首选项配置（仅供参考）

{ "breadcrumbs.enabled": true, "editor.tabSize": 2, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.renderCharacters": false, "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "editor.fontLigatures": true, "explorer.confirmDragAndDrop": false, "extensions.autoUpdate": false, "files.insertFinalNewline": true, "git.autofetch": true, "git.path": "F:\\Program Files\\Git\\cmd\\git.exe", "search.exclude": { "**/node_modules": true, "**/dist": true }, "typescript.locale": "en", "window.titleBarStyle": "custom", "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "window.zoomLevel": 1, "workbench.activityBar.visible": true, "workbench.colorTheme": "Plastic - deprioritised punctuation", "workbench.iconTheme": "vscode-great-icons", "workbench.startupEditor": "newUntitledFile", "eslint.autoFixOnSave": true, "eslint.validate": ["javascript", "javascriptreact", "vue"], "vsicons.projectDetection.autoReload": true, "vsicons.dontShowNewVersionMessage": true, "tslint.autoFixOnSave": true, "debugwrapper.wrappers": { "default": "console.log('$eSEL', $SEL)" }, "prettier.tslintIntegration": true, "cSpell.userWords": [ "Unmount" ], "jest.autoEnable": false, }

로그인 후 복사