乐趣区

关于javascript:30-个极大提高开发效率超级实用的-VSCode-插件

jiezi

Visual Studio Code 的插件对于在晋升编程效率和放慢工作速度十分重要。这里有 30 个最受欢迎的 VSCode 插件，它们将使你成为更高效的搬砖摸鱼巨匠。这些插件次要实用于前端开发人员，但也有一些通用插件也能够实用于任何开发环境。以下是我将介绍的 VSCode 插件：

  1. Settings Sync
  2. Live Server
  3. Remote SSH
  4. Prettier
  5. Bracket Pair Colorizer
  6. Auto Rename Tag
  7. GitLens
  8. Git History
  9. CSS Peek
  10. Javascript Code Snippets
  11. Peacock
  12. Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
  13. Code Spell Checker
  14. Chrome 调试器
  15. Material Icon Theme
  16. Turbo Console Log
  17. TODO highlight
  18. VSCode Icons
  19. Chrmarti Regex
  20. Bookmarks
  21. Tabnine
  22. Import Cost
  23. Quokka
  24. ESLint
  25. Visual Studio IntelliCode
  26. SQLTools — Database tools
  27. Better Comments
  28. Vue 3 Support – All In One
  29. HTML/CSS/JavaScript Snippets
  30. Search/Translate Hero – Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine

Settings Sync

Settings Sync 可为你节俭大量跨设施装置插件的工夫

在开始左右装置插件之前，最好晓得 Settings Sync 的存在。它容许你将在 VSCode 上自定义的简直所有内容同步到 Github，从设置到键盘快捷键到其余 VSCode 插件。

这样，你就能够从任何你想要的设施拜访你喜爱的 IDE，而不用在新设施上从一般
VSCode 环境中进行编程，也不用再次手动设置所有内容。

Live Server

立刻查看浏览器中反映的代码更改

这是我最喜爱的插件之一。Live Server 启动本地开发服务器，并为动态和动静页面提供实时从新加载性能。

每次保留代码时，你都会立刻看到浏览器中反映的更改。你会更快地发现错误，并且能够更轻松地对你的代码进行一些疾速试验。

Tabnine

Tabnine 是一款广受欢迎的 VSCode 人工智能助手，实用于所有次要编程语言，因而毫无疑问，无论你的技能如何，你都会发现它很有用。

通过钻研公开共享的代码库，Tabnine 应用深度学习算法来预测你的需要，并提供一键代码实现性能，让你能够疾速高效地实现我的项目。对于老手编码员来说，这让学习变得轻而易举，因为它为你提供了施展想法的空间，而无需记住编码语法或搜寻 StackOverflow。

而且，如果你是一位经验丰富的开发人员，那么你会发现 Tabnine 为你提供了运行所需的构建块，从而为你的工作节俭了大量工夫。

Remote SSH

应用任何带有 SSH 服务器的近程机器，该 SSH 插件能够让你应用任何近程计算机与 SSH 服务器作为开发环境。这使得在各种场景中开发和或故障排除变得更加容易。

你也不须要本地机器上的任何源代码，因为插件间接在近程机器上运行命令和其余插件。

Prettier

花更少的工夫格式化代码

Prettier 是一个自以为是的代码格式化程序，如果你有多人在一个我的项目上工作，它会特地无效，因为该插件强制执行统一的款式。

你能够对其进行设置，以便在每次保留代码时格式化你的代码，从而显着缩小你花在格式化代码上的工夫。

Bracket Pair Colorizer

每个人都喜爱对代码着色，Bracket Pair Colorizer 提供了匹配色彩的左括号和右括号，从而更容易晓得哪些括号属于谁。

还能够配置自定义括号字符，你也能够为流动范畴增加背景色彩。

Auto Rename Tag

主动重命名标签，尽管 VSCode 固有地突出显示匹配的标签并在你键入开始标签时立刻增加完结标签，但主动重命名标签插件会主动重命名你更改的标签。

该插件实用于 HTML、XML、PHP 和 JavaScript，无需更改标签名称两次。

GitLens

加强你的 Git 能力 GitLens 加强了 Visual Studio Code 的 Git 性能。这是一个弱小的插件，可让你查看代码行随工夫变动的人、起因和形式以及许多其余性能。

GitLens 是一个高度可定制的插件。如果你不喜爱某个特定设置，你能够在设置中轻松将其敞开。

Git History

取得 git 日志，并显示丑陋的视觉效果

与 GitLens 相似，Git History 是一个 VSCode 插件，它提供了 git 日志的可视化。你不须要再终端中查看 git log。

插件也十分全面。它容许你跨提交比拟分支、提交和文件。也能够查 Github 头像，挺整洁的。

Vue 3 Support – All In One

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VSCode 插件，能极大进步你的开发效率。你能够在 VSCode 编辑器底部栏右下角关上 Auto Format Vue 开关，它可能帮你在代码保留的时候主动格式化 vue 文件的格局，默认是敞开状态。

如果你不想主动格式化 vue 文件，你也能够在 vue 文件中点击鼠标右键，在呈现的菜单栏中抉择 Format Document 菜单项，则文件会执行一次格式化。

CSS Peek

插件你的 HTML 文件以查看你的 CSS 代码

这个插件对于前端开发人员来说是无价的。受 IDE Brackets 中相似性能的启发，CSS Peek 容许你插件 HTML 和 ejs 文件以在源代码中显示 CSS/SCSS/LESS 代码。

如果你晓得类或 ID 名称，它还容许你疾速跳转到对应 CSS 代码的地位。

Javascript Code Snippets

提供很多 JS 代码块提醒，尽管 VSCode 包含内置的 JS IntelliSense，但 JS 代码片段插件通过增加大量导入、导出触发器、类助手和办法触发器来加强这种体验。

该插件反对 JS、TypeScript、JS React、TS React、HTML 和 Vue。在 VSCode Marketplace 中，也能够轻松取得其余格调（例如 Angular）的代码片段。

HTML/CSS/JavaScript Snippets

只需输出前缀名称，就会主动实现残缺的代码片段。

Search/Translate Hero – Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine

一款让您在代码中进行搜寻或者翻译的 VSCode 插件。你能够在编辑器中，选中代码中对应的关键词，而后点击鼠标右键，在呈现的菜单面板中抉择 Search Online 菜单项，插件会主动帮你关上默认浏览器，并搜寻对应的关键词和显示搜寻后果。

你还能够选中对应的关键词后，应用快捷键去关上浏览器进行搜寻。

Peacock

更改 VSCode 实例的色彩，十分实用。Peacock 容许你更改 Visual Studio Code 环境的色彩，因而你能够疾速辨认刚刚切换到的实例。

Colorize

查看你在格调指南中应用的色彩，应用 Colorize 立刻将 CSS/SASS/Less/… 文件中的 CSS 色彩可视化。这使得高深莫测地看到你在何处应用了哪些色彩变得非常容易。

Code Spell Checker

让你代码不再有拼写错误，尽管拼写错误不是致命问题，但我更喜爱我的代码没有拼写错误。代码拼写查看器插件在其字典文件中无奈辨认的单词下划线。

该插件有许多不同的语言版本，并反对医学术语等行话。

Debugger For Chrome

在 VSCode 中调试你的 JS 代码，由 Microsoft 开发的 Debugger for Chrome 容许你在 VSCode 中调试你的 JS 代码。与其余 IDE 中的调试器相同，它十分晦涩。

你能够设置断点、逐渐执行代码、调试动静增加的脚本等等。

Icon Fonts

提供各种图标供你应用！Icon Fonts 提供了各种图标字体的片段，包含风行的 Font Awesome v5 图标包。

对于那些不应用 VSCode 的人，这个包也可用于 Atom 和 Sublime Text。

Turbo Console Log

主动创立有意义的日志音讯，该控制台显示日志 \ 插件主动创立一个有意义的日志信息的过程。它使调试更容易，因为你将有一些有用的控制台输入来找出问题所在。

Todo Highlight

立刻发现代码中的 TODO，很多程序员习惯在代码中写 TODO，而后齐全遗记它们。Todo Highlight 使它们更加突出。

你能够切换突出显示，也能够列出所有突出显示的正文并从相应的文件中显示它们。

VSCode Icons

等等，不是每个人都喜爱图标吗？你不会认为图标有很大的不同，但它们的确有至多对我来说。VSCode Icons 为你的 IDE 削减了一抹色调和可恶的小图标，我曾经爱上了它。

Regex Previewer

创立正则表达式的预览，正则表达式可能是一个很艰难的难题。Regex Previewer 为你提供与你的正则表达式匹配的辅助文档。

该插件提供了多个示例进行匹配，因而为各种用例疾速精确地编写正则表达式变得更加容易。

Bookmarks

为你的代码增加书签，只管 VSCode 有行号，但 Bookmarks 容许你在代码中增加书签，帮忙你疾速导航并轻松来回跳转。

Import Cost


当你开发 Web 应用程序或网站时，很容易制作一些臃肿的货色——尤其是作为一个老手开发者。这其中的一个重要因素是，许多开发人员在通过代码导入时并不总是晓得包有多大。

Import Cost 是一个 VSCode 扩大，能够内联显示导入包的大小，因而你能够确切地晓得在开发过程中导入该包的老本是多少。因而，它将帮忙你更好地优化你的应用程序和网站，特地是对于通常因收缩而蒙受更多苦楚的移动用户。

Quokka


如果你抉择的语言是 JavaScript 或 TypeScript，那么你肯定会喜爱 Quokka.js。此扩大旨在通过在编写代码时在 IDE 中显示运行时值来放慢开发速度，因而你能够专一于编写代码，而不是仅仅为了尝试新事物而构建自定义配置。

这是一个简略、轻量级的扩大，非常适合经验丰富的开发人员和老手。它也能够收费供社区应用，但如果你是 JavaScript/TypeScript 专家，你还能够购买 Pro 许可证，让你无需更改代码即可批改运行时值。

ESLint

如果你须要格式化程序和标准代码，那么这个插件适宜你。
它能够主动格式化你的代码并查找代码中的谬误。

此外，它容许你在书签代码之间抉择代码区域，这对于日志文件剖析等十分有用。

Visual Studio IntelliCode

它旨在帮忙开发人员和程序员提供智能代码实现倡议。
它默认反对 Python、TypeScript/JavaScript、React 和 Java。

SQLTools — Database tools

通过 VSCode 治理数据库的工具。
它反对许多驱动程序，你能够应用它来做很多事件，例如连贯资源管理器、查问运行程序、智能感知、书签、查问历史记录。

Better Comments

Better Comments 扩大将帮忙你在代码中创立更人性化的正文。
每种色彩都能够作为示意评论类型（留神、待办事项等）的一种形式。

最初

这是我集体介绍的 30 个 VSCode 插件，可在不影响品质的状况下进步你的编程效率。，如果文章和笔记能带您一丝帮忙或者启发，请不要悭吝你的赞和珍藏，文章同步继续更新，往期文章也收录在 https://github.com/Wscats/CV
欢迎您的关注和交换，你的必定是我后退的最大能源 😁

退出移动版