Visual Studio Code



精选的令人愉快的清单 Visual Studio Code 包和资源. 如需更多精彩内容,请查看 awesome.

Awesome Build Status


Official

Syntax

语言包使用特定语言或文件格式的语法突出显示和/或摘要来扩展编辑器.

Migrating from other editors

VSCode团队提供了受欢迎的编辑人员提供的按键图,从而几乎无缝且轻松地过渡到VSCode.

Migrating from Vim

> Vim模式-相对较新,但很有希望的扩展,用于在VSCode中实现Vim功能

Migrating from Atom

>适用于Visual Studio Code的流行Atom按键绑定

Migrating from Sublime Text

> VS Code的流行Sublime Text键绑定.

Migrating from Visual Studio

> VS Code的流行Visual Studio按键绑定.

Migrating from Intellij IDEA

> VS Code的流行Intellij IDEA键绑定.

Camel Humps

>与Visual Studio和Resharper或Intellij IDEA一样

Using VS Code with particular technologies

微软创建了一些配方,以将VS Code与特定技术(主要是Web)结合使用.

请务必访问 Microsoft/vscode-recipes

Lint and IntelliSense

如果还没有释放出令人敬畏的令人垂涎的必杀技: > lint是最初为特定程序指定的名称,该程序在C语言源代码中标记了一些可疑且不可移植的结构(可能是bug). 现在,该术语通常用于标记以任何计算机语言编写的软件中可疑使用的工具.

与其他一些编辑器不同,VS Code支持IntelliSense,棉绒,开箱即用的轮廓,并且不需要任何单独的扩展即可运行linter软件包. 某些短毛绒已经集成在VS Code中,您可以在官方文档中找到完整列表, Languages 部分.

1C

  • 1C/OScript -VSC中丰富的1С:Enterprise 8(BSL)语言支持-向VSC中的 .bslи .os文件添加语法高亮显示,为1Сlang添加IntelliSense和语法帮助器

Bash

Bash IDE

> Bash语言服务器

Bash Debug

>基于bashdb的Bash脚本的调试器扩展

Bash Debug

C++

More

C#, ASP .NET and .NET Core

.NET Core Test Explorer

Clojure

Calva

>集成REPL,棉绒,内联评估,测试运行器等. 由Cider&nRepl提供支持.

Calva

CSS

CSS Peek

>直接从HTML中窥视或跳转到CSS定义,就像在括号中一样!

CSS Peek

Intellisense CSS class names

Go

  • Go -对Go语言的丰富语言支持.

Haskell

Shell

Java

JavaScript

看这两者之间的区别 here

Facebook Flow

TypeScript

  • tslint -用于Visual Studio代码的TSLint
  • TypeScript Hero -打开的TS的代码大纲视图,对导入进行分类和组织.

Debugger for Chrome

> VS Code扩展程序,用于在Chrome浏览器或支持Chrome调试协议的其他目标中调试JavaScript代码.

Markdown

markdownlint

>短绒棉 markdownlint.

Markdown All in One

>多合一Markdown插件(键盘快捷键,目录,自动预览,列表编辑等)

Markdown All in One

PHP

IntelliSense

这些扩展提供的功能集略有不同. 虽然第一个提供更好的自动完成支持,但第二个似乎总体上具有更多功能.

Laravel

Laravel blade snippets and syntax highlight support animation

Laravel Model Snippets animation

Laravel Artisan commands within Visual Studio Code animation

  • DotENV -支持dotenv文件语法

Support for dotenv file syntax screenshot

Twig

要在.twig文件中启用Emmet支持,您需要在设置中包含以下内容:

{
   emmet.includeLanguages”:{
     twig”:“ html”
  }
}

Other extensions

  • Format HTML in PHP -格式化PHP文件中的HTML. 在save操作之前运行,因此您仍然可以使用PHP格式化程序.

Format HTML in PHP

Read more

Python

  • Python -整理,调试(多线程,Web应用程序),Intellisense,自动完成,代码格式化,代码段,单元测试等.

TensorFlow

  • TensorFlow Snippets -该扩展包括一组有用的代码片段,用于在Visual Studio Code中开发TensorFlow模型.

TensorFlow Snippets GIF

ReasonML

  • ReasonML -智能感知,代码格式化,重构,代码镜头等

Rust

  • Rust -整理,自动完成,代码格式化,摘要等

Terraform

  • Terraform -对Hashicorp的Terraform进行语法高亮显示,修饰,格式化和验证

Productivity

ARM Template Viewer

>显示Azure资源管理器(ARM)模板的图形预览. 该视图将显示带有正式Azure图标的所有资源,以及资源之间的链接.

Displays a graphical preview of Azure Resource Manager (ARM) templates

Azure Cosmos DB

>在vs代码编辑器中浏览数据库

Browse your database inside the vs code editor animation

Azure IoT Toolkit

> Azure IoT开发所需的一切:与Azure IoT中心进行交互,管理连接到Azure IoT中心的设备以及使用Azure IoT中心的代码段进行开发

Code snippets for Azure IoT Hub screenshot

Bookmarks

>标记线条并跳转到它们

Bookmarks command screenshot

Bookmarks toogle screenshot

Color Tabs

>大型项目或Monorepos的扩展程序,可根据当前软件包为选项卡/标题栏着色

Color your tabs and/or titlebar based on regex

Create tests

>用于快速生成测试文件的扩展.

Create tests extension animation

Deploy

>用于将工作空间的文件上传或复制到目标的命令.

Upload/copy files animation

Duplicate Action

>能够复制文件和目录.

ES7 React/Redux/GraphQL/React-Native snippets

>在ES7中提供Javascript和React / Redux片段

es7-reactreduxgraphqlreact-native-snippets

Gi

>生成.gitignore文件变得容易.

.gitignore generation animation

Git History

>查看git日志,文件或行的历史记录

View git log, file or line history animation

Git Project Manager

>自动为您的git项目建立索引,并让您轻松在它们之间切换

>在浏览器中转到当前文件的在线链接,然后在剪贴板中复制该链接.

GoTo current file online animation

GitLens

Provides Git CodeLens information (most recent commit, # of authors), on-demand inline blame annotations, status bar blame information, file and blame history explorers, and commands to compare changes with the working tree or previous versions.

GitLens inline git information animation

Git Indicators

>活动面板上的类似Atom的git指示器

git added indicator screenshot git removed indicator screenshot git modified indicator screenshot

GitHub

>提供GitHub工作流程支持. 例如,浏览项目,问题,文件(当前行),创建和管理请求请求. 计划支持其他提供程序(例如gitlab或bitbucket). >看看 README.md 关于如何开始使用此扩展程序的设置.

GitHub Pull Request Monitor

This extension uses the GitHub api to monitor the state of your pull requests and let you know when it's time to merge or if someone requested changes.

GitHub Pull Request Monitor

GitLab Workflow

>添加一个GitLab侧栏图标以查看问题,合并请求和其他GitLab资源. 您还可以查看GitLab CI / CD管道的结果,并检查.gitlab-ci.yml的语法.

GitLab Workflow

Gradle Tasks

>在VS Code中运行gradle任务.

Gradle Tasks

Icon Fonts

>流行图标字体的代码片段,例如Awesome字体,Ionicons,Glyphicons,Octicons,Material Design Icons等!

Import Cost

>该扩展名将在编辑器中内联显示导入包的大小. 该扩展程序利用带有babili-webpack-plugin的webpack来检测导入的大小.

Import Cost Screenshot

JS Parameter Annotations

>在JS / TS文件中的函数调用上提供注释,以为参数提供参数名称.

JS Parameter Annotations

Jumpy

>提供快速的光标移动,灵感来自于同名的Atom软件包.

Jumpy

Kanban

kanban

>可在Visual Studio Code中使用的简单看板板,具有时间跟踪和Markdown支持.

Live Server

>为静态和动态页面启动具有实时重新加载功能的开发本地服务器.

live-server

Multiple clipboards

>覆盖常规的“复制和剪切”命令,以将选择内容保留在剪贴板中

Dotnet Core Test Explorer

>直接在编辑器中查看和运行.NET Core测试.

View and run your .NET Core tests directly in the editor animation

Instant Markdown

>只需在vscode中编辑markdown文档,并在键入时立即在浏览器中预览.

Instant Markdown Screencast

npm Intellisense

> Visual Studio Code插件,可自动完成导入语句中的npm模块.

npm-intellisense

Partial Diff

>比较文件中,不同文件中或剪贴板中的文本选择(差异)

Partial Diff

Paste JSON as Code

>推断JSON的结构并粘贴为许多编程语言中的类型

Paste JSON as Code

Path IntelliSense

>自动完成文件名的Visual Studio Code插件

Autocompletion for filenames animation

Power Tools

>通过基于Node.js的脚本或Shell命令等扩展Visual Studio Code,而无需编写单独的扩展

Power Tools

PrintCode

> PrintCode将正在编辑的代码转换为HTML文件,由浏览器显示并打印.

PrintCode

Project Manager

>在项目之间轻松切换.

Switch between projects screenshot

Remote VSCode

>允许用户直接在Visual Studio Code中从远程服务器编辑文件.

REST Client

>允许您发送HTTP请求并直接在Visual Studio Code中查看响应.

Send HTTP request and view response animation

Settings Sync

>使用GitHub Gist在多台机器上同步设置,代码片段,主题,文件图标,启动,键绑定,工作区和扩展

Settings Sync

Todo Tree

>自定义关键字,突出显示和TODO注释的颜色. 以及可查看所有当前标签的侧边栏.

Todo Tree

Toggle Quotes

>在单引号,双引号和反引号之间切换

Toggle Quotes

WakaTime

>自动时间跟踪器和生产率仪表板,显示您在每个项目,文件,分支和语言中编码的时间.

Yo

>脚手架项目使用 Yeoman

Using yeoman animation

Formatting & Beautification

Better Align

>通过冒号(:),赋值(=,+ =,-=,* =,/ =)和箭头(=>)对齐代码. 它具有对逗号优先编码样式和尾随注释的附加支持.

>并不需要您选择要对齐的内容,扩展名会自行找出.

Better Align

Auto Close Tag

>自动添加HTML / XML关闭标签,与Visual Studio IDE或Sublime Text相同

Automatically add close tags animation

Auto Rename Tag

>自动重命名配对的HTML / XML标签

Auto rename paired HTML/XML tags animation

beautify

>美化VS Code的代码

html2pug

>将html转换为在Visual Studio Code中显示的内容,再也不用使用外部页面了.

ECMAScript Quotes Transformer

>转换ECMAScript字符串文字的引号

Transform quotes of ECMAScript string literals animation

Paste and Indent

>粘贴带有“正确”缩进的代码

Indentation of pasted code animation

Sort Lines

>按特定顺序对文本行进行排序

Sorts lines of text in specific order animation

Surround

>一个简单而强大的扩展,可以在代码块周围添加包装器模板.

Wrap a template around a code block

Wrap Selection

>用一个或多个符号环绕选择或多个选择

Wraps selection or multiple selections with symbol or multiple symbols animation

Formatting Toggle

>只需单击一下,即可打开和关闭格式化程序

Bracket Pair Colorizer

>此扩展名允许用颜色标识匹配的括号. 用户可以定义要匹配的字符以及要使用的颜色.

Bracket Pair Colorizer

Auto Import

>自动查找,解析并提供所有可用导入的代码操作和代码完成. 与Typescript和TSX一起使用.

Auto import

shell-format

> Shell脚本&Dockerfile&dotenv格式

shell-format

Vscode Google Translate

>在您的代码中快速翻译所选文本

Vscode Google Translate

Explorer Icons

City Lights Icons

City Lights Icons

VSCode Icons

VSCode Icons

Seti Icons

Seti Icons

Material Icon Theme

Material Icon Theme

Uncategorized

Ascii Tree Generator

> VS Code扩展,可生成目录的ascii树或将选定的文本格式化为树字符串.

Ascii Tree Generator Demo

Browser Preview

> VS Code的浏览器预览,使您可以在编辑器中打开可以调试的真实浏览器预览. 浏览器预览由Chrome Headless驱动,并通过在新过程中启动无头Chrome实例来工作. 这提供了一种在VS Code中呈现Web内容的安全方法,并启用了有趣的功能,如编辑器内调试等!

Browser Preview Demo

Code Runner

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, C# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script

Run a snippet or file animation

Code Time

>在VS Code中按项目和其他编程指标自动生成时间报告.

Code Time

Color Highlight

>在编辑器中突出显示网页颜色

Highlight web colors in your editor screenshot

Output Colorizer

> VS代码输出面板和日志文件的语法突出显示

IBM.output-colorizer

Dash

> Visual Studio Code中的Dash集成

Dash integration screenshot

Edit with Shell Command

>利用您最喜欢的Shell命令来编辑文本

Edit with Shell Command

Editor Config for VS Code

> VS Code的编辑器配置

ftp-sync

>将您的工作自动同步到远程FTP服务器

Auto-sync your work to remote FTP server animation

Highlight JSX/HTML tags

>突出显示文件中匹配的标签.

Indent Rainbow

>一个简单的扩展,使缩进更易读.

indent-rainbow

PlatformIO

>用于物联网开发的开源生态系统:支持350多个嵌入式板,20多个开发平台,10多个框架. Arduino和ARM mbed兼容.

Build using platformio animation

Polacode

>为您的代码拍立得.

Make a polaroid image of your code animation

carbon-now-sh

>将代码发送到 carbon.now.sh. Send your code to carbon.now.sh animation

Quokka

> VS Code中JavaScript和TypeScript的快速原型制作游乐场,可访问您项目的文件,内联报告,代码覆盖率和丰富的输出格式.

Integrated JavaScript/TypeScript playground animation

Remote Workspace

>通过使用新的协议,对诸如Azure Blob,S3存储桶,Dropbox,(S)FTP或WebDAV文件之类的东西提供多协议支持 FileSystem API,尤其是用于以下列方式访问编辑器中的本地文件和文件夹等资源: workspace folders.

Remote Workspace animation

Runner

>直接从VS Code运行各种脚本

Run various scripts right from VS Code animation

Slack

>发送消息和代码段,将文件上传到Slack

Send messages or code snippets to Slack animation

SmoothType

>添加类似于MS Office和Windows 10 Mail应用程序的平滑键入动画.

SmoothType Animation

Spotify

>提供与Spotify桌面客户端的集成. 在状态栏中显示当前播放的歌曲,搜索歌词,并提供用于通过按钮和热键控制Spotify的命令.

vscode-spotify

SVG

>强大的SVG语言支持扩展(测试版). 处理SVG所需的几乎所有功能.

SVG

SVG Viewer

>在编辑器中查看SVG,并将其导出为数据URI方案或PNG.

SVG Viewer

Text Marker (Highlighter)

>同时突出显示具有不同颜色的多个文本样式. 可以使用编辑器的搜索功能来突出显示单个文本模式,但是不能同时突出显示多个模式,这是该扩展程序很方便的地方.

Text Marker (Highlighter)

ESDOC MDN

>在编辑器中快速显示有用的MDN文档

ESDOC MDN

Interface generator (Typescript)

Interface generator

>从打字稿类快速生成接口定义

Interface generator

Themes

UI

如果您觉得自己很勇敢,那么至少有两个针对VS Code的自定义UI:

Syntax

2077 theme by Endormi

赛博朋克2077灵感主题

An Old Hope Theme by Dustin Sanders

VSCode主题的灵感来自遥远的星系...

Ariake Dark by wart

深色VSCode主题的灵感来自日本的传统色彩和1000年前的诗歌.

Atom One Dark Theme by Mahmoud Ali

一个基于Atom的黑暗主题.

Atomize by emroussel

详细而准确的Atom One Dark主题.

Ayu by teabyii

一个简单的主题具有鲜艳的色彩,并提供三种版本-黑暗,明亮和海市rage楼,可为您提供一整天的舒适工作.

Captain Sweetheart by ultradracula

凝灰岩但甜美的主题.

City Lights by Yummygum

Yummygum的官方城市之光套件

Cobalt2 Theme Official by Wes Bos

Wes Bos的官方主题.

Dracula Official by Dracula Theme

官方吸血鬼主题. 对于许多编辑器,Shell等而言,这是一个黑暗的主题.

Edge by Bogdan Lazar

一个简单的主题,具有鲜艳的色彩,有三种变体-夜空,宁静和海洋,全天候舒适地工作.

Eva Theme by fisheva

A colorful and semantic coloring code theme.

Fairy Floss by nopjmp and sailorhg

由Sailorhg制作的有趣的紫色蜡笔/糖果/白日梦童话牙线主题.

GitHub Theme by Thomas Pink

用于Visual Studio代码的GitHub主题.

Jellybeans Theme by Dimitar Nonov

Visual Studio Code的Jellybeans主题.

Material Palenight Theme by whizkydee

一个优雅多汁的类似于Visual Studio Code的材质主题.

Material Theme by Mattia Astorino

现在,最史诗般的主题是Visual Studio Code.

Mno by u29dc

最小的单色主题.

Monokai Oblique by pushqrdx

Monokai启发的主题 Visual Studio CodeVisual Studio IDE.

Monokai Pro by monokai (commercial)

原始Monokai配色方案的作者为专业开发人员提供了精美的功能.

Night Owl by Sarah Drasner

夜猫子的VS Code主题. 在白天也可以很好地工作,但是对于那些喜欢在深夜编码的人来说,此主题是微调的. 颜色选择已考虑到色盲和弱光环境下人们可以使用的内容. 决策还基于有意义的对比来进行阅读理解和最佳的眼花乱. ✨

Plastic by Will Stone

一个简单的主题.

Nord by arcticicestudio

一个北极的,北蓝色的干净优雅的Visual Studio Code主题.

Rainglow by Dayle Rees

收集320多种精美的语法和UI主题.

Relaxed Theme by Michael Kühnel

一个轻松的主题,可以更轻松地查看事物.

Shades of Purple by Ahmad Awais

⚡一个专业的主题,带有经过手工挑选的大胆的紫色阴影,以及您的VS Code. 具有样式的自定义VS Code主题.

Slime Theme by smlombardi

Visual Studio Code的深色语法/工作台主题-针对SCSS,HTML,JS,TS,Markdown和PHP文件进行了优化.

Niketa Theme by Dejan Toteff

收集18个灯光主题,按背景亮度分为4组.

People to Follow

VS Code社区中各种人的Twitter帐户列表

Resources for extension developers

Documentation

Libraries

Tools

  • Live Share -Visual Studio Live Share使您能够与他人实时进行协作式编辑和调试,无论您使用的是哪种编程语言或正在构建的应用程序类型.
  • Online TextMate Themes Editor -由于VS Code支持TextMate主题,因此您可以在此在线编辑器中创建主题,然后使用创建新的VS Code包 Yo Code 工具
  • Yo Code - Extension Generator
  • Open in Code -macOS Finder工具栏应用程序可在Visual Studio Code中打开当前文件夹

macOS Finder toolbar app to open current folder in Visual Studio Code animation

  • Themer -轻松为VS Code创建自己的主题(并为其他工具匹配主题).
  • Azure Tools for Visual Studio Code -Visual Studio Code的此扩展为Azure开发人员提供了一些便捷的命令,可直接在编辑器中创建或访问资源.

azure-tools-vscode

  • Mark down preview -Markdown Preview增强版是一项扩展,可为您提供许多有用的功能,例如自动滚动同步,数学排版,美人鱼,PlantUML,pandoc,PDF导出,代码块,演示文稿编写者等. Plus和RStudio Markdown.

Online Courses

Visual Studio Code Power User Course (commercial)

在使用Sublime Text十年后, Ahmad Awais 切换到VSCode,内置 Shades of Purple theme, and spent over a 1,000 hours perfecting his setup. He has launched a VSCode Power User Course to help you switch today. You can bring all your custom settings from the previous editor and learn the power user workflows for HTML/CSS, Git/GitHub & Open Source, supercharged Markdown, and everything from JavaScript to PHP, Go, Python, C++, C#, ROR. In this course, you'll also learn to install/setup 50+ Extensions.

  • VSCode.pro -长达5个小时的65个视频VSCode课程.
  • Ahmad Awais -紫色阴影主题的创建者. WP / JS的核心开发人员. OSS开发倡导者.

Contribute

欢迎捐款! 阅读 contribution guidelines 第一.

License

我正在开源许可下向您提供此存储库中的代码和资源. 因为这是我的个人存储库,所以您获得的代码和资源的许可证是我而非我的雇主(Microsoft)获得的.

CC0

在法律允许的范围内, Valerii Iatsko 放弃了此作品的所有版权以及相关或邻近的权利.