VisualStudioCode（也称为VSCode，https://code.visualstudio.com/）是一个功能强大的轻量级跨平台桌面源代码编辑器。得益于其对TypeScript和Chrome开发者工具的内置开发者工具支持，这个编辑器会随着您的使用而变得越来越有趣。谁不喜欢每个人都可以使用和修改的无限可扩展的开源代码？希望本文能帮助您找到新工具来扩展您的开发工具箱。虽然并非所有以下工具都是特定于JavaScript语言的，但它们都是JavaScript开发人员感兴趣的。以下是2019年JavaScript开发者的27个惊人的VSCode工具。1.项目代码片段第一个项目代码片段（https://marketplace.visualstudio.com）源自VSCode内置的用户代码片段（https://code.visualstudio）.com/docs/editor/userdefinedsnippets)/items?itemName=rebornix.project-snippets)。此功能允许开发人员创建自己的代码片段并在项目中重复使用它们。但“重用”到底是什么意思呢？如果开发者经常这样写样板代码：>{const[state,dispatch]=useReducer(reducer,initialState)return{...state,}}exportdefaultuseSomeHook开发者可以直接将这段代码放在“用户代码段”中，通过打自定义前缀生成代码段进行设置，无需重写或复制粘贴整个代码片段。您可以通过转到文件>首选项>用户代码段并单击新建全局代码段文件来选择和创建新的打开代码段。比如你想新建一个TypeScriptReact项目，可以点击NewGlobalSnippetsFile，输入文件名typescriptreact.json，输入新建的json文件，使用TypeScript语言创建一个React应用。再举个例子，如果你想使用上面的示例代码来创建一个新的用户代码段，你应该这样做：{"constinitialState={};construducer=(state,action)":{"prefix":"rsr","body":["constinitialState={","//$1","}","","construducer=(state,action)=>{","switch(action.type){","default:","returnstate","}","}"]}}然后，创建一个以.tsx结尾的TypeScript文件，输入前缀rsr，会弹出生成这段代码段的建议。点击弹窗上的tab键，生成这段代码：constantinitialState={//}construducer=(state,action)=>{switch(action.type){default:returnstate}}这样做的好处是:all这个技巧可以用在任何项目中，特别是对于一些适用范围广的程序段特别有用。有些项目会有不同的设置。因此，当需要区分特定用例时，很难设置公共文件的片段。例如，当项目之间的结构不同时：{"importLinkfromcomponents/common/Link":{"prefix":"gcl","body":"importLinkfrom'components/common/Link'"},"bordertest":{"prefix":"b1","body":"border:'1pxsolidred',"},"bordertest2":{"prefix":"b2","body":"border:'1pxsolidgreen',"},"bordertest3":{"prefix":"b3","body":"border:'1pxsolidmagenta',"}}对于具有“指定文件/文件夹”结构的项目，这可能就足够了。但是，如果你需要开发一个链接组件路径为components/Link的项目怎么办？注意三个边框测试中，边框值用单引号括起来：border:'1pxsolidred'。这对JavaScript非常有效。但是，如果样式化组件被用作样式方案，则原来的语法规则不再适用，因为样式化组件应用标准的CSS语法！这是该项目的代码片段大放异彩的地方。项目代码段可以让程序员区分项目级和工作区级代码段，这样可以避免代码段冲突或污染其他项目，非常有用！2.优化注释如果喜欢在代码中添加注释，可能会出现因为代码太密而找不到注释的情况。在BetterComments工具(https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)的帮助下，评论可以变成突出的颜色。这使得添加变得容易！或者？提醒团队成员需要注意的事项。3.BracketPairColorizer第一次看到BracketPairColorizer的截图（https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer），我决定把它添加到开发包中.对于热爱编程的人来说，这个扩展无疑会让编程变得更加有趣。4.MaterialThemeMaterialTheme（https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme）是一个历史悠久的主题，可以直接安装到VSCode中。它可以使代码看起来像这样：这是迄今为止最好的主题，现在安装它！5.@typescript-eslint/parserTypeScript用户可能已经开始从TSLint配置切换到ESLint+TypeScript配置，因为今年TSLint背后的团队宣布将削弱其支持。因此，现在越来越多的项目采用@typescript-eslint/parser和相关的包来保证项目设置不会过时。在Prettier网站上，您仍然可以体验ESLint规则和与最新设置的兼容性。6.StylelintStylelint(https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)是所有项目的必需品，原因如下：它可以防止错误。它可以实现CSS代码样式规范。它适用于Prettier。它可以支持CSS/SCSS/Sass/Less。它支持社区创建的插件。7.Markdownlint+docsify有些人在项目讨论时可能有使用Markdown（https://daringfireball.net/projects/markdown/）格式做笔记的习惯。这样的注释很容易理解，并且有很多方便的Markdown文档工具，包括markdownlint。Markdownlint是VSCode的一个扩展，它不仅可以帮助检查.md文件的编写规范，还支持Prettier格式！我在所有项目中都使用docsify，因为它支持Markdown和其他增强功能。8.TODOhighlight如果你有在应用代码中记录待办事项的习惯，TODOhighlight这样的扩展会非常有用，因为它可以将整个项目中的TODO设置为highlight。9.ImportCost当您第一次尝试时，您可能会发现ImportCost非常有用。但是在使用了一段时间之后，你可能就不再需要它了，因为你已经知道它告诉你的是什么。尽管如此，还是建议您尝试一下，因为您可能需要它。10.当HighlightMatchingTag找不到标签的另一端时，HighlightMatchingTag就可以派上用场了：11.vscode-spotify有些人会觉得切换音乐软件切歌很麻烦，然后返回VSCode界面继续工作。vscode-spotify可以解决这个麻烦，因为它允许程序员在VSCode中使用Spotify（Spotify是瑞典的一个在线流媒体音乐平台，民间翻译为“声场”或“声波田”）！使用此扩展，您可以在状态栏中查看正在播放的歌曲、通过热键切换歌曲、通过单击按钮控制Spotify等等。12.GraphQLforVSCode随着GraphQL的逐渐发展，几乎每个JavaScript社区都能看到它的身影。鉴于此，考虑为VSCode安装GraphQL可能是个好主意。使用此工具，您可以在处理GraphQL语法时使用语法高亮显示、linting和自动完成等功能。因为笔者经常使用Gatsby，所以在日常编程中经常会涉及到GraphQL语法。13.彩虹缩进与上面使用括号对着色的原理类似。如果很难找到对应的缩进，使用彩虹缩进可以让缩进更易读。请看这个例子：14.ColorHighlight这是一个到处都会被要求链接的扩展。简单来说，ColorHighlight会将代码中的颜色高亮显示如下：15.ColorPickerColorPicker是图形用户界面的VSCode扩展，帮助用户选择和生成颜色代码，例如CSS颜色值。16.RESTClient当我第一次尝试RESTClient的时候，我并不认为这个工具会比大名鼎鼎的Postman软件更好。随着使用的深入，笔者逐渐意识到RESTClient扩展对开发工具的影响是巨大的，尤其是在测试API的时候。您可以创建一个新文件并输入：https://google.com。只需高亮这一行，进入控制面板（快捷键：CTRL+SHIFT+P），点击RestClient:SendRequest发起一个HTTPGET请求，很快在弹出的新标签页中就会出现响应详情。这非常有用：您甚至可以跳过参数或请求主体数据来发起POST请求，只需添加以下代码行：POSThttps://test.someapi.com/v1/account/user/login/Content-Type：application/json{"email":"someemail@gmail.com","password":1}这样一个正文参数{"email":"someemail@gmail.com","password":1}可以发起POST提出了要求。而这只是这个扩展最基本的功能。更多资讯传送门：https://marketplace.visualstudio.com/items?itemName=humao.rest-client17。SettingsSync如果你真的很讨厌写一个Markdown笔记来记录使用的扩展工具，又想记录在印象中，在像Notes这样的笔记应用中，SettingsSync可以解决这个麻烦。你只需要一个gist/GitHub账号，在录制快捷方式、代码片段、扩展等设置时，同时按下SHIFT+ALT+U即可将你的个人设置上传到gist账号。下次登录或设置另一台计算机时，使用快捷键SHIFT+ALT+D下载设置。18.TodoTreeTodoTree可以找到应用程序代码中的所有待办事项，并在面板左侧将它们组织成一个单一的树状框架结构。19.ToggleQuotesToggleQuotes是一个有趣且有用的扩展，可以切换引号。ToggleQuotes在插入字符串需要切换成反引号时可以派上用场，尤其是当Prettier在美化代码时总是给字符串加上单引号。20.BetterAlign使用BetterAlign无需预选即可对齐所有代码。只需将光标放在需要对齐的代码上，通过CTRL+SHIFT+P（或其他自定义快捷键）打开控制面板，调用对齐命令即可。21.自动关闭标签自动关闭标签是第一次使用VSCode时就派上用场的工具。如果输入
