用于React，React Native，JavaScript和生产力的顶级VSCode扩展

I’ve used VSCode full-time since 2016. Before I was using Visual Studio and I was looking for lighter editor. I would like to share with you my extensions that I have currently installed. I’m working as a React Native developer so JavaScript centric section will be the biggest one but not the only one! There is a bunch of general-use extensions that will increase happiness of your coding time no matter what technology you are using.

自2016年以来，我一直在全职使用VSCode。在使用Visual Studio之前，我一直在寻找更轻便的编辑器。 我想与您分享我目前安装的扩展程序。 我正在作为React Native开发人员工作，因此以JavaScript为中心的部分将是最大的部分，而不是唯一的部分！ 无论使用哪种技术，都有很多通用扩展可以增加您的编码时间。

必须有-我的前3个VSCode扩展 (Must have — My top 3 VSCode extensions)

设置同步 (Settings Sync)

Synchronise Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. • Shan Khan

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

First and only extension I install after changing workspace (new computer, fresh account, editor reinstall or disk formatting). I have all my extensions and settings stored safely on Github Gist. It is also useful to share with teammates to compare and customise their editors.

我在更改工作空间(新计算机，新帐户，重新安装编辑器或格式化磁盘)之后安装的第一个也是唯一一个扩展。 我所有的扩展程序和设置都安全地存储在Github Gist上。 与队友共享以比较和自定义编辑器也很有用。

ESLint (ESLint)

Integrates ESLint JavaScript into VS Code. • Dirk Baeumer

将ESLint JavaScript集成到VS Code中。 •德克·鲍默

In my opinion linter is the most important tool while writing JavaScript code.

在我看来，linter是编写JavaScript代码时最重要的工具。

I started my career with C# and other strongly typed languages with rich-featured IDEs and it is natural to me that when something is underscored red it will not work. Without configured linter you can freely write code with syntax error and you will be notified in the browser or for React a bit earlier — in my opinion it’s too late.

我的职业生涯始于具有丰富功能的IDE的C＃和其他强类型语言，对我来说很自然的是，当某些内容标为红色时，它将不起作用。 如果没有配置linter，则可以自由编写带有语法错误的代码，并且会在浏览器中通知您， 或者在更早的时候通知React –我认为为时已晚。

This extensions give you nice feedback in the exact moment of writing.

该扩展为您提供了准确的书面反馈。

In my team we’ve configured git hooks that won’t allow anyone to push project with linter errors makes project more stable. This also eliminates wasting time on pull requests. No more searching for typos or mistakes that are easily eliminated with a linter rule.

在我的团队中，我们配置了git挂钩，该挂钩不允许任何人推送带有linter错误的项目，从而使项目更加稳定。 这也消除了浪费在请求请求上的时间。 不再需要寻找因打字错误而容易消除的错别字或错误。

GitLens —增压的Git (GitLens — Git supercharged)

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more • Eric Amodio

增强Visual Studio Code中内置的Git功能—通过Git责备注释和代码透镜一目了然地可视化代码作者，无缝浏览和浏览Git存储库，通过强大的比较命令获得有价值的见解，等等 •Eric Amodio

I work in projects that have long lifecycle. Therefore I ofter work in files that were written by me or my teammates long time ago then edited multiple times to satisfy business requirements. Here is where git shows it’s power with whole history of the file. This extension gives me visual tools to navigate through history of the file commit by commit.

我在生命周期较长的项目中工作。 因此，我经常处理由我或我的队友编写的文件，然后多次编辑以满足业务需求。 这是git在整个文件历史记录中显示其功能的地方。 该扩展为我提供了可视化工具，可以逐次浏览文件提交的历史记录。

It also shows last commit for each line with date, message and author. I use it a lot to get context of the code I’m looking at. Setting up mindset is much faster when you understand why somebody written that line in this particular way.

它还显示每行的最后提交，以及日期，消息和作者。 我经常使用它来获取正在查看的代码的上下文。 当您了解为什么有人以这种特定方式写那条线时，建立思维定势会更快。

用于React Native，React和JavaScript的VSCode扩展 (VSCode extensions for React Native, React and JavaScript)

自动关闭标签 (Auto Close Tag)

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text • Jun Han

自动添加HTML / XML关闭标签，与Visual Studio IDE或Sublime Text相同 •Jun Han

When I open some new tag it will automatically create closing tag for it. For example I type <Component> and this extension adds </Component> immediately. It works for JSX/TSX.

当我打开一些新标签时，它将自动为其创建结束标签。 例如，我键入<Component> ，此扩展名立即添加</Component> 。 它适用于JSX / TSX。

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

Auto rename paired HTML/XML tag • Jun Han

自动重命名配对HTML / XML标签 •Jun Han

It is similar to the previous extension. When I edit one tag paired one will be edited as well so I don’t need to revisit it. It works for JSX/TSX.

它与先前的扩展类似。 当我编辑一个配对的标签时，也将对其进行编辑，因此我不需要重新访问它。 它适用于JSX / TSX。

自动导入 (Auto Import)

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX • steoates

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

颜色突出 (Color Highlight)

Highlight web colors in your editor • Sergii Naumov

在编辑器中突出显示网页颜色 •Sergii Naumov

Whenever I have a hex colour in my opened files the colour will be set as background of the string. For example {myColour: '#AA0000',} will highlight #AA0000 with red background.

每当我打开的文件中有十六进制颜色时，该颜色就会设置为字符串的背景。 例如{myColour: '#AA0000',}将用红色背景突出显示#AA0000 。

ES7 React / Redux / GraphQL / React-Native片段 (ES7 React/Redux/GraphQL/React-Native snippets)

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax • dsznajder

使用ES7语法在JS / TS中对React，Redux和Graphql进行简单扩展 •dsznajder

Basic snippets set. For example I write rafcp and it autocompletes my file with a React Arrow Function Component with ES7 module system. Basically this where $1 is name of the file.

基本片段集。 例如，我编写rafcp ，它使用带有ES7模块系统的React Arrow Function组件自动完成文件。 基本上，其中$1是文件名。

import React from 'react'import PropTypes from 'prop-types'const $1 = props => {  return <div>$0</div>}$1.propTypes = {}export default $1

It’s very big set and constantly improved.

这是一个很大的集合，并且不断改进。

高亮匹配标签 (Highlight Matching Tag)

Highlights matching closing and opening tags • vincaslt

突出显示匹配关闭和打开标签的标签 •vincaslt

Very useful extension to highlight paired tag with underscore. It helps to navigate through JSX tree.

非常有用的扩展，用于突出显示带有下划线的配对标签。 它有助于浏览JSX树。

命名颜色 (Name That Color)

Get a friendly name from a Hex color representation. • Guillaume Doutriaux

从十六进制颜色表示中获取一个友好的名称。 •Guillaume Doutriaux

I don’t like to lose time to think: “should I name this colour just secondaryColor or make some sensible name for it like blueSky?". This extension names every hex colour. For example it can tell you that: #B10000 is Bright Red or even #bright-red.

我不想浪费时间去思考：“我应该将此颜色命名为secondaryColor还是blueSky命名一个blueSky名称，例如blueSky ？”。此扩展名可以命名每种十六进制颜色。例如，它可以告诉您： #B10000 is Bright Red or even #bright-red.

更漂亮—代码格式化程序 (Prettier — Code formatter)

Code formatter using prettier • Esben Petersen

使用更漂亮的代码格式化程序 •Esben Petersen

Format your React Native code automatically to avoid time-consuming unneeded discussions among your team. We do formatting on every commit. I also have tendency to press “Format Document” shortcut very often…

自动格式化您的React Native代码，以避免团队之间耗时的不必要的讨论。 我们会在每次提交时进行格式化。 我也倾向于经常按“格式化文档”快捷方式…

Remember to setup .prettierrc config file with Prettier docs to customise your formatting.

请记住使用.prettierrc文档设置.prettierrc配置文件以自定义格式。

ReactPropTypes Intellisense (React PropTypes Intellisense)

PropTypes intellisense for React components • Of Human Bondage

PropTypes用于React组件的智能感知 •人类束缚

The extension finds React PropTypes and adds them to the suggestion list.

该扩展找到React PropTypes并将其添加到建议列表。

排序导入 (sort-imports)

Sort ES6 imports automatically. • VSC Sort Import

自动对ES6导入进行排序。 •VSC排序导入

I like to have my libraries imported at the top of the file and local files lower separated with newline. This extension makes it semi-automated.

我希望将导入的库放在文件的顶部，而将本地文件的底部用换行符分隔。 此扩展使其半自动化。

导出自动完成 (exports autocomplete)

autocompletes javascript module exports from your project • capaj

自动完成您项目中的javascript模块导出 •capaj

React本机工具 (React Native Tools)

Debugging and integrated commands for React Native • Microsoft

用于React Native的调试和集成命令 •Microsoft

Debugger and multiple helper functions of React Native. If you like to do everything from editor instead keeping several terminals open — it will be good for you.

React Native的调试器和多个帮助器功能。 如果您想通过编辑器执行所有操作，而不是保持几个终端处于打开状态-这将对您有好处。

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

Syntax highlighting for styled-components • Julien Poissonnier

样式化组件的语法突出显示 •Julien Poissonnier

Styled Components has multiple fans in React (and React Native) world. But using Tagged Template Literal as a string without colours is… ugly? Doesn’t nice? Colouring is increasing your productivity and makes code more readable and I’m all into readability.

样式化组件在React(和React Native)世界中有多个粉丝。 但是使用标记模板文字作为不带颜色的字符串是……很丑吗？ 不好吗 着色可以提高您的生产力，并使代码更具可读性，我全都可读。

其他扩展 (Other extensions)

与团队合作 (Working with a team)

吉拉(Jira)和Bitbucket(官方) (Jira and Bitbucket (Official))

Bringing the power of Jira and Bitbucket to VS Code — With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more! • Atlassian

将Jira和Bitbucket的功能引入VS Code-使用Atlassian for VS Code，您可以创建和查看问题，开始解决问题，创建请求请求，进行代码审查，开始构建，获取构建状态等等！ •Atlassian

It gives me great pull-request experience without leaving code editor. Much better than doing reviews inside the browser.

它为我提供了出色的请求请求体验，而无需离开代码编辑器。 比在浏览器中进行评论要好得多。

I make new branches out of Jira tickets without leaving editor. I really like this extensions and I recommend it to all Bitbucket users. It is mostly useful if you are working with the team though.

我在不离开编辑器的情况下利用吉拉门票建立了新的分支机构。 我非常喜欢此扩展，并向所有Bitbucket用户推荐。 但是，如果您与团队合作，这将非常有用。

GitLab工作流程 (GitLab Workflow)

GitLab VSCode integration • Fatih Acet

GitLab VSCode集成 •Fatih Acet

It gives preview of issues and merge requests created or assigned to you. It also extends VSCode command palette and status bar to provide more information about your project.

它提供问题预览以及创建或分配给您的合并请求。 它还扩展了VSCode命令面板和状态栏，以提供有关项目的更多信息。

Marp for VS代码 (Marp for VS Code)

Create slide deck written in Marp Markdown on VS Code.

在VS Code上创建用Marp Markdown编写的幻灯片。

Marp, Markdown Presentation Ecosystem, provides the great experience to create beautiful slide deck. You only have to focus writing your story in Markdown document. • Marp team

Markdown演示生态系统Marp提供了创建精美幻灯片平台的丰富经验。 您只需要集中精力在Markdown文档中编写故事即可。 •Marp团队

I’m a huge fan of Markdown. I also need to make a presentation from time to time so I decided to make my decks in markdown. Additional profit — slides are easy convertible into documentation therefore I make two things with one effort.

我是Markdown的忠实粉丝。 我还需要不时进行演示，所以我决定将自己的牌组降价销售。 额外的收益-幻灯片很容易转换为文档，因此我一臂之力就做了两件事。

This extensions brings Marp ecosystem inside VSCode. For example deck preview. If you are making presentations I encourage you to read more on their website.

此扩展将Marp生态系统带入VSCode。 例如甲板预览。 如果您要进行演示，我鼓励您在其网站上阅读更多内容。

实时分享 (Live Share)

Real-time collaborative development from the comfort of your favorite tools. • Microsoft

借助您喜欢的工具进行实时协作开发。 •微软

This is great for pair programming. Especially useful with remote working and brainstorming with your team from home.

这对结对编程非常有用。 在远程工作和在家中与团队进行头脑风暴时特别有用。

改善编码经验 (Improve coding experience)

全部自动完成 (All Autocomplete)

Create autocomplete items from open files in VSCode. • Atishay Jain

从VSCode中的打开文件创建自动完成项。 •阿蒂沙·Ja那

Not everything is included in built-in autocompleter. Sometimes it is not possible for editor to understand context in the time of writing. When this happen it is useful to have just a list of used words — variable names, function names etc.

内置的自动完成程序并不包含所有内容。 有时，编辑人员在撰写本文时无法理解上下文。 发生这种情况时，仅列出已用词(变量名，函数名等)会很有用。

IntelliJ IDEA键绑定 (IntelliJ IDEA Keybindings)

Port of IntelliJ IDEA Keybindings, including for WebStorm, PyCharm, PHP Storm, etc. • Keisuke Kato

IntelliJ IDEA键盘绑定的端口，包括WebStorm，PyCharm，PHP Storm等。 •Keisuke Kato

For some time I was working with PyCharm then IntelliJ and it was easier at first to have the same shortcuts. Unfortunately It is not fully mapped so there is bunch of keybindings from IntelliJ and some from Visual Studio.

一段时间以来，我先是与PyCharm一起合作，然后是IntelliJ，一开始使用相同的快捷键比较容易。 不幸的是，它没有完全映射，因此有来自IntelliJ和Visual Studio的许多键绑定。

Usually when I need to do something in JetBrains tools it is easier for me to do it as I know many shortcuts. I don’t know if I would recommend it if someone isn’t migrating from those tools. I think it is better to use tools with basic settings unless you are fluent with some other tool and transition would cost too much effort.

通常，当我需要在JetBrains工具中执行某项操作时，因为我知道许多快捷方式，因此对我来说更容易做到。 如果有人不从这些工具迁移，我不知道是否会推荐。 我认为最好将工具与基本设置一起使用，除非您精通其他工具，并且过渡会花费过多的精力。

豆sum (Lorem ipsum)

Generates and inserts lorem ipsum text • Daniel Imms

生成并插入lorem ipsum文本 •Daniel Imms

Helpful tool for prototyping. Instead of copy-pasting some dummy text from the web I just type a command lorem: Insert a paragraph or lorem: Instert a line.

有用的原型制作工具。 而不是从Web复制粘贴一些虚拟文本，我只输入命令lorem: Insert a paragraph或lorem: Instert a line 。

值得检查的主题 (Themes worth checking)

支架灯专业版 (Brackets Light Pro)

A theme basic Brackets Light and more beautiful. • EryouHao

主题基本的支架轻巧美观。 •二优豪

一个Monokai主题 (One Monokai Theme)

A cross between Monokai and One Dark theme • Joshua Azemoh

Monokai和一个黑暗主题之间的十字架 •Joshua Azemoh

My favourite dark colour theme. It is the one :)

我最喜欢的深色主题。 这是一个 :)

其他语言支持 (Other languages support)

Excel查看器 (Excel Viewer)

View Excel spreadsheets and CSV files within Visual Studio Code workspaces. • GrapeCity

在Visual Studio Code工作区中查看Excel电子表格和CSV文件。 •葡萄城

I use it to have nicer CSV preview as I work a bit with those files.

在处理这些文件时，我使用它来获得更好的CSV预览。

壳格式 (shell-format)

shellscript、Dockerfile、properties、gitignore、dotenv、hosts、jvmoptions… DocumentFormat • foxundermoon

shellscript，Dockerfile，properties，gitignore，dotenv，hosts，jvmoptions…DocumentFormat •foxundermoon

It’s like Prettier but for bash.

就像更漂亮，只是为了bash 。

外壳检查 (shellcheck)

An extension to use shellcheck in vscode • Timon Wong

在vscode中使用shellcheck的扩展 •Timon Wong

ShellCheck is an open source static analysis tool that automatically finds bugs in your shell scripts.

ShellCheck是一个开源静态分析工具，可以自动在您的Shell脚本中查找错误。

I write scripts in bash that make some project files transformations. CI scripts are also written in bash. It is useful to have modern editing experience in such a language — I'm not writing scripts often and its syntax is different than anything known to me. It doesn't forgive mistakes.

我用bash编写脚本来进行一些项目文件转换。 CI脚本也以bash编写。 具有这种语言的现代编辑经验非常有用-我不经常编写脚本，并且其语法与我所知的语法不同。 它不会原谅错误。

YAML (YAML)

YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support • Red Hat

Red Hat提供的YAML语言支持，内置Kubernetes和Kedge语法支持 •Red Hat

If you do anything with CI then your config files are usually in YAML. This extension gives you powerful support of the language.

如果您对CI执行任何操作，则您的配置文件通常位于YAML中。 此扩展为您提供了对该语言的强大支持。

XML工具 (XML Tools)

XML Formatting, XQuery, and XPath Tools for Visual Studio Code • Josh Johnson

用于Visual Studio代码的XML格式，XQuery和XPath工具 •Josh Johnson

I installed it to have nice XML formatting features. I like auto formatting :)

我安装它具有不错的XML格式设置功能。 我喜欢自动格式化:)

Originally published at https://koprowski.it.

最初发布在 https://koprowski.it 。

普通英语JavaScript (JavaScript In Plain English)

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！