vs扩展代码_最有用的VS代码扩展，可提高您的生产率

vs扩展代码

Visual Studio Code (VS Code) is the most popular IDE for Developers right now because of its simplicity and the availability of extensive extensions.

Visual Studio Code(VS Code)由于其简单性和广泛的扩展性而成为当前最受开发人员欢迎的IDE。

In this article, we will see some of the most useful and popular extensions in the VS Code.

在本文中，我们将看到VS Code中一些最有用和最受欢迎的扩展。

1.相对路径 (1. Relative Path)

Relative Path VS Code extension

相对路径VS代码扩展

This is one of my favorite extensions. This extension allows us to quickly add the import for any file even if it’s deeply nested by using the search functionality.

这是我最喜欢的扩展之一。 此扩展使我们可以快速添加任何文件的导入，即使使用搜索功能将其深深嵌套。

Just press Ctrl+Shift+H or Cmd+Shift+H (Mac)to activate it and search for the file you want to import.

只需按Ctrl+Shift+H或Cmd+Shift+H (Mac)即可将其激活并搜索您要导入的文件。

Relative Path VS Code extension

相对路径VS代码扩展

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

Snippets VS Code extension

片段VS代码扩展

This is a must-have extension If you’re a React.js Developer.

如果您是React.js开发人员，这是必须具备的扩展。

It provides a ton of prefixes that we can use to quickly add snippets of code without wasting time in re-writing the same code again and again.

它提供了大量的前缀，我们可以使用它们来快速添加代码片段，而不会浪费时间一次又一次地重写相同的代码。

Check out my previous article HERE for more details.

在这里查看我以前的文章以获取更多详细信息。

3. GraphQL (3. GraphQL)

GraphQL VS Code extension

GraphQL VS Code扩展

This extension is useful for adding syntax highlighting in .graphql or .prisma files to quickly identify the error if any in the schema files.

此扩展名对于在.graphql或.prisma文件中添加语法突出显示很有用，以快速识别模式文件中的错误(如果有)。

4.更漂亮 (4. Prettier)

Prettier VS Code extension

漂亮的VS Code扩展

This is a must-have extension for every developer whether you’re using HTML or JavaScript or React or any other framework or library.

对于您使用HTML或JavaScript或React还是任何其他框架或库，这是每个开发人员的必备扩展。

It saves your lot of time by avoiding the need for formatting after every line of code. It automatically formats your code when you save the file. It also helps to catch errors in your code as it will not format the code if there is an error for example missing bracket or invalid syntax.

通过避免在每一行代码之后进行格式化，可以节省大量时间。 保存文件时，它将自动格式化代码。 它还有助于捕获代码中的错误，因为如果出现错误(例如缺少括号或语法无效)，它将不会格式化代码。

Check out my previous article HERE to understand its awesome features and learn how to use it.

在这里查看我的上一篇文章，以了解它的强大功能并学习如何使用它。

5.图像预览 (5. Image Preview)

Image Preview VS Code extension

图像预览VS代码扩展

This extension allows us to quickly see the preview for any image in the CSS file on the left side of the image URL or on hover.

此扩展名使我们可以快速在图像URL左侧或悬停CSS文件中查看任何图像的预览。

6.美化JSON (6. Prettify JSON)

Prettify JSON VS Code extension

美化JSON VS代码扩展

If you need to quickly format JSON data then you can create a .json file with the JSON data inside it and from the VS Code command palette press Ctrl+Shift+P or Cmd+Shift+P (Mac) and type Prettify JSON to format the contents of the file.

如果您需要快速格式化JSON数据，则可以创建一个带有JSON数据的.json文件，然后从VS Code命令调色板中按Ctrl+Shift+P或Cmd+Shift+P (Mac)然后键入Prettify JSON以进行格式化文件的内容。

7.微妙的比赛括号 (7. Subtle Match Brackets)

Subtle Match Brackets VS Code extension

微妙的匹配括号VS代码扩展

This extension is very useful to quickly find a matching bracket by showing underline for the matching bracket.

通过显示匹配括号的下划线，此扩展名对于快速找到匹配括号非常有用。

8. vscode样式化的组件 (8. vscode-styled-components)

vscode-styled-components VS Code extension

vscode样式化组件VS Code扩展

If you’re using styled-components in React then this extension will provide syntax highlighting for styled component code which makes it easy to write and debug it.

如果您在React中使用styled-components ，则此扩展将为样式化组件代码提供语法突出显示功能，这使编写和调试起来变得容易。

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

Auto Rename Tag VS Code extension

自动重命名标签VS代码扩展

This extension automatically renames the ending HTML tag while renaming the starting tag and vice versa.

该扩展名会自动重命名结束HTML标记，同时重命名开始标记，反之亦然。

10.自动关闭标签 (10. Auto Close Tag)

Auto Close Tag VS Code extension

自动关闭标签VS代码扩展

This extension automatically closes the ending HTML tag while adding a new HTML tag which helps in avoiding the missing tags issue.

此扩展程序会自动关闭结尾HTML标记，同时添加新HTML标记，这有助于避免丢失标记的问题。

11.降价全合 (11. Markdown All in One)

Markdown All in One VS Code extension

Markdown多合一VS Code扩展

This extension provides shortcut commands to be used in markdown(.md) files like just selecting the text and pressing Ctrl+B or Cmd+B (Mac) to make the text bold. It also allows us to easily preview the markdown files.

该扩展提供了可在markdown( .md )文件中使用的快捷命令，例如仅选择文本并按Ctrl+B或Cmd+B (Mac)可使文本变为粗体。 它还使我们能够轻松预览markdown文件。

12. Git历史 (12. Git History)

Git History extension allows us to see the git history in our repository, compare it with the previous version, create a new branch and a lot more.

Git History扩展使我们可以查看存储库中的git历史记录，将其与以前的版本进行比较，创建新的分支等等。

Just right click on any file/folder from VS Code that is added to git and select Git: View File History option to see all the Git history for that file/folder.

只需右键单击VS Code中添加到git的任何文件/文件夹，然后选择Git: View File History选项即可查看该文件/文件夹的所有Git历史记录。

That’s it for today. I hope you learned something new.

今天就这样。 我希望你学到了一些新东西。

翻译自: https://levelup.gitconnected.com/most-useful-vs-code-extensions-to-improve-your-productivity-cb018d9b6a87

vs扩展代码