如何设置VSCode以提高生产力

by Chiamaka Ikeanyi

由池中千嘉(Chiamaka Ikeanyi)

如何设置VSCode以提高生产力 (How to set up VSCode to improve your productivity)

Code editors have evolved over the years. A few years ago, there was no Visual Studio Code (VS Code). You were probably using Sublime Text, Atom, Bracket, etc. But with the release of VS Code, it has become the favourite code editor of most developers.

多年来，代码编辑器已经发展。 几年前，还没有Visual Studio Code(VS Code)。 您可能正在使用Sublime Text，Atom，Bracket等。但是随着VS Code的发布，它已成为大多数开发人员最喜欢的代码编辑器。

为什么要VS Code？ (Why VS Code?)

Developers love it because

开发人员喜欢它，因为

• It’s customizable
  可自定义
• Easy Debugging
  简易调试
• Emmet
  Emmet
• Extensions
  扩展名
• Git Integration
  Git集成
• Integrated terminal
  综合终端
• Intellisense
  智能感知
• Theming and more…
  主题及更多…

Now that you’ve seen the advantages of using VS Code, this article will cover VS Code setup and extensions needed when using VS Code for maximum productivity.

既然您已经了解了使用VS Code的优势，那么本文将介绍VS Code的设置以及使用VS Code以获得最大生产力时所需的扩展。

终奌站 (Terminal)

You can set up your terminal to use iTerm2 and ZSh and have your VS Code terminal setup to use that.

您可以将终端设置为使用iTerm2和ZSh，并让VS Code终端设置为使用该终端。

After configuring Zsh, launch the VS Code integrated terminal Terminal > New Terminaland run the command

配置Zsh后，启动VS Code集成终端Terminal > New Termi Termi naland运行命令

source ~/.zshrc

or

要么

. ~/.zshrc

to execute the content of the .zshrc configuration file in the shell.

在外壳程序中执行.zshrc配置文件的内容。

字形 (Font)

FiraCode looks cool because of the support for ligatures. Download and install FiraCode, then add it to your settings.json file.

FiraCode看起来很酷，因为它支持连字。 下载并安装FiraCode，然后将其添加到settings.json文件中。

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,

从命令行启动 (Launching from the command line)

Launching VS Code from the terminal looks cool. To do this, press CMD + SHIFT + P, type shell command and select Install code command in path. Afterwards, navigate to any project from the terminal and type code .from the directory to launch the project using VS Code.

从终端启动VS Code看起来很酷。 为此，请按CMD + SHIFT + P，键入shell命令，然后在path中选择Install code command 。 然后，从终端导航到任何项目，然后输入code . 从目录中使用VS Code启动项目。

组态 (Configuration)

VS Code configurations not specific to a workspace are housed within the settings.json. You can configure VS Code to suit your preferences.

不特定于工作空间的VS Code配置位于settings.json中。 您可以根据自己的喜好配置VS Code。

To launch the settings.json, press

要启动settings.json，请按

CMD + ,

Copy and paste the code below within the settings.json file:

将以下代码复制并粘贴到settings.json文件中：

{    "editor.multiCursorModifier": "ctrlCmd",    "editor.formatOnPaste": true,    "editor.wordWrap": "bounded",    "editor.trimAutoWhitespace": true,    "editor.fontFamily": "Fira Code",    "editor.fontLigatures": true,    "editor.fontSize": 14,    "editor.formatOnSave": true,    "files.autoSave": "onFocusChange",    "emmet.syntaxProfiles": {        "javascript": "jsx"    },    "eslint.autoFixOnSave": true,    "eslint.validate": [        "javascript",        "javascriptreact"    ],    "javascript.validate.enable": true,    "git.enableSmartCommit": true,    "files.trimTrailingWhitespace": true,    "editor.tabSize": 2,    "gitlens.historyExplorer.enabled": true,    "diffEditor.ignoreTrimWhitespace": false,    "workbench.sideBar.location": "right",    "explorer.confirmDelete": false,    "javascript.updateImportsOnFileMove.enabled": "always",}

扩展名 (Extensions)

Below are useful extensions that can improve your developer experience when working on a codebase.

以下是有用的扩展，可以改善在开发代码库时的开发人员体验。

To access these extensions,

要访问这些扩展，

• Go to View -> Extensions

  转到View -> Extensi扩展

• Search for extensions in the marketplace
  在市场中搜索扩展
• Click on Install
  点击安装

1.自动导入 (1. Auto Import)

With this extension, you don’t need to manually import files. If you are working on a component-based project, just go ahead and type the component name and it will be automatically imported.

使用此扩展名，您无需手动导入文件。 如果您正在处理基于组件的项目，只需继续输入组件名称，它将自动导入。

2.添加jsdoc注释 (2. Add jsdoc comments)

This adds a comments block to the code. To use it, highlight the first line of the function, press CMD + SHIFT + P and select Add Doc Comments.

这会将注释块添加到代码中。 要使用它，请突出显示该功能的第一行，按CMD + SHIFT + P然后选择“ 添加文档注释”。

3. ESDoc MDN (3. ESDoc MDN)

In certain scenarios, we tend to forget how a particular thing works. This is where this extension becomes useful. You don’t need to launch your web browser to find out the syntax. All you need is to type

在某些情况下，我们倾向于忘记特定事物的工作方式。 这是此扩展变得有用的地方。 您无需启动网络浏览器即可查找语法。 您只需要输入

//mdn [object].[method];

4. CSS速览 (4. CSS Peek)

As the name implies, this helps you peek on rules applied by a defined style within a codebase and its specificity. It comes in handy when working on legacy codebases.

顾名思义，这可以帮助您窥视代码库中已定义样式所应用的规则及其特异性 。 在处理旧版代码库时，它很方便。

5. GitLens (5. GitLens)

GitLens boosts what you can achieve with Git. It helps you to do a lot more, such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

GitLens增强了您使用Git可以实现的功能。 它可以帮助您做更多的事情，例如无缝浏览Git存储库，浏览代码修订版，作者身份等等。

6. ESLint (6. ESLint)

This integrates ESLint into VS Code to lint your codes. The project you are working on needs to have ESLint installed either locally or globally to take advantage of the features this extension offers.

这会将ESLint集成到VS Code中，以整理您的代码。 您正在处理的项目需要在本地或全局安装ESLint，以利用此扩展程序提供的功能。

To install ESLint locally, run

要在本地安装ESLint，请运行

npm install eslint

or globally using

或在全球范围内使用

npm install -g eslint

You would also need to create .eslintrc configuration file. If you installed ESLint locally, run

您还需要创建.eslintrc配置文件。 如果您在本地安装了ESLint，请运行

./node_modules/.bin/eslint --init

or

要么

eslint --init

for global installation.

用于全局安装。

7. Chrome调试器 (7. Debugger for Chrome)

This lets you debug your JavaScript code right from the Google Chrome browser

这样一来，您就可以直接从Google Chrome浏览器中调试JavaScript代码

8. Google字体 (8. Google Fonts)

Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P and search for Google fonts to proceed.

通过此扩展程序，添加Google字体变得更加容易。 您不再需要在浏览器中搜索字体。 要访问字体列表，请按CMD + SHIFT + P并搜索要继续使用的Google字体 。

9. TODO要点 (9. TODO Highlight)

With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

有很多工作需要优先处理，有时您可能会忘记尚未完成的任务。 TODO高亮显示使它们易于显示。

10.码头工人 (10. Docker)

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

您可以使用此扩展程序即时创建Dockerfile。 它还提供语法高亮，智能感知等。

Press CMD + SHIFT + P and search for Add Docker files to workspace.

按CMD + SHIFT + P并搜索将Docker文件添加到工作区。

11.代码拼写检查器 (11. Code Spellchecker)

This comes in handy to identify typographical errors within the codebase.

这在识别代码库中的印刷错误时非常有用。

12.进口成本 (12. Import Cost)

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

导入成本显示代码中导入包的影响。 它有助于衡量性能瓶颈。

13. HTMLHint (13. HTMLHint)

This extension validates your HTML helping you to write standards-compliant code.

此扩展程序可验证HTML，帮助您编写符合标准的代码 。

14.Kong雀 (14. Peacock)

This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

此扩展使您能够更改工作区的颜色。 当您有多个VS Code实例并且想要快速识别特定实例时，这是理想的选择。

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

安装Kong雀之后，单击设置图标>设置，选择工作区设置选项卡，单击{}并粘贴以下代码。

{    "workbench.colorCustomizations": {        "activityBar.background": "#e90b8d",        "activityBar.foreground": "#fff",        "activityBar.inactiveForeground": "#b5b5b5",    },    "peacock.affectedElements": [        "activityBar",    ]}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

您还可以将titleBar和statusBar添加到受影响的元素，并在colorCustomizations部分中为其添加颜色自定义。

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

要使用默认颜色之一，请按CMD + SHIFT + P，键入Kong雀并选择您喜欢的主题。 这将覆盖为该工作空间定义的settings.json文件中的颜色设置。

15.更漂亮 (15. Prettier)

Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.

编码时是否总是按空格键或Tab键？ 漂亮的救援人员来了。 它格式化代码行并使其可读。

Check out the awesome things you can do with Visual Studio Code here.

在此处查看使用Visual Studio Code可以完成的令人敬畏的事情 。

Feel free to drop what works for you in the comment section and share this article.

随时在评论部分中删除对您有用的内容，并分享此文章。

Also, check out my blog for more articles.

另外，请查看我的博客以获取更多文章。

翻译自: https://www.freecodecamp.org/news/how-to-set-up-vscode-to-improve-your-productivity-fb14c81d4991/