VSCode扩展使JavaScript和Vue开发更容易

迄今为止，有足够的开发工具支持JavaScript语言和基于它的框架。 选择特定工具的问题不在本文讨论范围之内，我将立即尝试描述我对Visual Studio Code和旨在使JS开发人员（尤其是使用Vue的开发人员）的工作更加轻松的工具的用户体验。

VSCode扩展商店中有很多插件，下面列出了用于Web开发的最方便的插件。

HTML和CSS

布局和书写风格通常是一项单调的任务，因此以下扩展可以简化并加快您的工作：

• 自动关闭标签和自动重命名标签 -简单方便的扩展名，以简化布局工作，并支持单文件组件Vue。
• CSS Peek是一个简单的扩展，增加了快速查看或导航规则的功能。
• 颜色信息 -允许您查看有关颜色的详细信息，具有很好的设置余量。
• 颜色高亮显示 -如果在代码中检测到颜色编码，则以边框形式添加颜色显示 。
• HTML中的IntelliSense CSS类名称 -分析工作环境以添加自动完成CSS类的功能。

Java脚本

• Chrome的Debbugger-一种扩展程序，可直接从代码编辑器直接简化调试，可与Chrome DevTools的所有功能配合使用。
• JavaScript（ES6）代码段 -一组JS 代码段 ，极大地加快了开发速度。
• JSHint -JS代码设计和组织技巧的扩展，具有灵活的设置。
• ESLint是用于JS的linter ，具有灵活的设置。

Vue

没有很多适合使用Vue的扩展，以下是一些最有用的扩展：

• Vetur是一整套使用vue的最必要的附加组件，例如代码片段，语法突出显示。
• Vue Peek-向Vue组件添加方便的过渡。

吉特

VSCode支持开箱即用地使用git，但是内置功能仍然并不总是足够的。 以下是扩展，将使使用git更加容易：

• GitLens可能是使用git时最著名的扩展，它增加了许多查看git信息的功能。
• Git历史记录 -增加了方便地查看git更改历史记录的功能，具有相当方便的界面。
• Git指示器 -下部VSCode托盘中的git活动的简单指示器。

工作环境与发展过程

对于富有成效的工作，最好以附加组件的形式提供帮助，以突出简单的错误，建议写作风格和其他方便的提示/操作。 尝试以下扩展：

• 括号对着色器 -在围绕代码块的括号中添加半亮，通过深层嵌套，直观地分离代码来促进对代码的感知。
• 我认为Beautify是自动代码样式设置的最便捷扩展，有关更多详细信息，请参见链接。
• Live Server是非常有用的扩展，可让您快速启动实时服务器，例如进行布局。
• 导入成本是一个出色的扩展，可以显示导入模块的大小，使您可以更详细地选择模块的导入部分，而无需借助捆绑分析器。
• NPM Intellisense -npm模块的自动完成。
• 在浏览器中打开是一个简单的扩展，可以在浏览器中添加一个打开点。
• 路径Intellisense-自动完成文件名及其位置。
• 设置同步 -完成必要工具的安装并设置好环境后，可以方便地保存配置，此扩展程序可让您同步git gist中的所有内容。
• 对行进行排序 -一种根据给定条件在代码中组织行排序的简便方法。
• TODO Highlight是用于突出显示关键字（例如TODO，FIXME）的简单扩展。
• 尾随空格 -突出显示多余的空格。
• VS Live Share-许多人不得不长时间向远程开发人员解释哪里出了什么问题以及出了什么问题时，遇到了一个问题，此扩展程序简化了这种情况下的工作，使您可以进行实时演示，支持多个用户的工作，将运行环境转发给客户端计算机。
• Visual Studio IntelliCode-使用 Python，TypeScript / JavaScript和Java等语言为开发人员自动执行常规任务。

编辑设计

• Darcula Theme-我认为最成功的设计，我也可以为Monokai Pro提供建议。
• vscode-icons是VSCode最成功的图标包。

这也可能很有趣。

• GraphQL for VSCode - GraphQL的一种智能感知，最方便的扩展，在链接上有很多有用的知识，更多。
• Instant Markdown-降价标记的实时预览。
• 将JSON作为代码粘贴是一个方便的扩展，可以从JSON数据生成类型模型。 支持TypeScript，Python，Go，Ruby，C＃，Java，Swift，Rust，Kotlin，C ++，Flow，Objective-C，JavaScript，Elm和JSON Schema。
• Rainbow CSV -CSV文件的背光。
• Regex Previewer是用于常规预览的非常有用的扩展。
• SVG Viewer -SVG查看器。

希望这份清单对您有所帮助，我很乐意补充。