【工具】（八）：VSCode 之个性化配置

---

本文主要记录VSCode中的一些个性化插件及配置。

主要插件如下：

• Power Mode
• background
• Live2D
• Live Share Chat
• Browser Preview
• LeetCode
• Docker
• MySQL
• Remote - SSH | Remote - WSL

1.Power Mode

vscode代码特效插件，

1.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 Power Mode，点击 install 安装。

1.2.配置

Ctrl+Shift+P -> 搜索 Open User Settings，找到 settings.json 文件:
做如下配置：

{
  // power mode 输入特效配置
  "powermode.enabled": true,         //是否开启
  "powermode.enableShake": false,    //是否抖动
  "powermode.presets": "flames",   //动画效果 particles | fireworks | flames | magic | clippy
  "editor.renderWhitespace": "all",
  "workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#FFFFFF00"
  },
  // ...
}

1.3.效果

2.background

2.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 background，点击 install 安装。

2.2.配置

可以通过 Ctrl+Shift+P -> 搜索 Open Default Settings 找到默认配置文件，查看配置项，再搜索 Open User Settings，找到 settings.json 文件:
做如下配置：

{
  // 背景图片
  // 自己定制背景图，最多3个
	"background.customImages": [
    "file:///E:/Jusheng_Yao/Pictures/background/others/2018-09-12_背景图片27.jpg",
  ],

	// 插件是否启用
	"background.enabled": true,

	// 背景图样式。
	"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "center",
    "background-size": "cover",
    "background-repeat": "no-repeat",
    "opacity": 0.1
  },
	
	// 使用默认图片
	"background.useDefault": false,

	// 是否使用前景图，这样会使图片放在代码的顶部
  "background.useFront": true,
  
}

2.3.效果

插件自带：

3.Live2D

3.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 Live2D，点击 install 安装。

3.2.配置

{
  // ...
  // 是否开启live2D
	"live2D.use": true,
}

3.3.效果

4.Live Share Chat

4.1.安装

该插件可以让你进行团队交流和协同开发，使开发变得更高效。

Ctrl+Shift+X 打开扩展，搜索插件 Live Share Chat，点击 install 安装。

4.2.效果

官网图片:

5.Browser Preview

5.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 Browser Preview，点击 install 安装。

5.2.效果

6.LeetCode

6.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 LeetCode，点击 install 安装。

6.2.效果

官网图片：

7.MySQL

7.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 MySQL，点击 install 安装。

7.2.效果

8.Remote - SSH

该插件可以让vscode使用任何远程计算机与SSH服务器作为开发环境。
Remote - WSL 插件可以让vscode连接Windows子系统作为开发环境。

8.1.安装

Ctrl+Shift+X 打开扩展，搜索插件 Remote - SSH 或 Remote - WSL，点击 install 安装。

8.2.效果

ssh:

wsl:

---

原文地址：【工具】（八）：VSCode 之个性化配置