完整教程：VScode 入门（设置篇）

VS Code的设置有两种类型：用户设置和工作区设置。
用户设置适用于所有工作区，相当于每一个项目都默认遵循的设置。
工作区设置仅适用于当前工作区，工作区设置会覆盖用户设置，即某个工作区先遵循工作区设置，再遵循用户设置。

VS Code 会将设置值存储在 settings.json 文件中，JSON文件的键值对相当于某个设置的配置。
我们可以通过两种方式修改VS Code 的设置。一种是进入通过编辑 settings.json 文件的方式，另一种是找到设置选项，进入设置编辑器，在图形界面中进行设置的选择与修改。

一、如何进入设置

如何进入设置编辑器

设置编辑器的意思就是设置界面。
先说如何进行图形化的设置更改，也就是我们习惯的鼠标勾选的设置方式。主要有三种方法进入：

1. 鼠标依次点击：文件>首选项>设置。
2. 使用快捷键ctrl+,直接打开设置。
3. 在命令面板 (Ctrl+Shift+P) 中搜索并选择：打开用户/工作区设置。（注意是不带JSON的选项）

这里的案例图，打开的是用户设置，右边的Workspace则是工作区设置。

如何进入setting.json

通过编辑setting.json达到更改设置的方式，适合有一定开发基础，并对VScode比较熟悉的人。
通常我们是在命令面板 (Ctrl+Shift+P) 中搜索并选择：打开用户/工作区设置 (JSON)，进入setting.json中。
如果是用户设置，就会打开用户文件夹下的setting.json，如果是工作区设置，就会在当前工作区的.vscode文件夹下生成一个setting.json文件并打开。

此外，如果直接搜索 “设置”，会出现打开默认设置JSON的选项，对应的JSON文件是defaultSetting.json 这个文件是只读的，无需理会，我们自定义的设置也不需要在这里修改。

还有一个小方法，就是在设置界面中，有些设置选项会自带在setting.json中编辑的提示，点击也同样可以进入，但是进入之后会自动生成这个设置选项的键，光标会自动跳到对应的值输入行中。

setting.json文件位置

关于用户 settings.json 的具体位置：

• Windows %APPDATA%\Code\User\settings.json
• macOS $HOME/Library/Application\ Support/Code/User/settings.json
• Linux $HOME/.config/Code/User/settings.json

工作区setting.json会自动生成在当前工作区的.vscode文件夹下。

---

二、如何设置

搜索栏

在设置界面，顶部会有一个搜索框，我们输入一些关键字，会筛选显示出相关的设置，这样可以方便我们快速找到相关的设置。
例如，我们搜索"Theme"，或者“主题”。就会列举出主题相关的设置：

除此以外，搜索框的最右侧有个类似于漏斗的图标，单击它，会根据关键词进行过滤，筛选出过滤后的相关设置。
例如，我们先点击漏斗左边的图标，把搜索框清空，再单击选择过滤器>已更改，此时搜索框会出现@modified关键字，设置界面会将修改的设置都筛选出来，比如我刚才修改了主题为浅色主题。

下面是几个常用的过滤器，可以手动输入，也可以在右侧过滤器图标中选择。
过滤器：

• @ext - 特定于扩展的设置。您提供扩展 ID，例如@ext:ms-python.python。
• @feature - 特定于功能子组的设置。例如，@feature:explorer显示文件资源管理器的设置。
• @id - 根据设置 ID 查找设置。例如，@id:workbench.activityBar.visible。
• @lang - 根据语言 ID 应用语言过滤器。例如，@lang:typescript。
• @tag - 特定于 VS Code 系统的设置。例如，@tag:workspaceTrust用于与工作区信任相关的设置，或@tag:accessibility用于与辅助功能相关的设置。

左上角设置⚙图标

每一个设置选项的左上角都会有一个齿轮图标，点击后会出现上下文菜单，会有如下的选项：
重置设置为默认值、复制设置 ID、复制 JSON 名称-值对、复制设置 URL 。

从JSON的角度：
设置ID就是键值对的键，如果不知道想修改的设置的键名，就可以复制该ID。
复制为JSON就会把键值对复制下来。将复制的JSON粘贴在setting.json中，保存，就等价于设置界面的修改。

设置 URL 可以从浏览器地址栏导航到设置编辑器中的特定设置。URL 格式为vscode://settings/，其中是您要导航到的设置的 ID。例如，要导航到workbench.colorTheme设置，就需要使用 URL vscode://settings/workbench.colorTheme。

JSON文件的编辑

上述是讲如何在设置编辑器中的进行设置，是一种图形界面的方式。
通过JSON文件的编辑，我们也同样可以实现设置的配置。相对于图形化的操作，编辑文件需要确保编辑的关键字没有拼写出错。

JSON文件以{}包裹，里面存放着一组组的键值对，每组键值对以,分隔。键必须是用双引号""包裹形成的字符串，值可以是字符串，数组，数字，bool，JSON对象。
其他JSON相关知识可自行搜索。

以下是只进行两项设置修改的setting.json的案例：

一个是字体的设置，一个是文件自动保存的设置。

{
"editor.fontFamily": "'JetBrains Mono','Cascadia Mono', monospace",
"files.autoSave": "afterDelay"
}

在setting.json中，通过指定某项设置 ID 和值，即可完成对该项设置的修改。
为了不容易出错，可以根据上文提到的，点击设置选项左上角的⚙图标，然后选择将设置复制为 JSON操作，复制设置的相应 JSON 名称-值对，粘贴到JSON中。
虽然这是一步多此一举的操作，因为当我们在图形化中设置好后，其实setting.json中就会自动生成相应的键值对，但是这可以帮助我们学习与加深JSON配置的理解。

此外，某些设置只能在settings.json中编辑，例如工作台：颜色自定义，在设置编辑器中会有一个在settings.json中编辑的链接。

---

三、常用的一些设置

{
// 编辑器与基础设置
"editor.fontSize": 14,
"editor.fontFamily": "'JetBrains Mono', 'Cascadia Mono', monospace",//显示的字体家族
"editor.fontLigatures": true,//启用连字，比如 != 会显示成不等号≠，C++中的->会显示→
"editor.tabSize": 2,    //tab缩进大小
"editor.formatOnSave": true,  //自动修正格式
"editor.wordWrap": "on",    //自动换行
"editor.minimap.enabled": false,    //是否启用右侧代码缩略图
// 自动代码修复，需要拥戴扩展，如ESLint
"editor.codeActionsOnSave": {
"source.fixAll": true
},
//代码提示
"editor.parameterHints.enabled": true,//参数面板提示
"editor.tabCompletion": "on",  //tab补全   
// 文件自动保存
"files.autoSave": "afterDelay",  //自动保存方式
"files.autoSaveDelay": 1000,   //1000ms
// 工作台与外观
"workbench.colorTheme": "Default Dark+",
"workbench.iconTheme": "vscode-icons",
//git设置
"git.path": "C:\\Dev\\Git\\bin\\git.exe"
//自定义集成终端
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe"
// 扩展设置示例 - ESLint
"eslint.enable": true,
"eslint.autoFixOnSave": true
}

---

配置分类	配置键 (Key)	示例值 (Value)	说明
编辑器	editor.fontSize	14	设置编辑器字体大小
	editor.tabSize	2	定义 Tab 键缩进的空格数
	editor.wordWrap	"on"	设置自动换行
	editor.minimap.enabled	false	关闭代码缩略图，扩大编辑区域
保存与格式化	editor.formatOnSave	true	保存时自动格式化代码
	editor.codeActionsOnSave	{ "source.fixAll": false }	保存时自动修复可修复的小问题
文件与工作区	files.autoSave	"afterDelay"	自动保存文件（延迟后）
	files.exclude	{ "**/*.js": true }	在工作区中排除特定类型文件
外观与主题	workbench.colorTheme	"Default Dark+"	设置颜色主题
	workbench.iconTheme	"vscode-icons"	设置文件图标主题（需安装相应插件）

持续更新中。。。。。。。。。。。。。。。。。。。。。。。。。