코딩을 재미있게 만들어 줄 유용한 VSCode 확장 도구 8가지!

올바른 도구를 사용하면 개발 작업이 더 쉬워질 수 있습니다. 많은 개발자들이 VSCode를 개발 도구로 사용하고 있으며, VSCode를 사용하면 다양한 확장 도구를 설치할 수 있습니다. [권장: vscode 기본 튜토리얼]VSCode 作为开发工具，VSCode 允许安装各种扩展工具。【推荐：vscode基础教程】

Visual Studio Marketplace 上有太多的可用扩展工具，我们将着重介绍下面8个扩展工具。

即使是最简单的工具也能赋予人们力量去做伟大的事情--比兹·斯通

所有这些插件都可以在 Visual Studio Marketplace 上免费获得。

1. REST Client

REST Client 扩展工具允许你发送 HTTP 请求并直接在 VSCode 中查看响应。再也不需要使用外部应用程序向服务器发送 HTTP 请求。

这是一个非常流行的扩展工具，得到众多开发人员的青睐，获得了超过 100W 次的安装。另外我自己也使用这个插件已经有一段时间了，我觉得它很棒。

发送请求变得如此容易。语法非常简洁，并且提供了很多选项以满足你的需求。简单的 GET 请求只需要一行代码，GET 关键字后跟 URL 即可。

你真的应该尝试一下 REST Client 扩展工具。

2. CSS Peek

如果你是一个 web 开发人员，CSS Peek 绝对是必要的。有了这个扩展工具，将鼠标悬停在元素的类名或元素ID上，就可以看到应用于这个元素的 CSS 规则。

如下图所示：

这个扩展工具不仅仅允许你查看样式。它还有一个“转到”特性，允许你立即跳转到应用于元素的 CSS 规则。这为你节省了大量寻找正确选择器的时间。

3. Beautify

如果你喜欢整洁的代码，那么你肯定会喜欢 Beautify。

Beautify 支持 JavaScript，HTML，CSS，Sass 和 JSON。

这个扩展的最大优点是所有选项都是完全可定制的--比如缩进大小和文件是否应该以新行结尾。如果你用几种编程语言编写代码，那么 Beautify 可以涵盖。可以自定义每种编程语言的选项。

该扩展工具的下载量超过500W次，在最受欢迎的已安装扩展工具中排名前20位。

4. Auto Rename Tag

Auto Rename Tag 扩展工具所做的工作很简单，但是很好用。该扩展工具将自动重命名成对的 HTML 标签。如果你正在重命名一个开始标签，它将更改相应的结束标签；反之亦然。

如果你想在开始标签的结束括号中键入时自动添加结束标签，你应该看一看 Auto Close Tag 扩展工具。安装这两个扩展非常有用，将帮助你以更高效和一致的方式编写 HTML。

5. Quokka.js

Quokka.js

Visual Studio Marketplace 거기 사용할 수 있는 확장 도구가 너무 많기 때문에 다음 8가지 확장 도구에 중점을 둘 것입니다.

가장 간단한 도구라도 사람들이 위대한 일을 할 수 있도록 지원합니다 - Biz Stone

이 모든 플러그인은 Visual Studio Marketplace에서 무료로 제공됩니다.

1. REST 클라이언트

REST 클라이언트 확장 도구를 사용하면 HTTP 요청을 VSCode에서 직접 보낼 수 있습니다. code > 응답을 보려면 더 이상 외부 애플리케이션을 사용하여 서버에 <code>HTTP 요청을 보낼 필요가 없습니다.

이것은 많은 개발자들이 선호하는 매우 인기 있는 확장 도구이며 백만 번 이상 설치되었습니다. 또한 나는 한동안 이 플러그인을 직접 사용해 왔는데 정말 좋다고 생각합니다.

요청 보내기가 너무 쉬워졌습니다. 구문은 매우 간결하며 필요에 맞는 다양한 옵션을 제공합니다. 간단한 GET 요청에는 코드 한 줄만 필요합니다. GET 키워드 뒤에 URL이 옵니다.

REST 클라이언트 확장 도구를 꼭 사용해 보세요. 🎜

2. CSS Peek🎜🎜 웹 개발자라면 CSS Peek은 꼭 필요합니다. 이 확장 프로그램을 사용하면 요소의 클래스 이름이나 요소 ID 위로 마우스를 가져가면 해당 요소에 적용된 CSS 규칙을 볼 수 있습니다. 🎜🎜아래와 같이: 🎜🎜🎜🎜🎜🎜이 확장 도구를 사용하면 스타일을 볼 수 있을 뿐만 아니라. 또한 요소에 적용된 CSS 규칙으로 즉시 이동할 수 있는 "이동" 기능도 있습니다. 이렇게 하면 올바른 선택기를 찾는 데 많은 시간이 절약됩니다. 🎜

3. Beautify🎜🎜클린 코드를 좋아한다면 분명히 Beautify를 좋아할 것입니다. 🎜🎜Beautify는 JavaScript, HTML, CSS, Sass 및 를 지원합니다. JSON. 🎜🎜이 확장 프로그램의 가장 좋은 점은 들여쓰기 크기, 파일이 새 줄로 끝나야 하는지 여부 등 모든 옵션을 완전히 사용자 정의할 수 있다는 것입니다. 여러 프로그래밍 언어로 코딩하는 경우 Beautify가 해결해 드립니다. 각 프로그래밍 언어에 대한 옵션을 사용자 정의할 수 있습니다. 🎜🎜이 확장 프로그램은 500만 번 이상 다운로드되었으며 가장 인기 있는 설치된 확장 프로그램 상위 20개 중 하나입니다. 🎜

4. 태그 자동 이름 바꾸기🎜🎜태그 자동 이름 바꾸기 확장 도구로 수행되는 작업은 매우 간단하지만 매우 유용합니다. 확장 프로그램은 HTML 태그 쌍의 이름을 자동으로 바꿉니다. 여는 태그의 이름을 바꾸면 해당하는 닫는 태그도 바뀌고 그 반대도 마찬가지입니다. 🎜🎜여는 태그의 닫는 괄호 안에 입력할 때 자동으로 닫는 태그를 추가하려면 자동 닫기 태그 확장을 살펴보세요. 이 두 확장 프로그램을 설치하면 매우 유용하며 HTML을 보다 효율적이고 일관된 방식으로 작성하는 데 도움이 됩니다. 🎜🎜🎜🎜🎜

5. Quokka.js🎜🎜Quokka .js는 프로젝트 파일, 인라인 보고서 등에 대한 액세스를 제공하는 편집기의 프로토타입 플랫폼입니다. 코드의 값은 런타임에 업데이트되고 입력하는 대로 IDE의 코드 옆에 표시됩니다. 🎜🎜 정말 대단해요! 🎜🎜🎜🎜🎜🎜🎜🎜6. Night Owl🎜🎜멋진 테마 없이 VS Code를 최적화하면 어떤 가치가 있나요? 별로 많지 않죠? ! VS Code에 너무 많은 시간을 투자했기 때문에 테마를 설치하여 좀 더 보기 좋게 만드는 것이 좋습니다. 🎜🎜Night Owl 테마는 많은 개발자들이 사용하는 아름다운 테마입니다. 이 테마에 대한 설명에 따르면, 늦은 밤까지 코딩하는 것을 좋아하는 사람들을 위해 미세 조정되고 최적화되었습니다. 🎜🎜🎜🎜

Night Owl 테마가 마음에 들지 않으면 Pink Cat Boo, Panda Syntax, Mini Dark를 사용해 보세요. code>, 가티토 테마, One Monokai 테마 색상도 너무 예쁘네요~Night Owl 主题，安利一下： Pink Cat Boo， Panda Syntax, Mini Dark, Gatito Theme, One Monokai，这几个主题色也很好看~

7. JavaScript (ES6) code snippets

最后一个要介绍的扩展工具是 JavaScript (ES6) code snippets 扩展工具。该扩展工具有多个代码片段，可供您来生成ES6代码片段。
例如，键入clg然后按回车可以得到一个console.log。可能您需要一段时间来熟悉所有的代码片段，但是只要掌握了它，您就能非常快的打出ES6代码

8. TabNine

TabNine 是我用过的最好的代码补全工具，TabNine

7. JavaScript(ES6) 코드 조각 h3>마지막으로 소개할 확장 도구는 JavaScript(ES6) 코드 스니펫 확장 도구입니다. 확장 프로그램에는 ES6 코드 조각을 생성하는 데 사용할 수 있는 여러 코드 조각이 있습니다.

예를 들어 clg를 입력하고 Enter를 누르면 console.log가 표시됩니다. 모든 코드 조각에 익숙해지는 데는 시간이 걸릴 수 있지만 일단 익히면 ES6 코드를 매우 빠르게 입력할 수 있습니다

8. TabNine

TabNine 은 제가 사용해 본 최고의 코드 완성 도구입니다. TabNine은 인공 지능을 기반으로 한 자동 코드 완성 도구입니다. TabNine은 자동 완성 중에 각 후보자에게 항목을 제공합니다. 또한, 후보 항목의 출처와 주소가 제공되어 조회 및 읽기가 더 쉽습니다. 지금까지 30W 이상 다운로드되었습니다.

알겠습니다. 이것을 본다면 진정한 사랑에 빠졌다는 뜻입니다. 내 Github

에 별표를 추가하시겠습니까?

관련 추천: 🎜프로그래밍 교육🎜! ! 🎜🎜

위 내용은 코딩을 재미있게 만들어 줄 유용한 VSCode 확장 도구 8가지!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!