by Daniel Deutsch

由Daniel Deutsch

2017年最喜欢的Visual Studio代码扩展 (Favorite Visual Studio Code Extensions of 2017)

Here is a list of some extensions I come to enjoy with Visual Studio Code (VSCode). Since I work a lot in the front-end, most of these extensions will be useful for web developers. I have been working previously with Atom, Visual Studio and Webstorm but VSCode suits me best and is just incredible. The developer did a great job ( and still do! ). Try it for yourself and enjoy!

这是我使用Visual Studio Code(VSCode)享受的一些扩展的列表。 由于我在前端工作很多，因此这些扩展中的大多数对Web开发人员都是有用的。 我以前曾与Atom，Visual Studio和Webstorm一起工作，但是VSCode最适合我，而且简直令人难以置信。 开发人员做得很好(并且仍然可以！)。 自己尝试并享受吧！

“To enjoy life, you don’t need fancy nonsense, but you do need to control your time and realize that most things just aren’t as serious as you make them out to be.” ― Timothy Ferriss

“享受生活，您不需要花哨的废话，但您确实需要控制自己的时间，并意识到大多数事情并不像您想象的那么严重。” 蒂莫西·费里斯 ( Timothy Ferriss)

HTML扩展 (HTML Extensions)

自动关闭标签 (Auto Close Tag)

Automatically add an HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

与Visual Studio IDE或Sublime Text一样，自动添加HTML / XML关闭标签。

See more

看更多

自动重命名标签 (Auto Rename Tag)

Automatically rename a paired HTML/XML tag, same as Visual Studio IDE does.

与Visual Studio IDE一样，自动重命名配对HTML / XML标记。

See more

看更多

HTML片段 (HTML Snippets)

This extension adds rich language support for the HTML Markup to VS Code, including: Full HTML5 Tags, Colorization and Snippets.

此扩展为VS CodeHTML标记添加了丰富的语言支持，包括：完整HTML5标签，着色和代码片段。

See more

看更多

降价扩展 (Markdown Extensions)

自动打开降价预览 (Auto-Open Markdown Preview)

This VS Code extension automatically shows Markdown preview whenever you open new Markdown file. If you feel annoying to type “Ctrl+K V” or “⌘+K V” (preview side-by-side) many times, this extension helps you.See more

每当您打开新的Markdown文件时，此VS Code扩展名将自动显示Markdown预览。 如果您多次输入“ Ctrl + KV”或“⌘+ KV”(并排预览)感到烦恼，此扩展名将为您提供帮助。 看更多

降价目录 (Markdown TOC)

Generate TOC (table of contents) of headlines from a parsed markdown file.See more

从已解析的markdown文件生成标题的TOC(目录)。 看更多

降价主题套件 (Markdown Theme Kit)

A set of themes based on SublimeText-Markdown/MarkdownEditing.See more

一组基于SublimeText-Markdown / MarkdownEditing的主题。 看更多

代码拼写检查器 (Code Spell Checker)

A basic spell checker that works well with camelCase code.See more

一个基本的拼写检查器，可以很好地与camelCase代码一起使用。 看更多

JavaScript扩展 (JavaScript Extensions)

Babel ES6 / ES7 (Babel ES6/ES7)

Adds JavaScirpt Babel es6/es7 syntax coloring.See more

添加JavaScirpt Babel es6 / es7语法着色。 看更多

Chrome调试器 (Debugger for Chrome)

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

在Chrome浏览器或任何其他支持Chrome Debugger协议的目标中调试JavaScript代码。

See more

看更多

ESLint (ESLint)

Integrates ESLint into VS Code.See more

将ESLint集成到VS Code中。 看更多

JavaScript(ES6)代码段 (JavaScript (ES6) code snippets)

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).See more

此扩展包含Vs代码编辑器的ES6语法JavaScript代码片段(同时支持JavaScript和TypeScript)。 看更多

代码拼写检查器 (Code Spell Checker)

A basic spell checker that works well with camelCase code.See more

一个基本的拼写检查器，可与camelCase代码配合使用。 看更多

Node.js模块Intellisense (Node.js Modules Intellisense)

Visual Studio Code plugin that autocompletes JavaScript / TypeScript modules in import statements.

Visual Studio Code插件，可以自动完成导入语句中JavaScript / TypeScript模块。

See more

看更多

ES6 / ES7的React-Native / React / Redux代码段 (React-Native/React/Redux snippets for ES6/ES7)

See more

看更多

TSLint (TSLint)

Integrates the tslint linter for the TypeScript language into VS Code.See more

将用于TypeScript语言的tslint linter集成到VS Code中。 看更多

vscode样式的组件 (vscode-styled-components)

Syntax highlighting for styled-components.See more

样式化组件的语法突出显示。 看更多

VSQ的GraphQL (GraphQL for VSCode)

GraphQL syntax highlighting, linting, auto-complete, and more!See more

GraphQL语法高亮，显示，自动完成等！ 看更多

纱 (yarn)

yarn commands for VSCode. See more

VSCode的yarn命令。 看更多

通用扩展 (General Extensions)

颜色突出 (Color Highlight)

vscode-ext-color-highlight. This extension styles css/web colors found in your document.See more

vscode-ext-color-highlight。 此扩展程序可样式化文档中找到的css / web颜色。 看更多

自定义CSS和JS加载程序 (Custom CSS and JS Loader)

Custom CSS to your VS Code. Based on Roberto Huertasm’s vscode-icons.

自定义CSS到您的VS Code。 基于Roberto Huertasm的vscode-icons。

See more

看更多

VS Code的EditorConfig (EditorConfig for VS Code)

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. See more

EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。 EditorConfig项目包含一个用于定义编码样式的文件格式和一个文本编辑器插件集合，这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。 看更多

文件模板 (File Templates)

Visual Studio code extenstion that allows to quickly create new files based on defined templates.See more

Visual Studio代码扩展，允许基于定义的模板快速创建新文件。 看更多

Git历史记录(git日志) (Git History (git log))

View git log along with the graph and details. View the history of a file (Git log) or the history of a line in a file (Git Blame). View a previous copy of the file. Compare a previous version with the version in the workspace or another. View commit log details for a selected commit. Compare commits.

查看git日志以及图形和详细信息。 查看文件的历史记录(Git日志)或文件中的行的历史记录(Git Blame)。 查看文件的先前副本。 将先前版本与工作空间中的版本进行比较。 查看选定提交的提交日志详细信息。 比较提交。

See more

看更多

导游 (Guides)

A Visual Studio Code extension for more guide lines.

一个Visual Studio Code扩展，以获取更多指南。

See more

看更多

材质图标主题 (Material Icon Theme)

The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code. See more

材质图标主题提供了许多基于Visual Studio Code的材质设计的图标。 看更多

彩虹括号 (Rainbow Brackets)

Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets.See more

为圆括号，方括号和弯曲的括号提供彩虹色。 看更多

更漂亮 (Prettier)

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.See more

VS Code包，用于使用Prettier格式化JavaScript / TypeScript / CSS。 看更多

专案经理 (Project Manager)

Manage your projects right inside Visual Studio Code. Easily access and switch between them.See more

在Visual Studio Code中直接管理您的项目。 轻松访问并在它们之间切换。 看更多

主题—塞蒂·莫诺凯 (Theme — Seti-Monokai)

Seti Monokai color scheme.See more

Seti Monokai配色方案。 看更多

瓦卡时间 (WakaTime)

Metrics, insights, and time tracking automatically generated from your programming activity.See more

通过编程活动自动生成的指标，洞察力和时间跟踪。 看更多

设置同步 (Settings Sync)

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.See more

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

Thanks for reading my article! Feel free to leave any feedback!

感谢您阅读我的文章！ 随时留下任何反馈！

Daniel is a LL.M. student in business law, working as a software engineer and organizer of tech related events in Vienna. His current personal learning efforts focus on machine learning.

丹尼尔(Daniel)是法学硕士。 商业法专业的学生，​​在维也纳担任软件工程师和技术相关活动的组织者。 他目前的个人学习重点是机器学习。

Connect on:

连接：

• LinkedIn

  领英

• Github

  Github

• Medium

  中

• Twitter

  推特

• Steemit

  Steemit

• Hashnode

  哈希节点

翻译自: https://www.freecodecamp.org/news/favorite-vs-code-extensions-2017-786ea235812f/