WebStorm颜色和字体设置

颜色和字体

作为一名开发人员，需要处理大量的文本资源：编辑器中的源代码、搜索结果、调试信息、控制台输入和输出等。颜色和字体样式用于格式化这些文本，让你一目了然地抓住重点。

选择配色方案

WebStorm支持切换配色方案，在不同的配色方案中自定义字体和颜色。下图是默认的几种配色方案：明亮、黑暗、高对比度


配色方案与主题不同，主题定义了窗口、对话框和控件的外观，配色方案定义的是字体和颜色。

选择配色方案

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”。或者，在“Appearance & Behavior | Appearance”选择一个方案。
2. 使用“Scheme”列表，选择配色方案。
   
   单击“更改IDE主题（Change IDE Theme）”导航到设置中的“Appearance & Behavior | Appearance”页面，可以在该页面上配置界面主题。

自定义配色方案

复制配色方案

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”。
2. 选择配色方案，点击设置按钮，选择复制（Duplicate）。
   
3. （可选）要重命名方案，点击设置按钮，选择重命名（Rename）。
   预定义的配色方案，名称加粗显示。修改了的预定义配色方案，以蓝色字体显示。要还原为默认设置，请单击设置按钮，选择“Restore Defaults”。预定义的配色方案不能删除。

自定义颜色和字体设置

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”。
2. 此节点下的页面定义了代码和WebStorm界面的各种元素的颜色。例如，“General”页面定义了基本的编辑器颜色，如：侧边栏、行号、错误、警告、弹出窗口、提示等。
3. “语言默认值（Language Defaults）”页面包含常见的语法高亮显示设置，默认情况下，这些设置应用于所有支持的编程语言。在大多数情况下，配置默认值并在必要时对特定语言进行调整就足够了。要更改元素的继承颜色设置，请清除“Inherit values from”复选框。
   

语义高亮

默认情况下，配色方案为源代码中的保留字和其他符号定义了语法高亮显示，包括：运算符、关键字、建议、字符串等。如果你有一个包含许多参数和局部变量的函数或方法，可能很难一眼就能将它们区分开来。可以使用语义高亮显示为每个参数和局部变量分配不同的颜色。

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme | Language Defaults | Semantic highlighting”。
2. 选中“Semantic highlighting”复选框，也可以修改每个参数的颜色。
   

共享配色方案

如果你有习惯的配色方案，WebStorm支持导入和导出，还可以与其他开发人员共享配色方案。

将配色方案导出为XML

WebStorm可以将配色方案保存为扩展名为.icls的XML文件。然后，你可以把文件导入到其他WebStorm的安装实例中。

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”。
2. 从列表中选择一个配色方案，单击设置按钮，点击“Export | IntelliJ IDEA color scheme (.icls)”。
3. 指定文件的名称和保存位置。

将配色方案导出为插件

插件可以上传到插件库供其他人安装。这种格式比XML文件有几个优点，包括元数据、反馈、下载统计和版本控制（当你上传插件的新版本时，用户会收到通知）。

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”。
2. 从列表中选择一个配色方案，单击设置按钮，点击“Export | Color scheme plugin .jar”。
3. 在“创建配色方案插件（Create Color Scheme Plugin）”对话框中，指定版本详细信息和开发者信息。然后单击“确定”。
   当安装带有配色方案的插件时，该方案将被添加到预定义方案列表中。

导入配色方案

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”。
2. 从列表中选择一个配色方案，单击设置按钮，点击“Import Scheme”。

字体

自定义默认编辑器字体

默认字体将在所有配色方案中使用和继承。

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Font”。
2. 从列表中选择字体。
   
3. 点击Apply应用。

自定义配色方案字体

如果你打算共享方案或在其他平台上使用，不建议这样做。在这种情况下，请使用默认的全局字体设置。

1. 按 Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme | Color Scheme Font”。
2. 选择“Use color scheme font instead of the default”，使用配色方案字体而不是默认字体。
   

自定义控制台字体

默认情况下，控制台中的文本使用与配色方案相同的字体。要在控制台中使用其他字体，请执行以下操作：

1. 按Ctrl+Alt+S，打开设置对话框，选择“Editor | Color Scheme”，选择“Console Font”和“Console Color”。
2. 选中“Use console font instead of the default”复选框，使用控制台字体而不是默认字体。
   

安装新字体

WebStorm可以使用操作系统或用于运行WebStorm的Java运行时中的任何字体。如果你想添加另一种字体，你需要在操作系统中安装它，然后重新启动WebStorm，就可以在WebStorm中进行配置。

1. 下载所需的TTF字体包并解压缩字体文件（.TTF）。为了使字体正常工作，它应该至少有4个文件：正常、粗体、斜体和粗斜体。
2. 根据你的操作系统，执行以下操作之一：

• Windows
  选择所有字体文件，右键菜单选择安装。
• macOS
  选择所有字体文件，双击打开字体预览，然后单击底部的“安装字体”。
• Linux
  将字体解压缩到当前用户的 ~/.local/share/fonts 或 /usr/share/fonts，在系统范围内安装字体，然后运行 fc-cache -f -v。

3. 重新启动WebStorm，然后在设置对话框的“Editor | Font”页面查看安装的新字体。

生产力提示

查看当前符号的配色方案

将光标放在要查看的符号处，按 Ctrl+Shift+A，搜索“Jump to Colors and Fonts”操作，并执行。

查看编辑器使用的字体

按 Ctrl+Shift+A，搜索“Show Fonts Used by Editor”操作，并执行。

使用快速切换

1. 按 Ctrl+` 或从主菜单中选择“View | Quick Switch Scheme”。
2. 在弹出窗口中，选择“Editor Color Scheme”，然后选择要使用的配色方案。