看完本文，你将

让你的 VSCode 打字流畅度提升 114 倍
不同工程使用各自的项目配置、插件
更加美观的自定义窗口
更加智能代码提示、替换
更加清晰的代码块结构，能一目了然地看出嵌套关系
删掉那些标题党推荐的无用插件，使用 VSCode 自带的功能
自定义代码颜色，VSCode 主题

所有配置，我都放在文末 git，大家自取即可

现况概要

我每天逛各种社区，看到的关于 VSCode 的文章，99.999% 都是 插件推荐

而这些插件，说真的作用不大，很多都是 VSCode 内置的功能，而且同质化严重
他们也就知道那几个插件，没什么可说的

于是乎，我只能自己一点点的摸索 VSCode 最佳配置实践
今天有空就写一点吧

VSCode 专栏系列：

juejin.cn/column/7368…

安装

没错，这也要讲，不是我水，因为有些时候，你下载速度很慢
所以你要使用镜像下载

详细教程搜 VSCode 镜像下载

注意，下载最新版的，因为我讲的配置，很多是新特性
目前我的版本是 1.89.0
像 VSCode 这种良心的应用，无脑装最新版即可

配置

第一步下载中文插件，这个大家应该都会，搜：Chinese (Simplified) (简体中文)

第二步，打开设置，快捷键 Ctrl + ,

第三步，打开 setting.json

丝滑打字配置

这四行配置加入后，你马上会给我点赞
你将体会到如同潺潺流水，流过你手的感觉
这是全新的体验，是绝大多数编辑器不具备的体验

{
    "editor.smoothScrolling": true,
    "editor.cursorBlinking": "expand",
    "editor.cursorSmoothCaretAnimation": "on",
    "workbench.list.smoothScrolling": true,
}

鼠标控制大小

直接上图，按下 Ctrl + 鼠标滚轮

{
    "editor.mouseWheelZoom": true,
}

彩虹括号与作用域块线条提示

一堆插件推荐的文章，天天叫你装插件实现，明明自带的功能

{
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true,
}

更加智能的代码提示

{
    // 控制活动代码段是否阻止快速建议
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    // 除了 `Tab` 键以外， `Enter` 键是否同样可以接受建议
    // 这能减少“插入新行”和“接受建议”命令之间的歧义
    "editor.acceptSuggestionOnEnter": "smart",
    // 代码补全列表中，优先选择最近的建议
    "editor.suggestSelection": "recentlyUsedByPrefix",
}

有一种场景，比如你在写代码，写到一半，你突然想要代码补全
于是你调出建议，但是补全的代码会直接插入，不会覆盖你的输入
这时代码就会多一点内容出来，那么就报错了

这个也是可以配置的，下面是改为覆盖

{
    "editor.suggest.insertMode": "replace",
}

自动补全括号、引号

{
    "editor.autoClosingBrackets": "beforeWhitespace",
    "editor.autoClosingDelete": "always",
    "editor.autoClosingOvertype": "always",
    "editor.autoClosingQuotes": "beforeWhitespace",
}

关闭缩进猜测

如果你打开一个文件，他的缩进是 2，而你的配置是 4
那么你格式化时，他很可能不按你的配置来

{
     // 关闭缩进猜测
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
}

美化窗口

window 默认窗口如下，丑陋至极

配置后使用 VSCode 自己的窗口

{
    "window.dialogStyle": "custom",
}

自动换行和行高

设置了这个，就不用横向滚动了

{
    "editor.wordWrap": "on",
    "editor.lineHeight": 1.5,
}

紧凑的文件夹模式

{
    // 文件夹紧凑模式
    "explorer.compactFolders": true,
    "notebook.compactView": true,
}

设置后会把没用的东西折叠，利于啰嗦的 Java 项目

还有一个 Tab 栏紧凑模式

{
    "window.density.editorTabHeight": "compact"
}

格式化自动删分号

无意义的分号，不加为妙。现代编程语言都可以不用分号

{
    "javascript.format.semicolons": "remove",
    "typescript.format.semicolons": "remove",
}

Typescript 语言设置中文

{
    "typescript.locale": "zh-CN",
}

枚举类型数值提示

{
    "typescript.inlayHints.enumMemberValues.enabled": true,
}

JS 获得所有类型推导

如果你全开，那就满屏幕都是类型

在设置里搜 inlayHints 即可，你自行选择
我的配置如下

{
    // 类型提示
    "javascript.inlayHints.enumMemberValues.enabled": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": false,
    "javascript.inlayHints.parameterNames.enabled": "none",
    "typescript.inlayHints.enumMemberValues.enabled": true,
    "typescript.preferences.preferTypeOnlyAutoImports": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "typescript.preferences.includePackageJsonAutoImports": "on",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
}

TS 导入、重命名、补全自动更新相关引用

{
    "typescript.preferences.preferTypeOnlyAutoImports": true,
    "typescript.preferences.includePackageJsonAutoImports": "on",
    "javascript.suggest.autoImports": true,
    "typescript.suggest.autoImports": true,
    "vue.updateImportsOnFileMove.enabled": true,
}

Vue 自动补全 .value 和缺失属性提醒

{
    "vue.inlayHints.missingProps": true,
    "vue.autoInsert.dotValue": true,
}

关闭开屏 VSCode 的亲切问候

{
    "workbench.startupEditor": "none",
}

自动猜测文本编码

{
    "files.autoGuessEncoding": true,
}

保存自动删除末尾空格

这个想开就开，我不开，因为影响 md 格式

{
    "files.trimTrailingWhitespace": false,
}

搜索吸附目录

新版特性，你要更新噢

{
     "search.searchEditor.singleClickBehaviour": "peekDefinition",
}

父级自动吸附置顶

{
    "editor.stickyScroll.enabled": true,
}

终端代码补全

实验性配置

{
    "terminal.integrated.shellIntegration.suggestEnabled": true,
}

终端命令置顶

图我就不放了，就是吸顶

{
    "terminal.integrated.stickyScroll.enabled": true
}

个人终端配置

看完再复制噢，这部分我没放到 git 里

注意 terminal.integrated.defaultProfile.windows 是配置你终端的路径
别乱写，否则你终端就用不了了

terminal.integrated.cursorBlinking - 终端闪动光标
terminal.integrated.cursorWidth - 光标宽度
terminal.integrated.rightClickBehavior - 右键行为

我的终端里的美化效果（Git分支，历史记录...），是自己下载并且配置的，不属于 VSCode 的

{
    // 终端配置
    "terminal.integrated.fontFamily": "BitstromWera Nerd Font Mono",
    "terminal.integrated.shellIntegration.suggestEnabled": true,
    "terminal.integrated.stickyScroll.enabled": true,
    "terminal.integrated.profiles.windows": {
        "PowerShell 7": {
            "path": "C:/Program Files/PowerShell/7/pwsh.exe"
        }
    },
    "terminal.integrated.defaultProfile.windows": "PowerShell 7",
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.cursorWidth": 2,
    "terminal.integrated.cursorStyle": "line",
    "terminal.integrated.rightClickBehavior": "default",
    "terminal.integrated.gpuAcceleration": "on",
    "accessibility.signals.terminalCommandFailed": {
        "sound": "auto",
        "announcement": "auto"
    },
}

index 替换成目录名

在打开很多文件时，能区分出是谁

{
    // index 替换成 目录名
    "workbench.editor.customLabels.patterns": {
        "**/index.vue": "${dirname}.vue",
        "**/index.js": "${dirname}.js",
        "**/index.ts": "${dirname}.ts",
        "**/index.jsx": "${dirname}.jsx",
        "**/index.tsx": "${dirname}.tsx"
    },
}

行内样式代码补全

比如你在写 style 字符串时，能有代码提示

{
    // 行内样式代码补全
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
}

双击选中被截断字符

再也不用担心双击被下滑线截断了

{
    "editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?（），。；：",
}

折行缩进策略和关闭右侧代码地图

关闭右侧代码地图大家自己选择，反正我觉得碍眼

{
    "editor.minimap.enabled": false,
    "editor.foldingStrategy": "indentation",
}

关闭搜索中跟踪符号链接

提高搜索性能

{
    "search.followSymlinks": false,
}

更新模式选择

我要手动的

{
    "update.mode": "manual",
}

搜索排除目录

提高性能，需要重启生效

{
    "search.exclude": {
        "**/node_modules": true,
        "**/pnpm-lock.yaml": true,
        "**/package-lock.json": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.svn": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
        "**/yarn.lock": true
    },
}

文件关联

比如小程序中的 .wxss 这种文件，会把它作为css文件来处理
提供对应的 css 的语法提示 css 的格式化等
jsonc意思是能写注释的 JSON

{
    "files.associations": {
        "*.wxss": "css",
        "*.wxml": "html",
        "*.svg": "html",
        "*.xml": "html",
        "*.wxs": "javascript",
        // json注释
        "*.cjson": "jsonc",
        "*.json": "jsonc"
    },
}

window 相对路径复制使用 `/`

右键文件复制路径，当你导入东西时有用
默认 window 反斜杠

{
    "explorer.copyRelativePathSeparator": "/",
}

不同项目使用不同配置

方式很多，我最推荐这个

代码自定义配色与全部配置

这个如果你有强烈需求，我建议你写插件
因为配置文件的颜色，在 VSCode 上，会时不时闪烁
非常影响体验，你必须输入文件才有效

我自己写的主题插件

Pretty Dark Theme

自定义配色的配置有很多，我放在上 git 上

上面的配置也有，我把个人用的配置删了
如果和你的配置冲突，自行检查

gitee.com/cjl2385/dig…

快速打开指定文件

大多数前端开发，在找路由文件时可能时一级一级找，实际上在地址栏复制一下路由名称

按下ctrl + e，再输入路由名称即可打开。IDEA快捷键是双击 shfit

快速打开项目

ctrl + r
默认打开会覆盖当前窗口，按下 ctrl 则为多开

全局符号搜索（函数、变量...)

ctrl + t

当前文件符号搜索（函数、变量...)

ctrl + shift + o

展开当前文件符号（函数、变量...)

ctrl + shift + .

查看引用

alt + shift + f12
快速查看哪里用到了，你必须能被 VSCode 识别类型

快捷跳转

当你在看别人代码时，是不是经常 ctrl + 鼠标左键 进去看，然后回来要滑半天？

那你看看我怎么做，是不是瞬间回来

这个只需要设置一下快捷键即可，默认是没有的，如下图所示

变量 | 文件重命名

大家设置一下对应的快捷键即可，我下图标红的就是。我设置的和 window 快捷键一样， IDEA 默认是shift + F6

如果你的 window 版本过高，那么shift + F6又会和微软输入法冲突

需要注意的是，变量重命名需要编辑器分析你的代码。所以如果你的代码写的很烂，那么 VSCode 也会被弄得神志不清
所以这项功能在一些 JS 项目可能没有作用

快捷复制

很多人复制当前行，可能是先选中，然后再 CV，实在是太慢了

VSCode 快捷键是 alt + shfit + ↓，IDEA 是ctrl + d

快速移动行

alt + ↓，IDEA 为 ctrl + shift + ↓

删除整行

快捷键是 ctrl + shift + k，这个也能提高很多效率，不用每次都手动删除一行的最后一个空格

快速新开一行

假设你的鼠标不在行末，而在中间，如下图。那么你按下回车会破坏你的代码

此时你仅需按下 ctrl + enter 即可新开一行，IDEA 快捷键是 shift + enter

查看参数

在函数括号内，按下ctrl + shift + space，即可查看参数类型，以及当前参数的注释

注意，微软输入法可能和这个快捷键冲突，你需要手动关闭微软输入法的快捷键，或者修改VSCode

IDEA 快捷键为 ctrl + p

代码提示

这个在强类型语言上非常实用，以 Typescript 为例。按下 ctrl + i 这个字符串枚举就出来了

收起/ 打开 (控制台 | 终端)

ctrl + j

快速滑动

按住 alt 再滚动滚轮，可以加快滚动速度。这个速度默认 5 倍速，可以在设置调整。
搜索editor.fastScrollSensitivity

批量操作

假设我从某个地方复制很多变量，我需要批量修改。比如说把 my 改成 test，

此时你可能按下 ctrl + f 批量搜索，再批量修改，而这时我已经改完了

在 VSCode 中，批量选中相同的快捷键是 ctrl + shift + l

我上面就是按下此快捷键批量修改的

批量大小写修改

不仅于此，我们再来发掘一下他的功能，比如批量修改大小写

这个需要手动配置，我用的是ctrl + shift + alt + u

扩选范围

如果你需要复制某一段文字，你可能先按下鼠标左键，然后不松手慢慢拖动选中。

但是这种体验太差了，需要非常精确的操作，能不能根据代码自动扩选的呢？

答案是可以的，不过同样要手动设置快捷键，这里我设置的和 IDEA 一样

双击分割

我敢说下面的双击全选，99.99% 的人的 VSCode 都做不到，而是会被 - 分开

仅需设置一下配置即可，按下 ctrl + , 打开配置 editor.wordSeparators，把不要的分隔符删掉即可

批量移动光标到指定位置

下面这一套丝滑小连招是怎么做的呢？

先按住 alt + shift，即可开启列选择模式
拖动鼠标选择
ctrl + →，可以快速跳到分隔位置，这里没有被分隔，所以直接到最后了
ctl + shift + 左，快速选中并跳转到分隔位置
最后执行操作即可

基于上述操作，可以玩出花来，大家可以开动一下脑袋

值得注意的是，ctrl + [shift] + ← 这些快捷键不是编辑器带来的，基本上哪里都能用

快速选中整行

有时候你可能需要选中很长一行，比如打包后的代码，爬到的代码，如果有手拖动那可太折磨人了

于是你可以按下 shift + end 来选中，这个就不放动图，和上面差不多。shift 就是多选的意思

不过有的人的键盘可能没有 end 按键，这时候可以查一下官网，大多数都是配合 FN 键实现

选中指定行

按住 alt 不放，加上鼠标点击即可

而且你不必精确选中列的位置，可以用 end | home 回到开头或者结尾，再配合上面的技巧操作

批量修改正则指定内容

按下 ctrl + f，把最右边的 .* 勾选上，就是开启正则的意思

然后再输入表达式，\d 即所有数字，$1即匹配到的第一组

按下最右边的全部修改，结果就会改成下图，所有数字都会加上 test 后缀

不止于此，还能整个文件夹批量检索操作

路径操作

很多人可能苦于导入路径没有智能提示，那是因为你的工程没有配置路径别名
比如 @ = /src，那么你需要创建 tsconfig.json 或者 jsconfig.json
并写入如下配置

 
json
体验AI代码助手
代码解读
复制代码

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"]
        }
    }
}

最好下个插件 Path Intellisense，然后在配置文件 setting.json 写入

 
json
体验AI代码助手
代码解读
复制代码

"path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
},

JS 导入

当你需要导入模块时，仅需要输入前面几个字母，就有提示导入。
需要注意的是，你最好是具名导出，用默认导出它可能分析不了，因为没有名字

TS 导入

强类型语言，则多一个修复选项，VSCode 按下 ctrl + .触发，IDEA 按下 alt + enter触发

相对路径导入

很多人导入可能是手写 import xxx from '@/...'
这样不仅容易错，还很麻烦，实际上可以用快捷键复制一下，如图

如果你是 window，那么你的斜杠是反的，你需要配置一下explorer.copyRelativePathSeparator

VScode 还有大量配置，光是 settings.json，我就写了 360 行，以后想起什么再更新吧

硅基文明

代码改变不了世界，但是改变世界需要代码。

VSCode深度配置 - settings.json