M310ct's blog

重构VSCode：打造高效开发环境

2025-07-20

0.前言

VSCode是由微软开发的一款开源代码编辑器。具有跨平台、可拓展等优势。相对于Jetbrains家族的IDEs来说更为轻量，并且一个配置得当的VSCode可以进行全栈开发。

本文旨在记录VSCode配置的过程。

文章为了方便， 将直接给出 settings.json 的配置代码而不是在设置中进行手动点击。

所有插件都可以在插件商店中搜索，我也会给出每个插件的网址。

打开settings.json 的方法

CTRL + , 打开设置界面。在右上角有一个“打开设置（json）”的图标，单机即可打开。

所有的配置文件按照 json 格式编写，全部写在一对大括号内，文中出现的代码不包括大括号。

1.基础设置

添加中文插件

CTRL + Shift + x 打开插件，搜索chinese，选择中文简体安装，选择右下角弹框中的Change Language and Restart 或手动重启。

插件地址：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code - Visual Studio Marketplace

设置字体大小于样式

由于我的显示器较大所以我设置的字体比较大，可以更具自己的习惯进行修改。

"editor.fontSize": 25, //设置字体大小
"editor.fontFamily": "Monaspace Radon Frozen, monospace",

Monaspace字体下载连接：Monaspace

设置光标样式

"editor.cursorBlinking": "phase",
"editor.cursorSmoothCaretAnimation": "on",//开启光标平滑动画
"editor.cursorStyle": "line",

设置主题

"workbench.colorTheme": "Noir Vira",

NoirVira是一款黑色风格的主题，我十分推荐，因为是我自己开发的。

主题地址：Noir Vira - Visual Studio Marketplace

控制台设置

"terminal.integrated.fontSize": 20, //控制台字体
"terminal.integrated.cursorBlinking": true, //开启控制台光标闪烁

折行设置

当代码的某一行过长我们希望能够自动折叠这行代码。

"editor.wordWrap": "on",              // 打开自动换行
"editor.wordWrapColumn": 80,          // 控制在哪一列自动换行（可选）
"editor.wrappingIndent": "same"       // 换行后保持缩进

2.插件系统搭建

前端插件

代码增强插件

编程语言插件

美化插件

动画插件

安装VSCode Animations插件，根据右下角提示一直点击确认就可以获得一个丝滑的VSCode。

注意：如果重启也不能让动画设置生效请可尝试重启电脑。

如果想给鼠标也添加动画，在settings.js中添加：

"animations.CursorAnimation": true

3.远程开发于容器开发

如果你在服务器（比如 Ubuntu Server）上开发，或者在 Docker 容器里跑项目，VSCode 的远程功能非常方便。

远程 SSH 连接服务器

安装插件：Remote - SSH
插件地址：Remote - SSH

按下 F1 → 输入并选择 Remote-SSH: Connect to Host... → 添加主机。

使用 Docker 容器开发

安装插件：Dev Containers
插件地址：Dev Containers

按下 F1 → 输入并选择 Dev Containers: Attach to Running Container... → 选择容器即可进入。

4.Git 工作流

VSCode 原生就支持 Git，只要你本地已经安装了 git，就可以直接使用。

初始化 Git 仓库

点击左侧菜单的 源代码管理（分支图标） → 点击 初始化仓库。

或者直接打开终端输入：

bash

复制编辑

git init

常用操作

先绑定远程仓库地址：

bash

复制编辑

git remote add origin git@github.com:你的用户名/你的项目.git

然后执行：

bash

复制编辑

git push -u origin main

Git 插件推荐

总结

VSCode 是一款高度可定制的编辑器，一个配置得当的 VSCode 足以覆盖大多数开发需求。

本文从基础设置、插件体系、远程开发、Git 集成等方面，梳理了完整的定制过程，重点突出颜值 ✚ 效率 ✚ 多语言适配。

你可以按需取用，也可以在此基础上打造属于你自己的开发环境。

工具只是手段，真正提升效率的，是你对工具的理解与掌控。

← Back to Home