>  기사  >  [정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

青灯夜游
青灯夜游앞으로
2022-08-31 11:51:145204검색

vim, notepad++, sublime text3,atom... 등 수많은 프런트엔드 IDE가 있지만 지구상에서 누가 가장 강력한 IDE인지는 다들 알고 있으니 당연히 더 말할 필요가 없을 것 같습니다.

저는 VSCode를 7년 넘게 사용해 온 사용자입니다. VSCode가 정식 출시된 첫해부터 사용하기 시작하여 지금까지 저는 노련한 시니어 사용자이자 생산성 마니아입니다.

이 글에서는 제가 수년간 VSCode를 사용하는 과정에서 사용해 본 좋은 플러그인들을 주로 소개합니다. [추천 학습: "vscode 입문 튜토리얼"]

네이키드 VSCode는 네이키드 Obsidian처럼 사용하기 쉽지 않다고 불평하는 사람들이 많습니다. 그 본질은 확장 기능에 있습니다. 모두 플러그인이라고 합니다) ). 잘 설정된 VSCode는 생산성 인공물인 Swiss Army Knife와 다름없습니다.

좋아, 시작해 보자!

물고기를 만져보세요


Nuggets

첫 번째는 당연하죠.

선배 너겟 플레이어로서 VSCode에서 너겟을 플레이할 줄도 모르는데 어떻게 프론트엔드 서클에 있다고 말할 수 있는 용기가 있겠습니까?

이것은 어두운 테마입니다:

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

이것은 밝은 테마입니다:

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

이것은 기사 페이지입니다:

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!
채팅 모드, Zen 모드 및 기타 기능도 있습니다. 와서 경험해 보세요. !

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

LiKou

LiKou 계정에 로그인하여 VSCode에서 직접 질문을 읽고 솔루션을 작성할 수 있습니다!

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Little Overlord

VSCode에서 게임을 플레이하고 싶으신가요? 그것은 할 수 있습니다!

하지만 저는 게임을 하지 않으며, 근무시간 중에는 게임을 하는 것을 추천하지 않습니다. 너겟을 브러싱하거나 덩크를 세게 해도 괜찮습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소 : marketplace.visualstudio.com/items?itemN…

코드 프롬프트 아티팩트, 저는 지금까지 사용해왔습니다 그 이후로 저는 기본적으로 코드를 작성할 때 손을 사용하지 않습니다.

보세요, f를 입력했더니 함수 이름, 매개변수, 매개변수 유형 등 제가 하고 싶은 모든 것이 고려되어 있었습니다.

단점은 가끔 어설프고 수수료가 든다는 점이에요.


다운로드 주소:

marketplace.visualstudio.com/items?itemN… 코드를 완성하세요. 그런데 타나인은 코파일럿보다 조금 비싸지만 상대적으로 더 많은 기능을 가지고 있습니다. 와 부조종사 중에서 선택할 수 있는데 저는 둘 다 구매했어요.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

turbo-console-log

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

JS를 작성하는 학생들에게 묻고 싶습니다. 우리가 가장 많이 작성한 코드는 무엇입니까? 그렇다면 console.log가 확실히 목록에 있습니다!
이 플러그인을 사용하면 인쇄할 변수 위로 커서를 이동하기만 하면 됩니다. ctrl+option+l을 누르면 다음 줄에 console.log가 자동으로 입력되고 파일 이름, 줄 번호, 변수 이름이 입력됩니다. 등 정보를 다 가지고 왔는데 편리하지 않나요?

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN… . 각 들여쓰기에는 서로 다른 무지개 색상이 번갈아 나타납니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

indent-rainbow-palettes[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

rainbow 들여쓰기 그라데이션 색상 팔레트. 무지개 들여쓰기를 사용하지만 다른 그라데이션 색상을 사용하고 싶다면 이 플러그인이 필요합니다! 현재 16가지 그라데이션 색상을 지원합니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

highlight-matching-tag[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

태그 강조. 복잡한 DOM 구조가 있는 경우 이 플러그인을 사용하여 닫는 태그를 강조 표시함으로써 낮은 수준의 실수를 방지할 수 있습니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

vscode-colorize[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

색상 하이라이트.

색상 변수를 배경색으로 채워 강조표시하세요.

CSS 지원:

JavaScript 지원:

또한 모든 파일 형식을 지원하므로 구성하기만 하면 됩니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN…

6-[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

vscode-todo-highlight

할일 하이라이트.

코드를 작성하다 보면 해야 할 일, 고쳐야 할 버그 등을 종종 발견하게 되는데, 지금은 완성할 시간이 없어 댓글을 남깁니다. 이러한 주석을 무시하기 어렵게 만들기 위해 이 플러그인을 사용할 수 있습니다.

기본적으로 TODO 및 FIXME 키워드가 강조 표시됩니다. 다른 키워드를 구성하고 하이라이트 색상을 설정할 수도 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

better-comments[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

댓글 강조 표시.

이 플러그인은 코드에 더욱 사용자 친화적인 주석을 삽입하는 데 도움이 됩니다.

TODO 및 FIXME 외에도 댓글에 대한 일부 유형을 정의할 수도 있습니다.

다른 유형의 댓글도 맞춤설정할 수 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

vscode-import-cost

가져온 패키지의 볼륨을 표시합니다.

JavaScript 프로젝트를 작성할 때 많은 라이브러리를 가져옵니다.

이 플러그인은 가져온 패키지의 양을 확인하는 데 도움이 됩니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

auto-close-tag

자동으로 태그를 닫습니다.

<div>를 입력하면 다음 대괄호가 자동으로 추가됩니다. <code><div> 时,它会自动把后面的括号补充好。<p>虽然很简单的功能,但却是刚需!</p> <p><img src="https://img.php.cn/upload/image/191/846/797/166191622632230%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%2050%EA%B0%9C%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20VSCode%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84%20%EB%AA%A8%EC%95%84%EC%84%9C%20%EC%82%AC%EC%9A%A9%ED%95%B4%20%EB%B3%B4%EC%84%B8%EC%9A%94!" title="166191622632230[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!" alt="[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">code-spell-checker</span></strong></p> <p>拼写错误检查。</p> <p>当我们编写代码时,偶尔会出现单词拼错的情况,这个插件可以检查到可能拼写错误的单词,并有波浪线提醒。</p> <p>它支持驼峰命名法。</p> <p><img src="https://img.php.cn/upload/image/744/455/624/166191670658301%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%2050%EA%B0%9C%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20VSCode%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84%20%EB%AA%A8%EC%95%84%EC%84%9C%20%EC%82%AC%EC%9A%A9%ED%95%B4%20%EB%B3%B4%EC%84%B8%EC%9A%94!" title="166191670658301[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!" alt="1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p> <p>智能路径感知,可以帮我们自动补充文件名。</p> <p><img src="https://img.php.cn/upload/image/345/662/845/166191673873924%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%2050%EA%B0%9C%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20VSCode%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84%20%EB%AA%A8%EC%95%84%EC%84%9C%20%EC%82%AC%EC%9A%A9%ED%95%B4%20%EB%B3%B4%EC%84%B8%EC%9A%94!" title="166191673873924[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!" alt="1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">Toggle Quotes</span></strong></p> <p>JavaScript 的字符串可以支持三种形式,单引号、双引号、尖角号,有时候我们想要拼接字符串时,需要将原来的单引号或双引号改为尖角号。使用这个插件,只需要按下快捷键 <code>cmd+'

아주 간단한 기능이지만 꼭 필요한 기능이에요!

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요![정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: 마켓플레이스 .visualstudio.com/items?itemN…

code-spell-checker

맞춤법 오류 검사기.

코드를 작성할 때 가끔 단어의 철자가 틀릴 수 있습니다. 이 플러그인은 철자가 틀린 단어를 확인하고 물결선 알림을 표시할 수 있습니다.

카멜 케이스 명명법을 지원합니다.

14 (1).gif1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: 마켓플레이스 .visualstudio.com/items?itemN…

path-intellisense

지능형 경로 감지를 통해 자동으로 파일 이름을 보완할 수 있습니다.


1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소: 마켓플레이스 .visualstudio.com/items?itemN…

Toggle Quotes


JavaScript 문자열은 작은 따옴표, 큰 따옴표 및 각도의 세 가지 형식을 지원할 수 있습니다. 때로는 문자열을 이어붙이고 싶을 때 원본을 변경해야 합니다. 작은 따옴표나 큰 따옴표를 날카로운 각도로 변환합니다. 이 플러그인을 사용하려면 단축키 cmd+'를 누르세요.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

템플릿 문자열 변환기

JavaScript 템플릿 문자열을 자동으로 변환할 수 있습니다.

ToggleQuotes와의 차이점은 자동으로 수행된다는 점입니다.

다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜HTML🎜🎜🎜🎜클래스 자동 완성 스마트 팁의 CSS 클래스 이름용 IntelliSense. 🎜다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜Tailwind CSS IntelliSense🎜🎜🎜🎜tailwind CSS의 자동 완성 스마트 팁. 🎜tailwind CSS를 사용하는 경우 HTML의 CSS 클래스 이름에 대해 IntelliSense를 비활성화할 수 있습니다. 🎜다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜npm Intellisense🎜🎜🎜🎜이 플러그인은 가져올 모듈을 지능적으로 감지하는 데 도움이 될 수 있습니다. 🎜import를 입력하면 자동으로 완료됩니다. 🎜다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜change-case🎜🎜🎜

때때로 대시, 밑줄, 모두 대문자 등과 같은 변수의 명명 규칙을 수정하고 싶을 때가 있습니다.
이 플러그인은 변수 이름을 수정하는 데 도움이 될 수 있습니다.
변수명만 수정하면 아무 소용이 없을 것 같습니다. 하지만 동시에 많은 변수 이름을 수정할 수 있다는 장점이 있습니다.

1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

중첩 댓글

중첩 댓글은 항상 문제였습니다.
중첩된 댓글은 첫 번째 댓글의 시작 부분과 결합되어 유효한 댓글이 되기 때문에 다음 부분은 무시됩니다.

1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

이 플러그인은 중첩된 댓글의 문자를 변환하는 데 도움이 되며, 외부 댓글의 차단을 해제하면 중첩된 댓글을 복원할 수 있습니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

태그 자동 이름 바꾸기

태그 이름을 자동으로 바꿀 수 있습니다. 앞이나 뒤에서 수정하시면 됩니다. 동시에.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

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

이 플러그인은 ES7/React/Redux/React-Native 등을 제공합니다. .
템플릿 코드를 빠르게 생성하고 개발 효율성을 향상시킬 수 있습니다.
예를 들어 React의 useState Hook을 사용하면 setXXX의 Camel Case 명명 방법을 자동으로 변환하고 자동으로 커서 위치로 이동할 수 있습니다.

18 (1).gif

다운로드 주소: marketplace.visualstudio.com/items?itemN…

ESLint

이 플러그인은 ESLint를 VSCode에 통합합니다. 이 플러그인을 사용하여 작업 공간.
다운로드 주소: marketplace.visualstudio.com/items?itemN…

Prettier

아주 클래식한 플러그인인 이 플러그인은 다양한 파일 콘텐츠의 형식을 지정할 수 있습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Glean

복잡한 JSX를 별도의 구성 요소나 파일로 추출할 수 있어 리팩토링 시 사용할 수 있어 매우 유용합니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

htmltagwrap

특정 DOM 태그를 래핑해야 할 때 이 플러그인은 매우 유용합니다.
DOM 태그를 선택한 다음 옵션+w를 눌러 외부 레이어에 태그를 만들 수 있습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Version Lens

프로젝트가 의존하는 npm 패키지의 최신 버전을 확인하고, 최신 버전.

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Hungry Delete

이 플러그인을 사용하면 한 번의 클릭으로 여러 개의 빈 줄을 삭제할 수 있습니다.

여러 개의 빈 줄을 삭제하려면 Option+Delete를 누르세요.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

JSON을 코드로 붙여넣기

JSON 조각을 복사할 때 다음을 기반으로 해당 JSON 구조를 생성하려고 합니다. 그러면 이 플러그인을 사용할 수 있습니다.
TypeScript, Python, Go, Java 등과 같은 다양한 프로그래밍 언어를 지원합니다.

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN… .env 파일을 사용하여 환경 변수를 저장합니다. 이 플러그인은 .env 파일을 강조 표시할 수 있습니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Dracula의 공식 테마 중 가장 클래식 테마와 내가 가장 좋아하는 테마.

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

Material 테마

Material 테마는 코드를 더욱 멋지게 보이게 해주는 Material 스타일 테마를 제공합니다.


다운로드 주소: marketplace.visualstudio.com/items?itemN…

One Dark Pro

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

Atom 사용자이거나 Atom 테마를 좋아하는 개발자라면 이 테마를 사용해 보세요. 플러그인.

다운로드 주소 : marketplace.visualstudio.com/items?itemN… 구별하기 위한 파일입니다. VSCode Icons 플러그인이 바로 이러한 작업을 수행합니다! VSCode의 기본 디렉터리 구조는 다음과 같습니다.

VSCode 아이콘을 사용한 후 아이콘은 다음과 같습니다. 2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

file-icons

또 다른 아이콘 테마 플러그인. 2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Material Icon Theme

은 거의 가장 완벽한 아이콘 테마 플러그인입니다.
다양한 종류의 파일 지원:

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다양한 종류의 폴더 지원:

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN…

Tools


todo-tree
todo 트리는 TODO 및 FIXME 댓글을 통해 프로젝트를 관리할 수 있습니다.

주석이 달린 파일을 빠르게 볼 수 있습니다.

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN… 다양한 항목을 구별하기 위한 색상입니다.

기본적으로 지원되는 색상은 Angular red, Microsoft blue, JS yellow, mandalorian blue, Node green, React blue 등입니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN… 이 플러그인을 사용하세요.

코드의 논리를 더 잘 검증할 수 있는 플레이그라운드를 제공합니다.

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 링크:

marketplace.visualstudio.com/items?itemN…3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

rest-client

API를 테스트하는 방법에는 중량급 PostMan, 경량 Curl 등 여러 가지가 있습니다. 그러나 그 중 어느 것도 VSCode에서 사용하기 편리하지 않습니다. REST 클라이언트는 VSCode에서 API를 쉽게 테스트하는 데 도움이 되는 좋은 플러그인입니다.


다운로드 주소:

marketplace.visualstudio.com/items?itemN…3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

VS Code용 EditorConfig

우리 프로젝트가 여러 편집기 도구를 사용하여 개발될 때 코드 스타일을 통일하고 싶습니다. 다양한 도구의 구성 파일을 구성해야 합니다. 이 도구를 사용하면 .editorconfig 하나만 작성하여 모든 편집기에서 이러한 규칙을 공통으로 만들 수 있습니다. 다운로드 주소:

marketplace.visualstudio.com/items?itemN…


3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!Git Lens

VSCode에는 Git 기능이 내장되어 있지만 충분히 강력하지는 않습니다.

Git Lens는 Git의 기능을 추가하고, 각 코드 줄에서 커밋 정보를 볼 수 있으며, 다양한 커밋 간의 차이점과 기타 유용한 Git 기능을 비교할 수도 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…



GitHub에서 열기

Github에서 프로젝트, 파일, 액션, PR 등을 빠르게 열 수 있습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

브라우저에서 열기

브라우저에서 HTML 파일을 빠르게 열 수 있도록 지원합니다.
HTML 파일을 마우스 오른쪽 버튼으로 클릭하면 메뉴에 두 가지 옵션이 있거나 해당 단축키를 사용할 수 있습니다.

4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN… 플러그인 . 로컬에서 서버를 시작하고, 파일 변경 사항을 모니터링하고, 브라우저를 새로 고칩니다.

HTML 파일을 마우스 오른쪽 버튼으로 클릭하면 메뉴에 두 가지 옵션이 있거나 해당 단축키를 사용할 수 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…



Live Preview4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

VSCode에서 HTML을 실시간으로 미리 볼 수 있습니다. 그러나 React 및 Angular와 같은 프레임워크로 개발된 애플리케이션은 지원하지 않습니다.

다운로드 주소 : marketplace.visualstudio.com/items?itemN… 태그 및 기타 기능.


다운로드 주소: 4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!marketplace.visualstudio.com/items?itemN…

Live Share

실시간 공동 편집 및 디버깅을 위해 다른 사람과 코드를 공유하고 싶으신가요? 이 플러그인은 모든 프로그래밍 언어 또는 모든 유형의 프로젝트로 개발된 프로젝트를 다른 사람들과 공유할 수 있습니다. 별도의 환경이나 SDK 설치 없이 상대방이 귀하의 환경에서 직접 코드를 작성할 수 있습니다. 웹에서 직접 공동작업하고 편집할 수도 있습니다!

4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소 :

marketplace.visualstudio.com/items?itemN…

Markdown PDF이름은 마크다운 PDF이지만, 마크다운은 실제로 다양한 형식의 파일로 내보낼 수 있습니다.

다양한 내보내기 형식을 지원합니다.


4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN…

Markdown 미리보기 Github 스타일링Github 스타일로 Markdown 파일 미리보기.


다운로드 주소: 4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!marketplace.visualstudio.com/items?itemN…

Summary

가장 많이 소개되었습니다. 가장 빠르고 안정적이며 가장 적합한 IDE를 구축해 보세요! 이 글이 도움이 되셨다면 좋아요 부탁드립니다. 더 실용적이고 가치 있는 VSCode 플러그인이 있다면 댓글란에 메시지를 남겨주세요.

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

Python Java JavaScript typescript json css postman html npm angular String for cURL auto 字符串 class delete JS console dom github git ide vim vscode visualstudio 重构 bug copilot atom
성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사:[요약 공유] 일반적으로 사용되는 프런트엔드 및 백엔드 인증 방법 10가지, 더 이상 헷갈리지 마세요다음 기사:[요약 공유] 일반적으로 사용되는 프런트엔드 및 백엔드 인증 방법 10가지, 더 이상 헷갈리지 마세요

관련 기사

더보기