如何打造一款属于自己的 Visual Studio Code 颜色主题
TextMate曾是多年前最流行的代码编辑器之一，其颜色主题的文件后缀为.tmTheme，在本文中我们将其简称为tmTheme格式。Visual Studio Studio 的颜色主题采用的是标准的 TextMate 主题格式，我们可以参考这篇文章Writing a TextMate Grammar: Some Lessons Learned，大概可以理解为这样：编辑器对代码进行解析后，会为每个元素指定一个scope，这个scope即表明此元素是一个关键字还是一个常量，又或者是一个标点符号，通过tmTheme格式的文件来定义相应scope的文字样式。
根据该文章可知道以下是常见的scope列表：
comment
constant
constant.character.escape
constant.language
constant.numeric
declaration.section entity.name.section
declaration.tag
deco.folding
entity.name.function
entity.name.tag
entity.name.type
entity.other.attribute-name
entity.other.inherited-class
invalid
invalid.deprecated.trailing-whitespace
keyword
keyword.control.import
keyword.operator.js
markup.heading
markup.list
markup.quote
meta.embedded
meta.preprocessor
meta.section entity.name.section
meta.tag
storage
storage.type.method
string
string source
string.unquoted
support.class
support.constant
support.function
support.type
support.variable
text source
variable
variable.language
variable.other
variable.parameter
以下是一个tmTheme格式文件的代码片段：
dict
keyname/key
stringKeyword/string
keyscope/key
stringkeyword.control,keyword.other,variable.language,storage.type,storage.modifier,keyword.function/string
keysettings/key
dict
keyforeground/key
string#0808D1/string
/dict
/dict
dict
keyname/key
stringInvalid/string
keyscope/key
stringinvalid/string
keysettings/key
dict
keyforeground/key
string#cd3131/string
/dict
/dict
从上面的代码可以看出，其实这个tmTheme格式的文件似乎也挺简单的，然而初学者而言，难的是不知道scope怎么写，下文会循序渐进地对此进行说明。
创建颜色主题项目
根据官方文档，我们先执行以下命令安装Yeoman代码生成工具来创建一个默认的颜色主题项目：
$ npm install -g yo generator-code
安装完毕之后，进入~/.vscode/extensions目录执行以下命令启动生成器：
$ yo code
说明：~/.vscode/extensions表示用户根目录下的.vscode/extensions目录，之所以在此处新建项目主要是为了不用发布到扩展商店也可以在本地进行使用，并且方便调试。
选择New Color Theme创建颜色主题项目：
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create?
New Extension (TypeScript)
New Extension (JavaScript)
❯ New Color Theme
New Language Support
New Code Snippets
接着需要在命令行下交互式地填写一些问题，以下是我在执行过程中填写的内容：
? What type of extension do you want to create? New Color Theme
URL (http, https) or file name of the tmTheme file, e.g., .
? URL or file name:
? What's the name of your extension? my-theme
? What's the identifier of your extension? my-theme
? What's the description of your extension?
? What's your publisher name? leizongmin
? What's the name of your theme shown to the user? my-theme
? Select a base theme: Dark
需要说明的是，第一个问题URL (http, https) or file name of the tmTheme file需要提供一个已有的tmTheme文件作为基础，此处可直接复制示例中的URL。
稍等片刻，工具自动生成了项目之后，会提示我们执行以下命令开始编辑代该项目：
$ cd my-theme
$ code .
以下是生成的项目的文件结构：
.
├── README.md
├── package.json （扩展信息文件）
├── themes
│ └── Monokai.tmTheme （颜色主题定义文件）
└── vsc-extension-quickstart.md （帮助文件，上面详细说明操作步骤）
首先看看package.json文件：
{
"name": "my-theme",
"displayName": "my-theme",
"description": "",
"version": "0.0.1",
"publisher": "leizongmin",
"engines": {
"vscode": "^1.5.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "my-theme",
"uiTheme": "vs-dark",
"path": "./themes/Monokai.tmTheme"
}
]
}
}
contributes中定义了此扩展项目包含的内容，其中themes表示颜色主题，是一个数组，我们可在此处放入多个颜色主题。以下是themes中每个元素的定义：
label表示颜色主题的名称，即在Preferences: Color Theme列表中显示的名称
uiTheme是指编辑器 UI 的颜色，可选为vs-light和vs-dark，如果我们的颜色主题是深色系的，就选vs-dark
path是tmTheme文件的位置
为了避免混淆，我们可以将文件./themes/Monokai.tmTheme改名为./themes/my-theme.tmTheme，并修改package.json相应的位置。
现在在 Visual Studio Code 中按快捷键⌘Command + Shift + P打开命令面板（Windows / Linux 系统应为Ctrl + Shift + P），输入Color Theme并按回车，再中列表中选择my-theme按回车即可使用刚刚创建的新颜色主题
背景黑色，代码五颜六色的，可以编辑网页，这是什么编辑器
你的要求：背景黑色，代码高亮，能做Web开发。
这些要求很多代码编辑器都能做到，或者加了插件之后就能做到。比如Atom。详见这篇：
网页链接
不过选择编辑器还是最好看自己具体的需求，平台，语言，敲代码习惯等等，这篇里面列了好几种不错的编辑器，都符合你的上述要求，建议自行比较一下：
网页链接
怎么用vscode编写网页爱心
可以使用VSCode打开一个新的HTML文件，然后输入下面的代码：html head title爱心/title /head body div style="text-align:center;" span style="font-size:60px;"#9829;/span /div /body/html然后可以使用VSCode的预览功能，来查看爱心的样子。
拓展：可以使用HTML的CSS样式，来改变爱心的大小、颜色、字体等属性，从而获得不一样的爱心效果。例如：html head title爱心/title /head body div style="text-align:center;" span style="font-size:60px; color:red;"#9829;/span /div /body/html这样就可以得到一个红色的爱心。
vscode运行输出一堆菱形问号
乱码。在vscode软件上属于的程序编码出现乱码现象，由此会输出一堆菱形问号，建议重新检查一下代码。vscode是一款由MicrosoftCorporation开发并推出的用于用于跨平台编写源代码的编辑器。
vscode软件是干嘛的
vscode软件是代码编辑器。
Visual Studio Code是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。
它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时扩展的生态系统。扩展会根据需要经常更新。支持的丰富程度因不同的编程语言及其扩展而异，从简单的语法突出显示和括号匹配到调试和重构。
编程简介
编程是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。编程设计具备逻辑流动作用的一种“可控体系”。
为了使计算机能够理解人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。编程不一定是针对计算机程序而言的，针对具备逻辑计算力的体系，都可以算编程。
vs 跟vscode有什么不同
1、含义上的区别
（1）VS：是来自美国Microsoft Corporation的一系列开发套件，是一个基本完整的开发工具集，包含了整个软件生命周期中所需的大多数工具，例如UML工具，代码管理工具，集成开发环境（IDE）等。通俗地说，是一款编译器。
（2）vscode：是Microsoft公司在美国的一个项目：一个跨平台的源代码编辑器，用于在Mac OS X，Windows和Linux上运行的现代Web和云应用程序。通俗地说，是一款编辑器。
2、功能上的区别
（1）VS：是当前Windows平台应用程序集成开发环境，提供高级开发工具，调试功能，数据库功能和创新功能，以帮助快速创建最高级的应用程序并在各种平台上开发新程序。
（2）vscode：集成了现代编辑器应具有的所有功能，包括语法突出显示，可自定义的热键绑定，括号匹配和代码片段集合，该编辑器还具有开箱即用的Git支持。
3、跨平台的操作能力上的区别
（1）VS：各种功能只能在Windows和macOS（Mac OS X）上运行，而不能跨平台进行编辑。
（2）vscode：是真正的跨平台编辑器，可在用户习惯的平台上使用，而不必迁移到Windows。
