Visual Studio 代码导入自定义 css 和 js 扩展

Question

我想安装自定义样式，以便在 Visual Studio 代码中为类和属性设置不同的字体。

我安装了Custom CSS and JS Loader 扩展，并按照指南进行操作，但它似乎不起作用。

这是我尝试过的。我创建了一个文件styles.css，并在其中放置了这段代码：

.mtk1,
.mtk2,
.mtk8,
.mtk9,
.mtk10,
.mtk12,
.mtk11,
.mtk7,
.mtk3,
.mtk13,
.mtk16 {
  margin-left: 1px;
  font-family: "Indie Flower";
  font-size: 1em;

}

.mtk7,
.mtk4 {
  font-family: "Arial";
  font-size: 0.7em;
}

/*
For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
  font-family: "Indie Flower";
  font-size: 1.3em;
}

.tabs-container .monaco-icon-label-description-container .label-name,
.sidebar .monaco-icon-label-description-container .label-name,
.quick-open-row .monaco-icon-label-description-container .label-name {
  font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
  font-size: 1em;
}

然后在settings.json我添加了以下设置：

{
  "vscode_custom_css.imports": ["file:///home/mat/vscode_extensions/styles.css"],
  "vscode_custom_css.policy": true
}

我通过在此目录中输入pwd 来获取路径，所以它应该是正确的路径。但是，它仍然不想应用样式，fontFamily 和 fontSize 都没有。

有谁知道问题出在哪里？

Answer 1

扩展对我没有用，但是为了它的价值......当我在搞砸这个......如果你去帮助菜单，切换开发者工具...... . 它会 检查网络选项卡 > 你会看到 vscode 加载了一个 css 文件。

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

我进入这个文件，直接直接编辑了css...

因为我已经有了一个打算与此扩展一起使用的 css 文件...

@import url("file:///Users/adrian/.vscode/vs-code-styles.css");

重新加载并解决问题。

例如，我喜欢我的字体，但我想要的只是带有不同字体系列的标签，然后是属性。经过一些试验和错误，它做到了。里程可能很大程度上取决于 vscode 是否一直在更改这些类。

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}

Answer 2

您必须以管理员身份运行 VSCode，然后运行 ​​Enable CSS in JS。

位于应用程序中的 VSCode 的示例路径： sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron

别忘了将所有这些自定义字体安装到您的 Mac 设备上。