用了这 7 个 VS Code 插件,想写一辈子代码

简介: 你知道将高级开发人员与普通开发人员区分的条件是什么吗?没错,是所使用的工具,俗话说,"工欲善其事必先利其器", 拥有正确的工作工具可以让开发人员的生活变得更加轻松,甚至想写一辈子代码。

image.png


0. 往期精彩工具推荐




译文来自 https://levelup.gitconnected.com/7-vs-code-extensions-that-make-you-want-to-keep-coding-forever-f205e597ae34

原作者 Daan

译者: 蓝色的秋风(github/hua1995116)


你知道将高级开发人员与普通开发人员区分的条件是什么吗?没错,是所使用的工具,俗话说,"工欲善其事必先利其器", 拥有正确的工作工具可以让开发人员的生活变得更加轻松,甚至想写一辈子代码。


巧的的是,与你使用的 IDE 一样, 许多开发人员将 Visual Studio Code 作为他们的首选 IDE,它有种类非常丰富的插件让你去使用。


正是由于 Visual Studio 市场上繁荣,有太多的扩展,让你目不暇接,因此我将介绍 7 个让你事半功倍的插件,这些插件让编写代码更加轻松。


即使是最简单的工具也可以使人们有能力做伟大的事情 — Biz Stone


注意,所有这些插件都可以在 Visual Studio 市场上免费安装。


1. REST Client



REST Client 插件允许您发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。向外部应用程序告别,否则你将使用外部应用程序向服务器发送 HTTP 请求。


这个是一个安装量超过一百万的插件,它非常受欢迎,已被许多开发人员使用。我已经用这个插件很长时间了,我觉得它非常地帮,极大地提高了效率。


发送请求从未如此简单。语法确实很简洁,可以使用许多选项来满足您的需求。一个简单的 GET 请求所需要的只是一行包含 GET 关键字和 URL 的代码。


再次极力推荐,你应该尝试一下 REST Client 插件。


使用方式: 右键 send Request, 或者快捷键 Ctrl+Alt+R(Cmd+Alt+R for macOS)


image.png


2. CSS Peek



如果你是 web 开发人员,那么 CSS Peek 是绝对必要的。通过此插件,您只需将鼠标悬停在元素的类名或 ID 上,即可查看应用于 HTML 中某个元素的 CSS 规则。


看一下下面的图片,可以快速看到此插件的功能。


image.png


还有一点,这个插件不只能够查看样式。它还具有"跳转"的功能,可以立即跳转到应用于该元素的 CSS 规则。这样可以节省大量时间寻找正确的选择器。


3. Beautify



如果你喜欢整洁的代码,那么绝对会喜欢 Beautify。此插件可帮助你简单地格式化代码。Beautify 支持 JavaScript,HTML,CSS,Sass 和 JSON 等。


这个插件最好的部分是所有选项都是完全可自定义的,例如缩进大小以及文件是否应以换行结尾。如果你使用多种编程语言编写代码,Beautify 可以根据每种编程语言自定义选项来帮助你格式化代码。


该扩展程序下载量超过 500 万,在大多数已安装的插件中排名前 20 位。


4. Auto Rename Tag



自动重命名标签 插件的功能很简单,但是非常好。该插件自动重命名配对的 HTML 标记。如果要重命名开始标签,它将更改相应的结束标签。反之亦然。


如果要在输入开始标签的右括号时自动添加结束标签,则应查看【👉Auto Close Tag extension】

http://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)。同时安装这两个扩展功能非常强大,可以帮助您以更高效,更一致的方式编写 HTML。


image.png


5. Quokka.js



Quokka.js 是你编辑器中的原型实验场,可以生成文件报告,内联报告等。输入时,代码中的值会在运行时更新,并显示在代码旁边的 IDE 中。


这简直太棒了!


image.png


6. Night Owl



没有令人心动的主题,优化 VS Code 的价值是什么?不大吧?由于你在 VS Code 中花费了大量的时间,因此有一个漂亮令人舒适的主题是非常重要的。


Night Owl 主题是许多开发人员使用的漂亮主题之一。根据对该主题的描述,它适合那些喜欢在深夜编写代码的人。


image.png


7. JavaScript (ES6) code snippets



我们要介绍的最后一个扩展是JavaScript (ES6) code snippets。该插件包含十几个代码片段,你可以使用它们来为你快速生成 ES6 代码片段。


例如,输入 clg 然后按Enter,将生成console.log。可能要花一些时间来熟悉所有可能的代码片段,但是一旦掌握了这些代码片段,你的编码速度就像是开了 🚀。


image.png


相关文章
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
218 2
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
162 4
|
13天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
41 1
|
24天前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
191 3
|
26天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
52 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
26 2
|
30天前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
307 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
57 2
|
1月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
184 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
|
3月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
123 5
vscode10大常用插件

热门文章

最新文章