VisualStudioCode如何设置活动栏标题使用小写字母或驼峰形式名称?

VisualStudioCode在英文界面或某些插件的侧边栏上显示的名称是全大写的,对大写字母不敏感,辨识度差,如何将全大写命名设置为小写命名,或者是像intellij-idea-ultimate-edition一样的驼峰命名
image.png
image.png

image.png

阅读 1.1k
2 个回答

好像没提供选项设置这玩意儿。

打开开发者工具可以看到面板标题大写是这个 CSS 样式控制的:

image.png

你可以装个 Custom CSS Loader 插件然后自己编写 CSS 覆盖这个样式:

image.png

交作业了,采取了@大佬的方案

1.安装Custom CSS and JS Loader拓展
2.编写CSS样式表,例如我的

/* 重置侧边栏标题文字展示样式 */
.monaco-workbench .part.sidebar > .title > .title-label h2 {
    text-transform: unset;
}

/* 重置侧边栏全英文的展示样式 */
.monaco-pane-view .pane > .pane-header>.title {
    text-transform: unset;
}

/* 光标指针 */
.cursor.monaco-mouse-cursor-text {
    transition: all 0.1s ease-out !important;
    border-radius: 2px !important;
    background: radial-gradient(
        circle at right bottom,
        hsl(230, 65%, 50%),
        hsl(290, 77%, 52%)
    ) !important;
}

/* 文件tab划过显示过渡条 */
.monaco-workbench .part.editor > .content
.editor-group-container.active > .title
.tabs-container > .tab {
    position: relative;
}
.monaco-workbench .part.editor > .content
.editor-group-container.active > .title
.tabs-container > .tab::after {
    content: '';
    display: block;
    width: 0%;
    height: 2px;
    position: absolute;
    transition: all .4s;
    bottom: 0px;
}
.monaco-workbench .part.editor > .content
.editor-group-container.active > .title
.tabs-container > .tab:hover::after{
    width: 100%;
    background: radial-gradient( circle at right bottom, hsl(230, 65%, 50%), hsl(290, 77%, 52%) ) !important;
}

.monaco-workbench .part.editor > .content
.editor-group-container.active > .title
.tabs-container > .tab[aria-selected="true"]::after{
    width: 100%;
    background: radial-gradient( circle at right bottom, hsl(230, 65%, 50%), hsl(290, 77%, 52%) ) !important;
}

/* 侧边栏选中样式 */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before{
    border-left: none !important;
    position: absolute;
    left: 0px;
    width: 2px;
    height: 100%;
    background: radial-gradient( circle at right bottom, hsl(230, 65%, 50%), hsl(290, 77%, 52%) ) !important;
}

3.配置Custom CSS and JS Loader拓展
image.png

4.由于我是Linux系统,需要让VsCode有自己修改自己的权限
拓展主页说的很清楚,不过Linux用户要多麻烦几步,你安装的VsCode可能套了很多层
image.png
image.png

我直接sudo chown -R $(whoami) /opt/visual-studio-code 一把梭,后续我会给AUR软件仓库作者评论,从源头处理权限问题

最后尝试就可以了
image.png

作业
image.png

该拓展存在问题,持续跟踪 https://github.com/be5invis/vscode-custom-css/issues/233

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏