VSCode颜值攻略

在 VSCode 或 Cursor 编辑器中安装 Synthwave '84 主题扩展，作者为 Robb Owen。

布局配置

1. 按 Ctrl + Shift + P 打开命令面板
2. 输入 Settings 并选择 VSCode Settings 进入设置页面

1. 搜索 workbench.activityBar.orientation 并设置为 vertical

该设置控制活动栏的显示方向。默认为水平显示，修改为垂直显示后需重启编辑器生效。

1. 搜索 workbench.sideBar.location 并设置为 right

该设置将侧边栏移至编辑器右侧。

背景配置

安装 background 扩展，作者为 shalldie。

1. 按 Ctrl + Shift + P 打开命令面板
2. 输入 Settings 并选择 VSCode Settings 进入设置页面
3. 搜索 background 编辑 settings.json 文件

{
    "background.editor": {
        // 修改此路径为你的背景图片路径
        "images": ["file:///C:/Users/YourUsername/Pictures/wallpaper.png"], 
        "useFront": true,
        "style": {
            "background-position": "center center",
            "background-size": "contain",
            "opacity": 0.1,
            "background-repeat": "no-repeat"
        },
        "styles": [
            {},
            {},
            {}
        ],
        "interval": 0,
        "random": false
    }
}

文件图标配置

安装 material-icon-theme 扩展，作者为 PKief。

打开扩展面板，点击 Set File Icon Theme，选择 Material Icon Theme。

修改 Cursor Rules 头部 UI

Cursor 在 .cursorrules 文件头部使用固定格式来说明文件，并提供可视化 UI。

这些选项实际对应如下代码：

如需直接查看源代码而非使用 UI 面板，请按以下步骤操作：

1. 按 Ctrl + Shift + P 打开命令面板
2. 输入 Open User Settings (JSON)
3. 在 settings.json 中添加以下配置：

"workbench.editorAssociations": {
    "*.cursorrules": "default"
}

保存后再打开 .cursorrules 文件，即可直接查看源代码。

推荐阅读：