本文共 12482 字，大约阅读时间需要 41 分钟。
by Vinh Le
由Vinh Le
No matter whether you are a code newbie or a seasoned developer, code editor is an imperative part of your work. The problem, especially if you are a beginner, is that there are tons of choices for IDEs. And many of them share similar features, functionalities, and even UI. As a result, choosing the right IDE might actually take more time and effort that you thought.
无论您是代码新手还是经验丰富的开发人员，代码编辑器都是您工作中必不可少的部分。 问题(尤其是对于初学者而言)是IDE的选择很多。 它们中的许多共享相似的功能，功能甚至UI。 因此，选择正确的IDE实际上可能会花费您更多的时间和精力。
If your question right now is: “which code editor should I start with?” then I would reply: “It depends, my friend.” Choosing a particular IDE significantly depends on a few factors: what type of developer you are, what kinds of environments you mostly work with, or whether you have an exclusive built-in feature that you absolutely need to get jobs done.
如果您现在的问题是：“我应该从哪个代码编辑器开始？” 然后我会回答：“这取决于我的朋友。” 选择特定的IDE很大程度上取决于以下几个因素：您是什么类型的开发人员，您主要与哪种类型的环境一起使用，或者您是否具有必须完全完成工作的专有内置功能。
I would say that the way to choose one is to try and explore them all, and then pick what suits you best.
我想说的是，选择一种方法是尝试全部探索它们，然后选择最适合您的方法。
As most newbies do, I started with Notepad++ as my first code editor. This is perhaps one of the simplest IDEs that I’ve tried. Later on, as my needs started to require more advanced functionality from the editor, I tried out Brackets, Atom, then Visual Studio Code.
像大多数新手一样，我从Notepad ++开始是我的第一个代码编辑器。 这也许是我尝试过的最简单的IDE之一。 后来，由于我的需求开始要求编辑器提供更高级的功能，因此我试用了Brackets，Atom和Visual Studio Code。
After a decent amount of experimenting, VSCode became my favorite. It impressed me with its modern UI, a wide availability of extensions, as well as great features such as built-in Git and terminal.
经过大量的实验后，VSCode成为了我的最爱。 它现代的用户界面，广泛的扩展功能以及强大的功能(例如内置的Git和终端)给我留下了深刻的印象。
The main purpose of this blog is not to compare different IDEs, but to discuss my experience with VSCode. So in this post, I will:
本博客的主要目的不是比较不同的IDE，而是讨论我对VSCode的经验。 因此，在这篇文章中，我将：
Let’s get into it!
让我们开始吧！
Visual Studio Code (VSCode) is a source code editor developed by Microsoft that can be run on Windows, macOS, and Linux. It is free, open-source, and provides support for debugging as well as built-in Git version control, syntax highlights, snippets, and so on. The UI of VSCode is highly customizable, as users can switch to different themes, keyboard shortcuts, and preferences.
Visual Studio Code(VSCode)是由Microsoft开发的源代码编辑器，可以在Windows，macOS和Linux上运行。 它是免费的开放源代码，并提供调试支持以及内置的Git版本控制，语法突出显示，摘要等。 VSCode的用户界面可高度自定义，因为用户可以切换到不同的主题，键盘快捷键和首选项。
VSCode was originally announced in 2015 as an open-source project hosted on GitHub before releasing to the web a year later. Since then, Microsoft’s code editor has been gaining popularity among developers.
VSCode最初于2015年宣布为托管在GitHub上的开源项目，然后于一年后发布到网络上。 从那以后，Microsoft的代码编辑器在开发人员中越来越受欢迎。
In the , VSCode was ranked as the most popular development environment with around 35% out of over 100,000 respondents saying they use it. More stunningly, this figure is around 39% in the web development field.
在《 ，VSCode被评为最受欢迎的开发环境，在100,000多名受访者中，约有35％表示使用VSCode。 更令人惊讶的是，在网络开发领域，这一数字约为39％。
And with monthly updates, users can expect to enjoy an even better experience — bug fixes, stability, and performance boosts are frequently pushed.
通过每月更新，用户可以期望获得更好的体验-经常推动漏洞修复，稳定性和性能提升。
If you’re like me, and you care about theme of your IDE, finding an appropriate font and theme color is very important. I personally prefer a dark theme and hate the default Consolas font of VSCode on Windows.
如果您像我一样，并且关心IDE的主题，那么找到合适的字体和主题颜色非常重要。 我个人更喜欢深色主题，并且讨厌Windows上VSCode的默认Consolas字体。
So the Monokai color theme and FiraCode font are my current choices. This combination brings a high contrast which I find very pleasant to work with.
因此， Monokai颜色主题和FiraCode字体是我当前的选择。 这种组合带来了很高的对比度，我觉得使用它非常令人愉快。
Find installation guideline of FiraCode .
找到FiraCode的安装指南。
You can also check out OneDarkPro, another great dark theme: in Extensions (Ctrl + Shift + X on Windows), search for OneDarkPro, click Install, and select it from the Color Theme.
您还可以签出OneDarkPro (另一个很棒的深色主题)：在Extensions(在Windows上为Ctrl + Shift + X)中，搜索OneDarkPro，单击Install，然后从Color Theme中选择它。
These are some of my favorite extensions:
这些是我最喜欢的扩展：
: Beautify code in place and make your code more readable
：美化适当的代码并使您的代码更具可读性
Bracket Pair Colorizer: allows matching brackets to be identified with colours
支架对着色器：允许用颜色识别匹配的支架
: a must-have extension for React or JavaScript developers in general. ESLint is used to find problems and typos within your code, and allows you to mark that typo. It also suggests solutions.
：通常是React或JavaScript开发人员的必备扩展。 ESLint用于在代码中查找问题和错别字，并允许您标记该错别字。 它还提出了解决方案。
HTML Snippets: add rich language support for the HTML Markup such as auto-close tags.
HTML片段 ：为HTML标记添加丰富的语言支持，例如自动关闭标签。
JavaScript (ES6) code snippets: pretty self-explanatory
JavaScript(ES6)代码段 ：非常不言自明
Live Server: launch a local server with live reload features for your HTML or PHP site
实时服务器：为您HTML或PHP网站启动具有实时重新加载功能的本地服务器
Markdown Preview Enhanced: run live server for your markdown file.
Markdown Preview增强 ：为您的markdown文件运行实时服务器。
Material Icon Theme: provides icons based on Google’s Material Design. To activate, click Setting => File Icon Theme => Select Material Icon Theme
材质图标主题：提供基于Google材质设计的图标。 要激活，请单击设置=>文件图标主题=>选择材质图标主题
Prettier: beautifully format your JavaScript/ TypeScript/ CSS code.
更漂亮 ：漂亮地格式化您JavaScript / TypeScript / CSS代码。
You can customize almost everything, from font-family and font-size of your code to line-height, by:
您可以通过以下方式自定义几乎所有内容，从代码的字体系列和字体大小到行高。
Going to User Settings (Ctrl + ,)
转到用户设置(Ctrl +，)
In my current setup, I set the fontSize to 14, lineHeight to 22, and tabSize to 3 for my personal preference (and for good readability).
在我当前的设置中，出于个人喜好(并具有良好的可读性)，我将fontSize设置为14，lineHeight设置为22，tabSize设置为3。
Apart from these themes and extensions, I would like to share with you how I use VSCode’s great features to boost productivity. These are all things that I didn’t know as a beginner, and that would’ve been very helpful for leveraging and facilitating my workflow.
除了这些主题和扩展，我想与大家分享我如何使用VSCode的强大功能来提高生产力。 这些都是我初学者所不知道的，对于利用和简化我的工作流程将非常有帮助。
It is kind of inevitable that the more time you are in software development, the more important the Terminal becomes. As a JavaScript developer, I use the Terminal to install packages, run the development server, or even push changes in my current repository to GitHub.
不可避免的是，您在软件开发中花费的时间越多，终端就越重要。 作为一名JavaScript开发人员，我使用Terminal安装软件包，运行开发服务器，甚至将当前存储库中的更改推送到GitHub。
In the beginning, I mostly took care of those tasks with Windows Command Prompt or Git Bash later on. If you use Windows, then you may know how dumb and annoying CMD can be. Git Bash is a nice tool, but switching between apps when you are working is not really a pleasant experience.
一开始，我稍后主要使用Windows Command Prompt或Git Bash来完成这些任务。 如果您使用Windows，那么您可能知道CMD多么愚蠢和令人讨厌。 Git Bash是一个很好的工具，但是当您在工作时在应用程序之间切换并不是一种令人愉快的体验。
VSCode truly solves this problem for me with its fantastic terminal. And the cool thing is you can easily set it up to work the same way as Git Bash, but right inside VSCode! You then have an awesome combination.
VSCode出色的终端真正为我解决了这个问题。 而且很酷的事情是，您可以轻松地将其设置为与Git Bash相同的方式工作，但是就在VSCode内部！ 然后，您将拥有一个很棒的组合。
To access the VSCode terminal, use Ctrl + ` (left side of your 1 key). Then the Terminal will pop up.
要访问VSCode终端，请使用Ctrl +`(1键的左侧) 。 然后终端将弹出。
From here, you can do tons of cool things like create a new terminal or kill the existing one. You can also split-view as well as side-view them.
在这里，您可以做很多很棒的事情，例如创建一个新的终端或杀死现有的终端。 您也可以拆分视图和侧视图。
When you are working on a repository and constantly need to make changes, you would normally find the terminal to commit recent changes, wouldn’t you? Well, VSCode gives you an awesome built-in tool to control your versions.
当您在存储库上工作并且经常需要进行更改时，通常会发现终端要提交最近的更改，不是吗？ 好吧，VSCode为您提供了一个很棒的内置工具来控制您的版本。
By clicking the Git icon located in the left panel or using Ctrl + Shift + G (Windows), you have easy access to Source Control. In here, you can do all the Git thingies. So convenient, isn’t it?
通过单击左侧面板中的Git图标或使用Ctrl + Shift + G(Windows)，您可以轻松访问Source Control。 在这里，您可以做所有的Git事情。 很方便，不是吗？
After a decent amount of time working with VSCode, I strongly believe its key value is based in its all-in-one environment. All of my needs and tasks within my workflow as a Front-end developer is nicely and flawlessly handled.
经过一段时间的使用VSCode，我坚信其关键价值在于其多合一环境。 作为前端开发人员，我在工作流中的所有需求和任务都得到了很好而完美的处理。
To make these advantages clearer, let me walk you through my normal workflow.
为了使这些优点更加清楚，让我引导您完成正常的工作流程。
Let’s say I got some ideas working on a new Music app created by React. I normally start a project by creating a blank folder — so I’ll create a new folder named music_react. After that, I can immediately open the project in VSCode by choosing a right-click option.
假设我有一些想法可以用于React开发的新Music应用。 通常，我会通过创建一个空白文件夹来启动一个项目-因此，我将创建一个名为music_react的新文件夹。 之后，我可以通过选择右键单击选项立即在VSCode中打开项目。
Once I am in my working project, I can quickly create the file and folders with shortcuts in the left panel.
进入工作项目后，可以在左侧面板中使用快捷方式快速创建文件和文件夹。
In this project, I want to use the create-react-app initialization. Therefore, I may need to install that package — not a big deal. I open my terminal by typing Ctrl + `. Amazingly, the terminal automatically navigates to my exact directory. There is no need to change directories anymore.
在这个项目中，我想使用create-react-app初始化。 因此，我可能需要安装该软件包-没什么大不了的。 我通过输入Ctrl +`打开我的终端。 令人惊讶的是，终端自动导航到我的确切目录。 不再需要更改目录。
After entering in the command line to install the npm package, all I need to do is to wait until all dependencies are installed.
输入命令行以安装npm软件包后，我需要做的就是等待所有依赖项安装完毕。
I also want to publish my project on GitHub, so I should probably initialize a Git repository at first. After the packages are installed, I type a Git initialization command right in my terminal as well.
我也想在GitHub上发布我的项目，因此我可能首先应该初始化一个Git存储库。 安装软件包后，我也在终端中输入Git初始化命令。
Once Git is successfully installed, I can commit all pending changes right in the Source Control on the left panel.
成功安装Git之后，我可以在左侧面板的Source Control中立即提交所有待处理的更改。
Then I can continue to work on my project as normal. Besides, I can push all changes to GitHub from my terminal if I want to.
然后，我可以像往常一样继续进行我的项目。 此外，如果需要，我可以从终端将所有更改推送到GitHub。
So that’s my normal workflow in the VSCode environment. I understand that this varies significantly depending on what type of developer you are. A back-end developer might have a completely different workflow compared to mine.
这就是我在VSCode环境中的正常工作流程。 我了解这取决于您是哪种类型的开发人员。 后端开发人员的工作流程可能与我的完全不同。
However, if you are a front-end developer who is just getting to know VSCode, and you want to check it out before getting into it, I hope that this article gives you insight and helps enhance your productivity. After all, my biggest inspiration to write this small guideline is because I could not really find any thorough review of VSCode for newcomers. As a result, this blog hopefully can bring you some value.
但是，如果您是一位刚开始了解VSCode的前端开发人员，并且想在进入VSCode之前先对其进行检查，那么我希望本文能够为您提供见识并帮助您提高生产率。 毕竟，我写这个小指南的最大灵感是因为我真的没有为新来者找到关于VSCode的详尽评论。 结果，该博客有望为您带来一些价值。
Lastly, if your setup is different than mine or there are great extensions that you think are nice to have, don’t hesitate to share in the comments. I am excited to hear from you!
最后，如果您的设置不同于我的设置，或者您认为很不错的扩展很不错，请随时分享评论。 我很高兴收到您的来信！
翻译自:
转载地址：http://fsewd.baihongyu.com/