Код Visual Studio импортирует пользовательское расширение css и js

Я хочу установить пользовательские стили, чтобы иметь другой шрифт для классов и атрибутов в коде Visual Studio, но я не могу этого добиться. Я установил расширение Custom CSS и 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. Кто-нибудь знает, где проблема?

Источник

3 ответа

Решение

Вы должны запустить VSCode от имени администратора, а затем Enable CSS in JS.

Пример пути к VSCode находится в Приложениях:sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron

И не забудьте установить все эти пользовательские шрифты на свое устройство Mac.

Источник

Расширение не сработало для меня, но для чего оно стоит.... пока я возился с этим... если вы перейдете в меню справки, переключите Инструменты разработчика... Он проверит вкладку сети> вы будете видите, есть один файл css, который загружает vscode.

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;
}
Источник

Это очень хорошая конфигурация CSS для вышеупомянутого расширения.

PS: Обязательно обновите имена шрифтов в приведенном ниже коде.

      /* --------------------------------------------------------------------------- */
/* activitybar-icon-extension */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
 font-size: var(--font-size-m);
 opacity: 0.50;
}

/* activitybar-icon-inbuilt */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon {
 font-size: var(--font-size-m);
 opacity: 0.50;
}

/* --------------------------------------------------------------------------- */
/* widget-find */
.monaco-findInput .monaco-inputbox {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.search-view .query-details.more h4 {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.monaco-editor .find-widget .monaco-findInput .input {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.monaco-editor .find-widget > .find-part {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

/* --------------------------------------------------------------------------- */
/* list-text */
.monaco-highlighted-label {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

/* list-line-height-compensate */
.monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row {
 transform: scale(1, 1);
}

/* --------------------------------------------------------------------------- */
/* explorer */
.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows span {
 font-size: var(--font-size-m);
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows {
 margin-left: -12px;
}

.monaco-list-row[aria-expanded] {
 opacity: 0.5;
}

.monaco-list-row[aria-expanded=true] {
 font-weight: bold;
}

.monaco-list-row.selected {
 font-weight: bold;
}

/* --------------------------------------------------------------------------- */
/* sidebar-1-header */
.monaco-workbench .part.sidebar > .title > .title-label h2 {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* sidebar-2-header */
.monaco-action-bar .action-label {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* sidebar-3-header */
.monaco-pane-view .pane > .pane-header h3.title {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* tab */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a,
.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
}

/* --------------------------------------------------------------------------- */
/* statusbar-text */
.monaco-workbench .part.statusbar {
 font-family: var(--font-type-n);
 font-size: var(--font-size-n);
}

/* statusbar-icon */
.monaco-workbench .part.statusbar > .items-container > .statusbar-item span.codicon {
 font-size: var(--font-size-n);
}

/* --------------------------------------------------------------------------- */
/* z */
.mac {
 --monaco-monospace-font: var(--font-type-n);
 font-family: var(--font-type-n);
 font-size: var(--font-size-n);
}

/* --------------------------------------------------------------------------- */
:root {
 --font-size-l: 27.50px;
 --font-size-m: 22.00px;
 --font-size-n: 16.50px;
 --font-type-l: 'HarayKrsna-Extrabold-Ultra-Condensed', monospace;
 --font-type-m: 'HarayKrsna-Ultra-Condensed', monospace;
 --font-type-n: 'HarayKrsna-Extralight-Ultra-Condensed', monospace;
}

/* --------------------------------------------------------------------------- */
/* fixes border */
.monaco-workbench .part > .composite.title {
 border-bottom: 1px solid #808080FF;
}
Источник
Другие вопросы по тегам