visualstudiocode颜色代码起冲突的时候优先于哪个

Posted 2023-03-09

"contrastActiveBorder"/在活动元素周围额外的一层边框，用来提高对比度从而区别其他元素
"contrastBorder"在元素周围额外的一层边框，用来提高对比度从而区别其他元素
"widget.shadow"编辑器内小组件(如查找/替换)的阴影颜色
"progressBar.background"表示长时间操作的进度条的背景色，是一个向右滑动同时伸缩的窄条
"foreground"整体前景色
"icon.foreground"工作台中图标的默认颜色
"imagePreview.border"图片边框颜色
"errorForeground"错误信息的整体前景色，颜色仅在不被组件覆盖时适用

活动栏
活动栏颜色"activityBar.activeBackground"活动栏当前选中项的背景色
"activityBar.activeBorder"活动栏当前选中项靠近窗口边缘处有竖条，竖条颜色
"activityBar.activeFocusBorder"按下活动栏的选中项，边框呈现此颜色
"activityBar.background"活动栏背景色
"activityBar.border"分隔活动栏与其他栏的边界
"activityBar.foreground"活动栏选中和悬停颜色
"activityBar.inactiveForeground"活动栏图标颜色

徽章
信息标签颜色"activityBarBadge.background"活动栏角标背景色
"activityBarBadge.foreground"活动栏角标前景色
"badge.background"信息标签背景色，资源管理器显示的“一个未保存”等等，此颜色与activityBarBadge.background不会互相覆盖，这还是jupyter notebook编辑器的一些边框颜色和文字的背景色
"badge.foreground"信息标签前景色

面包屑导航栏
面包屑导航颜色"breadcrumb.foreground"面包屑普通文字颜色
"breadcrumb.background"面包屑导航背景色
"breadcrumb.activeSelectionForeground"点击面包屑导航一段字后可见字变成此颜色并弹出菜单
"breadcrumb.focusForeground"面包屑上的一段字按住不放可见此颜色
"breadcrumbPicker.background"点击面包屑导航一段字后弹出菜单的背景色

按钮颜色
按钮颜色"button.background"按钮背景色
"button.hoverBackground"按钮在悬停时的背景色
"button.secondaryForeground"辅助按钮前景色。
"button.secondaryBackground"辅助按钮背景色
"button.secondaryHoverBackground"辅助按钮悬停

调试
调试工具栏
调试工具栏颜色 "debugToolBar.background"调试工具栏背景色，就是调试的时候一个很窄的窗口
"debugToolBar.border"调试工具栏边框
"debugIcon.continueForeground"调试工具栏图标，竖线和三角
"debugIcon.disconnectForeground"拔开的插销
"debugIcon.pauseForeground"两竖线
"debugIcon.restartForeground"循环箭头
"debugIcon.stepBackForeground"弯箭头和圆点
"debugIcon.startForeground"空心三角，这个出现在侧边栏的一个下拉框上，不在调试工具栏里
"debugIcon.stepOutForeground"上箭头和圆点
"debugIcon.stepIntoForeground"下箭头和圆点
"debugIcon.stepOverForeground"弯箭头和圆点
"debugIcon.stopForeground"空心方块

断点
断点颜色 "debugIcon.breakpointForeground"断点圆形符号颜色
"debugIcon.breakpointUnverifiedForeground"未验证断点空心圆圈符号
"debugIcon.breakpointDisabledForeground"在断点圆形符号单机右键，点禁用断点，断点圆形符号变为此颜色
"debugIcon.breakpointCurrentStackframeForeground"当前断点堆栈帧的图标颜色，D形的小框套着断点图标
"editor.stackFrameHighlightBackground"编辑器调试中，当前行背景色
"debugIcon.breakpointStackframeForeground"所有断点堆栈帧的图标颜色，有时候D形的小框会变成这种颜色，在单步调试时也可以看到普通颜色的D形框突然变成此颜色
"editor.focusedStackFrameHighlightBackground"debugIcon.breakpointStackframeForeground对应的编辑器行背景色

调试视图
调试视图"debugTokenExpression.value"、"debugTokenExpression.boolean"、"debugTokenExpression.number"、"debugTokenExpression.string"调试视图的变量中不同种类值颜色，不是变量的颜色，是值的颜色；用光标悬停在编辑器中对应变量上也可以看到这些颜色的文本(编辑器组件相关颜色未设置)
"debugTokenExpression.name"调试视图中显示的变量名称的前景色
"debugView.valueChangedHighlight"在“变量”视图中可见此颜色，当变量值改变时，此颜色作为值的背景色突然出现后逐渐淡出并消失，整个过程时间很短
"debugTokenExpression.error"调试视图中表达式错误的前景色，在2020年4月的更新中这个颜色开始可以在主题中设置，上图并没有展示此颜色
"debugView.stateLabelBackground"“调用堆栈”(CALL STACK)视图中标签的背景色，显示当前会话或线程的状态
"debugView.stateLabelForeground"“调用堆栈”视图中标签的前景色
"debugView.exceptionLabelBackground"调试器因异常而中断时，“调用堆栈”视图中显示的标签的背景色，上图并没有展示此颜色
"debugView.exceptionLabelForeground"调试器因异常而中断时，“调用堆栈”视图中显示的标签的前景色

面板
面板颜色 "panel.background"面板背景色，面板显示在编辑器区域下方，可包含输出和集成终端等视图
"panel.border"面板与编辑器之间的边界
"panelSection.border"面板标签下还可以拖好多的标签，拖进去多个视图就在面板里中水平堆叠，这些视图的分隔线颜色
"panelSectionHeader.background"当多个视图在面板中水平堆叠时，这些视图的头部背景色
"panelSectionHeader.border"上图中没有此颜色，在高对比主题中也没发现此颜色……
"panelSectionHeader.foreground"当多个视图在面板中水平堆叠时，这些视图的头部前景色
"panelTitle.activeBorder"面板标题下划线
"panelTitle.activeForeground"活动面板标题字体颜色
"panelTitle.inactiveForeground"不活动的面板标题的字体颜色
"terminal.ansiBlack"、"terminal.ansiRed"、"terminal.ansiGreen"、"terminal.ansiYellow"、"terminal.ansiBlue"、"terminal.ansiMagenta"、"terminal.ansiCyan"、"terminal.ansiWhite"、"terminal.ansiBrightBlack"、"terminal.ansiBrightRed"、"terminal.ansiBrightGreen"、"terminal.ansiBrightYellow"、"terminal.ansiBrightBlue"、"terminal.ansiBrightMagenta"、"terminal.ansiBrightCyan"、"terminal.ansiBrightWhite"这些是集成终端里有色文字的颜色
"terminal.background"集成终端背景色
"terminal.border"并排两个集成终端分割线颜色
"terminal.foreground"集成终端普通文字颜色
"terminal.selectionBackground"终端选中内容的背景颜色，此颜色不透明的话会遮挡文字
"terminalCursor.background"设置"terminal.integrated.cursorStyle": "block"之后可见，终端光标变成方块，被方块盖住的字体成为此颜色
"terminalCursor.foreground"终端光标的前景色
"debugConsole.errorForeground"调试REPL控制台中错误消息的前景色，调试控制台输入支持语法着色
"debugConsole.warningForeground"调试REPL控制台中警告消息的前景色
"debugConsole.infoForeground"调试REPL控制台中信息消息的前景色
"debugConsole.sourceForeground"调试REPL控制台中源文件名的前景色
"debugConsoleInputIcon.foreground"调试控制台输入标记图标的前景色

拖放
拖放颜色"activityBar.dropBorder": "#000"当拖动活动栏上的图标时将可以看到此颜色
"panel.dropBorder"面板头部的标签也可以拖动，拖动将看到此颜色
"panelSection.dropBackground"面板向下方拖动到头部以外时可以看到，这样拖动减少了头部的标签数量
"sideBar.dropBackground"侧边栏拖拽节标题可见
"editorGroup.dropBackground"编辑器选项卡拖拽可见
"list.dropBackground" 参考技术A 先来说说我为什么选择Visual Studio Code，下面就简称为VSCode，使用VSCode最主要的一个原因是因为他结合EsLint之后，我们写完代码保存的时候他会对代码进行检查，如果发现代码不符合规范那么他可以自动对代码进行修复，这功能是不是简直无敌啊，还有就是他是由Microsoft所研发的并且开源、跨平台、免费的，然后就是在安装中文插件后对中文的支持特别好，因为对中文完全支持所以上手就轻松很多了。而且和其他ide类似如果想要支持其他的功能只需要安装相应的插件就可以了。
在来看看界面吧
界面的布局：
在这里插入图片描述
实际使用界面：这里使用的主题是One Dark Pro
在这里插入图片描述

配置

设置类型

设置分为两种，用户设置和工作区设置。

用户设置： 这种方式进行的设置，会应用于该用户打开的所有工程；其实可以理解为全局配置
工作空间设置：工作空间是指使用VS Code打开的某个文件夹，在该文件夹下会创建一个名为.vscode的隐藏文件夹，里面包含着仅适用于当前目录的VS Code的设置，工作空间的设置会覆盖用户的设置。可以理解为局部配置
每个人都有自己的偏好，在使用VS Code进行开发时，都会根据自己的习惯来对VS Code进行用户级别的配置。
但是当多人共同完成某个项目的时候，该项目会有一定的编码规范，如: 编辑某个语言时的设置，代码的缩进等等，这个时候就需要对该项目进行单独的工作空间级别的设置。

修改状态栏颜色

在默认情况下底部状态栏颜色是真的不忍直视，那么深的紫色和界面格格不入，所以这个对于我而言是必须要改的
进入文件–>首选项–>设置然后搜索workbench.colorCustomizations,在setting.json中添加项目内容，注意这里为了全局使用应该设置在用户设置里面

添加内容：

"workbench.colorCustomizations":
"statusBar.background" : "#333333",
"statusBar.noFolderBackground" : "#343D46",
"statusBar.debuggingBackground": "#ABB1BA"

1
2
3
4
5
1
2
3
4
5
例如：


"workbench.colorTheme": "Mariana (Sublime)",
"workbench.statusBar.visible": true,
"diffEditor.ignoreTrimWhitespace": true,
"workbench.colorCustomizations":
"statusBar.background" : "#333333",
"statusBar.noFolderBackground" : "#343D46",
"statusBar.debuggingBackground": "#ABB1BA"


1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
自定义代码块

例如配置vue模板代码块。

使用快捷键Ctrl+Shift+P打开搜索栏–>输入snippet–>选择首选项

打开了snippet搜索栏–>输入vue–>选择vue.json

在打开的vue.json文件中添加模板；


"Print to console":
"prefix": "vuetmp",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default ",
" data() ",
" return \n",
" ",
" ,",
" methods: \n",
" ,",
" components: \n",
" ",
"",
"</script>\n",
"<style>\n",
"</style>",
"$2"
],
"description": "创建一个自定义的vue组件代码块"


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
定义好之后在vue文件中输入前缀vuetmp，直接选择模板就可以自动生成模板了

插件

插件给你一切可能，VSCode之所以好用是因为它里面包含了丰富的插件。下面是一些常用的插件

Chinese (Simplified)

中文插件 安装后会将页面改为中文版的，而且对中文支持很好
Vetur

vue插件 语法高亮、智能感知、Emmet等
EsLint

语法纠错，以及自动修复，

使用EsLint需要在项目中添加EsLint的语法检查配置，需要在项目中添加.eslintrc.js文件，.eslintrc.js文件的配置我会在文章后面给出，大家可以根据自己的需要进行修改

开启自动修复，在settings.json文件中添加（建议设置在工作空间级别）


"files.autoSave": "off",//关闭自动保存
"eslint.run": "onSave", //eslint在保存时运行
"editor.codeActionsOnSave":
"source.fixAll.eslint": true //保存时自动修复


1
2
3
4
5
6
7
1
2
3
4
5
6
7
Debugger for Chrome

在VSCode中结合使用debug的插件
主题插件

常用主题
Bimbo
One Monokai Theme
Mariana
One Dark Pro
Dracula Official
Auto Close Tag

自动闭合html/XML标签
Auto Rename Tag

自动完成另一侧标签的同步修改
javascript(ES6) code snippets

ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
这个安装之后还得自己去看他的快捷操作，可以直接到安装插件哪里搜索然后再主页查看
HTML Snippets

智能提示html标签，具体看主页使用，其实就是直接输入标签名他自动给你补全
Path Intellisense

自动路劲补全
HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式
jQuery Code Snippets

jquery智能提示，写jquery可以用
js-beautify for VS Code

格式化 html ,js,css 。如果使用了ESlint这个基本不需要了
Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块
GitLens

方便查看日志，增强git。不过感觉有点麻烦，具体参考：https://www.jianshu.com/p/a91cb8a2e55d
Markdown Preview Enhanced

Markdown 预览编写插件
常用快捷键：
ctrl-shift-v 打开预览
shift-enter 运行代码块
markdownlint

markdown 语法纠错
快捷键

自定义快捷键

自定义快捷可以通过：首选项–>键盘快捷键方式 来打开，打开后直接在搜索框输入快捷按钮或者描述关键字进行搜索

更改的快捷键

触发建议

默认触发建议是Ctrl + space（空格），和输入法冲突
更改为alt + /
保存所有

默认保存所有是Ctrl + k s
把保存书所有设置为Ctrl + Shift + s ，而默认Ctrl + Shift + s为另存为这个并不常用，所以调换快捷键
更改为：Ctrl + Shift + s
转换大小写

默认情况下转换大小写是没有快捷键的。搜索transform添加快捷键为大写改为：Ctrl + shift + x，小写改为：Ctrl + shift + y，而这两个默认都有了不过感觉不会常用所以改把之前的改为Ctrl + alt+ x 和 Ctrl + alt+ y
大写：Ctrl + shift + x
小写：Ctrl + shift + y
合并行

默认合并行是没有添加快捷键的，搜索合并然后将合并行的快捷键改为Ctrl + Alt + j
更改为: Ctrl + Alt + j
编辑类

Ctrl + Shift + \
在括号的开头和结尾之间跳转
Alt + 单击 或Ctrl + d 按多次
在不同的位置添加光标实现多处编辑，其中Ctrl + d他会在文本中自动搜索当前选中的单词并且在单词后面添加光标从而实现多出编辑
Ctrl + shift + space
参数触发建议
shift + alt + f
格式化文档，不过有了eslint之后也没有必要了，有了eslint之后保存的时候会自动格式化
alt+ u
回到上一个光标位置
Alt + <-- (左箭头)/–>(右箭头)
alt + 左箭头表示回到上一个编辑位置，alt + 右箭头表示从上一个编辑位置回来
Alt + 上箭头/下箭头
上下移动行
删除当前行
默认为Ctrl + Shift + k 不过我们通常习惯使用Ctrl+d，所以可以调换一下这两个快捷建。当然其实也可以使用Ctrl + x直接剪切来实现类似的效果
Shift+alt+向下箭头
快速复制当前行到下一行
Shift+alt+向上箭头
快速复制当前行到上一行
复制某一行
将光标移动到某一行上不选中任何数据直接按Ctrl+c就是复制当前行
跳转到函数的定义处
选择函数然后按f12就可以跳转到函数的定义处
参考函数在哪里被引用了
选中函数名，然后按Shift+f12就会显示一个提示框，里面可以查看函数在哪里被引用了
文件操作类

Ctrl + w
关闭当前打开文件
搜索替换
单文件为Ctrl + f 和Ctrl + h，多文件为Ctrl + Shift + f 和 Ctrl + Shift + h
Ctrl + e 或 Ctrl + p
通过文件名或路径快速打开某个文件
公共类

Ctrl + shift + p
打开命令面板
因为这个工具对中文的支持很好所以上手也挺简单的，很多功能普通的ide其实没有什么很大的区别例如像git的使用之类的，这里就不多说了，最后附加上ESLint的配置文件
.eslintrc.js 参考技术B Keyboard Shortcuts editor）键盘快捷键编辑器
Source control 版本控制
git
macOS：Sierra Tabs
macOS：鼠标滑动导航
集成终端连链接和列范围
（Languages）代码语言
TypeScript 2.3
键入检查JavaScript文件
per file
使用设置
使用JSConfig或TSConfig
更改TypeScript版本而不重新加载VS代码
Markdown 预览和缩放
Markdown的环绕代码提示|补全片段
（Editor）编辑区 参考技术C 准备两个 Gitee 账号

2. A账号使用VS Code处理代码，B账号使用 记事本处理代码

3.两个账号都拉取最新代码

4.模拟 A , B 两账号，修改相同的文件，并且 B 要在 A之前提交，让 A不能正常拉取代码

5. B账号修改代码，并推送远程库