如何启用自定义 CSS 和 JS 在 VSCode on Ubuntu

简介

Visual Studio Code 是一款开源编辑器，提供许多自定义功能，其中一个常用的扩展就是自定义 CSS 和 JS。这使得你可以创建你自己的主题，添加你自己的代码处理逻辑，定制你的开发体验。

这里我们将讨论如何在 VSCode on Ubuntu 上启用自定义 CSS 和 JS。

步骤

第一步：下载插件

这里我们需要下载并安装「Custom CSS and JS Loader」插件。首先打开 VSCode，进入扩展面板。

在搜索框内输入「Custom CSS and JS Loader」，下载并安装：

第二步：创建自定义 CSS 和 JS 文件

我们需要新建自定义 CSS 和 JS 文件。在 VSCode 中，按下 ctrl+shift+P（或 cmd+shift+P），输入 Custom CSS and JS: Create New File，然后选择 JavaScript 或 CSS 文件类型进行创建。

第三步：编辑自定义 CSS 和 JS 文件

编辑新建的 CSS 和 JS 文件，添加你想要的样式和逻辑。

第四步：配置自定义 CSS 和 JS 文件

打开 VSCode 设置，在搜索栏中输入 Custom CSS and JS: File Settings：

然后点击「Edit in settings.json」，打开 VSCode 的配置文件。找到 vscode_custom_css.files.styles 和 vscode_custom_css.files.scripts 选项，将文件路径指向你自定义的 CSS 和 JS 文件。

{
  "vscode_custom_css.files.styles": [
    "/home/<你的用户名>/<你的自定义 CSS 文件路径>"
  ],
  "vscode_custom_css.files.scripts": [
    "/home/<你的用户名>/<你的自定义 JS 文件路径>"
  ]
}

第五步：重新加载 VSCode

关闭 VSCode 并重新打开，你将能看到自定义 CSS 和 JS 的变化已经生效了。

结论

自定义 CSS 和 JS 在 VSCode 上是非常有用的，允许您创建自己的主题和添加自定义逻辑。使用「Custom CSS and JS Loader」扩展，你可以很轻松地启用自定义 CSS 和 JS，并且可以在 VSCode 设置中进行配置。