vscode创建代码截图_如何在VSCode中创建代码配置文件

vscode创建代码截图

This post piggybacks off of the work done by @avanslaars who is a fellow instructor at egghead.io. He shared this in the egghead Slack sometime ago and I never got around to setting this up myself.

这篇文章捎带关所做的工作的@avanslaars谁是老乡教练在egghead.io 。 不久前，他在Slack的蛋头摊上分享了这个信息，而我却从来没有自己进行设置。

Now, I'm setting up a new laptop and decided to give it shot. Following Andy's repo here, I'm going to walk you through the process so you can follow along.

现在，我正在安装一台新笔记本电脑，并决定要进行拍摄。 在这里查看 Andy的仓库之后，我将引导您完成整个过程，以便您可以继续。

Before we begin, a "code profile" is essentially a different settings.json configuration. You can also customize which extensions load per code profile but that's beyond the scope of this article.

在开始之前，“代码配置文件”本质上是不同的settings.json配置。 您还可以自定义每个代码配置文件加载的扩展，但这超出了本文的范围。

1.创建一个code_profiles目录 (1. Create a code_profiles directory)

The first thing we need to do is create a place to store our "profile settings". It doesn't have to be called code_profiles, but we're going to use that term since Andy does and it sounds nice.

我们需要做的第一件事是创建一个存储“配置文件设置”的地方。 它不必称为code_profiles ，但是由于Andy会使用它，因此我们将使用该术语，听起来不错。

He keeps his at the root of his computer so we'll do the same:

他将自己放在计算机的根目录，因此我们将执行相同的操作：

# From the root of your computer ~/
mkdir code_profiles

After your done, cd into that directory:

完成后， cd进入该目录：

cd code_profiles

2.创建您的第一个配置文件 (2. Create your first profile)

Since I'm going to be using this for egghead recordings, I'm going to create a new directory called egghead:

由于我将用它来记录蛋头，因此我将创建一个名为egghead的新目录：

# mkdir name-of-profile
mkdir egghead

Then cd into that directory:

然后cd进入该目录：

cd egghead

3.添加您的settings.json (3. Add your settings.json)

VSCode is expecting a data directory with a User subdirectory. In there, we'll place our settings:

VSCode需要一个带有User子目录的data目录。 在这里，我们将设置：

# -p will create parent directories as needed
mkdir -p data/User

After those are created, change into that new User subdirectory and create your settings.json file:

创建完这些文件后，请转到该新的User子目录并创建settings.json文件：

# Go into that directory
cd data/User

# Create your settings file
touch settings.json

Then open up your settings.json file and add in your settings. I'll add a modified version of what Andy has in his:

然后打开您的settings.json文件并添加您的设置。 我将添加Andy 在他的内容中的修改版本：

{
  "editor.tabSize": 2,
  "editor.quickSuggestions": false,
  "editor.parameterHints": false,
  "editor.suggestOnTriggerCharacters": false,
  "editor.hover": false,
  "editor.fontSize": 18,
  "editor.tabCompletion": true,
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Night Owl",
  "editor.cursorBlinking": "solid",
  "editor.cursorStyle": "line",
  "editor.minimap.renderCharacters": false,
  "terminal.integrated.fontSize": 16,
  "explorer.openEditors.visible": 0
}

4.测试您的新代码配置文件 (4. Test your new code profile)

Now let's make sure we did everything right. Assuming you've already set up VSCode to [launch from the command line](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line, we can launch our new profile by running:

现在，确保我们做的一切正确。 假设您已经将VSCode设置为[从命令行启动]( https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line ，我们可以通过以下方式启动我们的新配置文件运行：

# replace CODE_PROFILE_NAME with the profile name used earlier
code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data

And if it worked, you should see VSCode open with your settings:

如果可行，您应该会看到VSCode已打开您的设置：

5.为您的配置文件创建别名。 (5. Create an alias for your profile.)

I don't know about you, but I don't want to have to remember code --user-data-dir ... so let's take Andy's advice and create an alias.

我不了解您，但是我不想记住code --user-data-dir ...所以让我们听取Andy的建议并创建一个别名。

I'm using zsh so I'm going to add this alias to my .zshrc file like so using the keyword "teach":

我正在使用zsh所以我将使用[teach]这样的关键字将此别名添加到.zshrc文件中：

# replace CODE_PROFILE_NAME with the profile name used earlier
alias teach="code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data"

Now, when you want to use this code profile, all you have to do is type:

现在，当您要使用此代码配置文件时，只需输入：

teach ~/projects/lesson

Woohoo! And that's it.

hoo！ 就是这样。

Special thanks to @avanslaars for sharing this. Here's a link to his code_profiles repo where I learned how to do this.

特别感谢@avanslaars分享了此信息。 这是他的code_profiles库的链接，我在那里学习了如何做。

NOTE: If you are using VSCode in Portable mode, there is a known bug where the flag user-data-dir does not currently work (special thanks to @myfonj for pointing this out).

注意 ：如果在可移植模式下使用VSCode，则存在一个已知的错误 ，其中该标志user-data-dir当前不起作用(特别感谢@myfonj指出了这一点)。

###

###

This post first appeared on DEV.

该帖子首次出现在DEV上 。

? Shameless Plug: if you'd like to see more content like this, subscribe to my newsletter: https://buttondown.email/jsjoeio

？ 无耻的插件：如果您想看到更多类似的内容，请订阅我的新闻通讯： https : //buttondown.email/jsjoeio

翻译自: https://www.freecodecamp.org/news/how-to-create-code-profiles-in-vscode/

vscode创建代码截图