背景

Visual Studio Code是一个很好用的代码编辑器工具，我想为大家推荐我常用的一些插件，这在很大程度上提高了我的开发效率。

Material Theme

一个简单而又干净的主题。有很多配置选项，用于颜色配置。

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Auto Import

自动查找，解析并提供所有可用导入的代码操作和代码完成。适用于Typescript和TSX。

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Import Cost

该插件将在编辑器中内联显示包的大小。该扩张使用webpack与babili-webpack-plugin来检测导入的大小。

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Indent-Rainbow

一个简单的扩展用户代码缩进，使其更具可读性。

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense for CSS class names in HTML

它基于你的工作空间中的定义或通过链接元素引用外部文件为HTML类属性提供CSS类名。

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

一种很好的方式浏览SVGs.

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Prettier — Code formatter

简直不能没有这个插件--VS Code中使用Prettier格式化你的JavaScript / TypeScript / CSS代码。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

React Native的代码提示，调试和集成命令。

https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap and Settings Importer

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

该插件转换与ST3相同，这样尝试一下。

cmd ⌘ + P — Mac
ctrl + P — Windows

你可以直接转到文件，并且如果你在搜索前添加 > 符号，则可以搜索一些操作，如切换内置终端，安装扩展等等。

对于习惯与ST3快捷键的我们来说，这是一个巨大的胜利。

npm Intellisense

当我们在导入语句中，该插件自动完成npm的包导入。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

在JavaScript和TypeScript标记的模版字符串中添加对HTML内部的语法高亮和语言支持，例如在lit-html和其它框架中使用.

https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

此扩展旨在提供VSCode中应该内置的缺少功能 - 突出显示匹配的打开或关闭标签。

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Git Project Manager

Git项目管理器（GPM）是一个Microsoft VSCode扩展,它允许你直接从VSCode窗口打开一个新的窗口，访问一个git仓库。

https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

查看git日志，文件历史记录，比较分支或提交.

https://marketplace.visualstudio.com/itemsitemName=donjayamanne.githistory

File Utils

创建，复制，移动，重命名和删除文件和目录的便捷方式.

https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Bracket Pair Colorizer

用于对匹配括号进行着色的可自定义扩展。处理大量回调时非常有用。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Color Highlight

该插件在你的编辑器中突出显示Web颜色.

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

该插件允许在html文件中查看ID和class相应的样式并且可以跳转到相应的样式中。

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Debugger for Chrome

在Chrome浏览器或任何其他支持Chrome调试器协议中调试你的JavaScript代码。(gif压缩了也很大，所以就看不到演示，请点链接看相关的介绍)

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

该插件用于现场调试JavaScript.(用于快速演示)

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

突出显示尾随空格并在闪存中将其删除.

Vetur

Vue工具

https://marketplace.visualstudio.com/items?itemName=octref.vetur

Code Runner

运行多种语言的代码片段或代码文件.

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

vscode-icons

Visual Studio的代码图标.

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Jest

使用Facebook的Jest.

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

Reactjs code snippets

ES6语法中用Reactjs开发的代码片段.

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

经常用到的就这些，要是你发现有好用的插件推荐，记得评论哈，我再加上去！

注：一些GIF动图压缩后也比较大，上传速度实在太慢，所有有些就没显示动图，请务必点开插件相对应的链接，查看更多信息。

参考链接
    Immensely upgrade your development environment with these Visual Studio Code extensions by Indrek Lasn

最后更新于 2018-07-02 01:24:02 并被添加「VS Code」标签，已有 3668 位童鞋阅读过。