VisualStudioCode（又称VSCode）是一款轻量级但功能强大的跨平台源代码编辑器，内置对TypeScript和Chrome调试器等开发工具的支持，越来越多开发人员喜欢使用它。如果你正在寻找更有用的VsCode工具，那么这篇文章或许能帮到你。这里有2019年26个令人难以置信的VSCode工具，供JS开发人员使用。1.ProjectSnippets（代码片段）项目片段，这是我最喜欢的工具之一，它来自VSCode内置的原始用户代码片段。此功能允许您创建自己的代码片段以在整个项目中重复使用。但“重用”它们究竟意味着什么？如果我们经常要重复这样写样板文件：其实我们可以把上面的代码直接放到用户代码片段中，这样就不用写（或者复制粘贴）整个片段了，只需要打一个自定义前缀即可生成配置的片段。打开VsCode，然后选择文件>首选项>用户代码片段，您可以通过单击“新建全局代码片段文件”来选择创建新的全局代码片段。例如，要为TypeScriptReact项目创建您自己的代码片段文件，您可以单击新建全局代码片段文件并导入typescriptreact.json。它将引导我们找到一个新创建的.json文件，该文件可用于使用TypeScript构建React应用程序。例如，要从上面的代码示例中创建一个用户片段，请执行以下操作：有了它，我们可以创建一个新的以.tsx结尾的TypeScript文件，在新创建的文件中输入rsr，然后按enter或tabVscode它会帮助我们生成代码片段内容。全局用户代码片段的问题在于它将运行在我们所有的项目中（在某些情况下，这对于一般代码片段来说非常强大）。有些项目会配置不同，配置snippets的全局文件在需要区分具体用例的时候就成了问题。例如，当每个项目的项目结构不同时，这对于具有特定文件/文件夹结构的项目来说可能就足够了，但是如果我们正在处理另一个项目，其中Link组件的路径类似于components/Link呢？请注意三个边框测试如何将它们的值括在单引号中：border:'1pxsolidred'。这在JS中是完全有效的，但是如果您使用styled-components作为项目的样式解决方案呢？该语法不再适用于该工作区，因为样式化组件使用普通的CSS语法。这就是项目片段大放异彩的地方。项目片段允许我们在项目/工作区级别声明代码段，这样当前项目代码段就不会与其他项目冲突或污染。2.BetterComments（更人性化的注释）如果你喜欢在你的代码中写注释，那么有时你可能会发现搜索你之前写过的特定注释的位置很令人沮丧，因为代码可能会变得有点拥挤。借助BetterComments，可以通过引入彩色评论使评论更加明显。3.BracketPairColorizer（标签匹配括号匹配插件）第一次看到BracketPairColorizer的截图，立马安装使用。4.MaterialThemeMaterialTheme是史诗般的主题，可以直接安装到VSCode中。安装后，代码如下所示：5.@typescript-eslint/parser如果你是TypeScript用户，你应该开始考虑将你的TSLint配置移动到OnESLint+TypeScript，TSLint背后的支持者已经宣布计划在某个时候弃用TSLint今年。项目正在逐步采用@typescript-eslint/parser和相关包，以确保其项目的前瞻性设置。我们仍然可以利用ESLint的大部分规则和与新设置的更漂亮使用的兼容性。6.Stylelint对我来说，stylelint在我的所有项目中都是必不可少的，原因如下：它有助于避免错误。它强制执行CSS中的样式约定。它与Prettier支持密切相关。它支持CSS/SCSS/Sass/Less。它支持社区编写的插件。7.Markdownlint+docsifyMarkdown爱好者一定要试试vscode上的markdownlint扩展，它会用绿色波浪线提示你N多地方不符合写作标准，例如：标题下面必须有一个空行，代码segment必须加上typetext这种html标签的url不能出现，必须用<>展开。它也可以与docsify一起安装，因为它支持每个项目的Markdown和其他增强功能。8.TODOHighlight如果你是一个习惯在应用程序代码中编写待办事项的开发者，你可以安装一个像TODOHighlight这样的扩展，它对于高亮显示整个项目中设置的待办事项非常有用。9.ImportCostImportCost可以显示我们在VS代码编辑器中导入的包的大小。10.高亮匹配标签有时，尝试匹配标签的结尾可能会令人沮丧。这时候，HighlightMatchingTag就派上用场了。11.vscode-spotify程序员经常一边听歌一边敲代码。太丑了，要切换还得切换到音乐播放器，再回到VsCdoe界面，有点麻烦。这就是vscode-spotify派上用场的地方，因为它可以直接在VSCode中使用音乐播放器。有了这个扩展，你可以在状态栏中看到当前正在播放的歌曲，用热键在歌曲之间切换，点击按钮来控制音乐播放器等等。12.GraphQLforVSCodeGraphQL一直在发展，我们在JS社区也经常能看到它的身影。所以开始考虑在VSCode中安装GraphQLforVSCode是个好主意。13.Indent-RainbowIndent-Rainbow会给缩进加上颜色，让你更直观的看到代码层级。14.ColorHighlightColorHighlight可以高亮显示代码中的颜色，如下图：15.ColorPickerColorPicker是VSCode的一个扩展，它为我们提供了一个图形用户界面来选择和生成颜色代码，例如CSS颜色符号。16.RESTClient当我第一次看到RESTClient并尝试使用它时，与Postman等现有软件相比，它似乎并不是一个非常有用的工具。然而，您对REST客户端扩展的使用了解得越多，您就越能意识到它对您的开发工具的影响有多大，尤其是在测试API时。只需创建一个新文件并写入以下行：https://google.com然后转到命令面板（CTRL+SHIFT+P），单击RestClient：Sendrequest，它会弹出一个包含请求响应New详细信息选项卡，非常有用：您甚至可以通过几行代码向POST传递参数或请求正文数据：POSThttps://test.someapi.com/v1/account/user/login/Content-Type:application/json{"email":"someemail@gmail.com","password":1}会发送一个POST请求，参数为{"email":"someemail@gmail.com","password":1}。17、设置Syncvscode里面有各种插件。如果要在不同的电脑上使用vscode配置，是一件很麻烦的事情。使用SettingsSync备份vscode配置。当你需要在其他电脑上使用vscode时，只需下载备份配置即可。我们只需要一个GitHub账号，每次想要保存配置（包括按键绑定、代码片段、扩展等），只需要按下SHIFT+ALT+U就可以将私有设置上传到GitHub账号。然后，下次登录或重新格式化到另一台计算机时，您可以按SHIFT+ALT+D组合键立即下载配置。18.TodoTreeTodoTree将帮助我们找到整个应用程序代码中创建的所有todo。它会将它们放在一棵树中，您可以在面板左侧同时查看它们19.ToggleQuotesToggleQuotes是一个有趣的实用程序扩展，它允许我们在引号之间切换。当您在使用字符串插值时需要切换到反引号时，这会派上用场。20.BetterAlignBetterAlign对齐赋值符号和注释。要使用它，请将光标放在要对齐的代码中，使用CTRL+SHIFT+P打开命令面板（或使用自定义快捷方式打开命令面板），然后调用对齐命令。21.AutoCloseTagAutoCloseTag自动关闭html标签。22.SortLinesSortlines可以帮助我们对选中的线进行排序。23.VSCode谷歌翻译如果是涉及多语言开发的项目，VSCode谷歌翻译可以帮助我们快速切换语言。24.PrettierPrettier是VSCode的扩展，可以自动格式化JavaScript/TypeScript等，让代码更美观。25.MaterialIconTheme相比其他图标主题，我更喜欢MaterialIconTheme，因为文件类型更明显，尤其是在使用深色主题时。26.HTML中CSS类名的IntelliSenseHTML中CSS类名的IntelliSense，基于在工作区中找到的定义，并提供CSS类名完成。27.PathIntellisensePath智能路径自动补全。
