将 Vscode 配置成全能 IDE

本文最后更新于 <span id="expire-date"></span> 天前，文中部分描述可能已经过时。

前言

昨天有同学问我为什么 IDEA 开始卡了，仔细想来，开始学编程的时候我确实是很喜欢 IDEA 的那种大而全的感觉，但是经过一段时间的磨练，我已经不太需要非常智能的 IDE 了，因此开始考虑将 IDEA 上的配置转移，于是就有了这篇文章。

选择编辑器

我是个全栈，主力语言有 JavaScript、Python、Java，还有各种零碎的技术栈，思来想去，配置最简单且最对这几门语言支持最好的编辑器，也就只有 Vscode 了，所以就选了它。

为所有语言配置

先说说大伙可能都感兴趣的主题，大概这个样子，只能说是不丑吧。

主题是 ayu 里头的 Ayu Light Border，产品图标主题是 Fluent Icons 这个看久了觉得也就是不丑，文件图标主题是 ayu 主题自带的，字体是 'JetBrains Mono','更纱黑体 UI SC'，顺便还给 Jetbrains Mono 开启了连字特性，在设置里加一条配置就能用了：

"editor.fontLigatures": true

再有就是，Vscode 在 27 寸屏幕上菜单显示的有点小，需要再加一条属性略微增大一点。

"window.zoomLevel": 0.2

再说说插件：

Bracket Pair Colorizer 2：给结对的括号提供高亮支持。
Code Translate：内建在 Vscode 里的翻译，有时候变量不知道是干啥的，用它有奇效。
DotENV：给 Vscode 提供 .env 的高亮。
Path Intellisense：为 Vscode 提供文件路径补全功能。
Project Manager：提供像 IDEA 一样的工程管理器。

配置 JavaScript 环境

Vscode 内置了 JavaScript 语言支持，但是仅仅是能用的水准，想要在实际开发中提升效率，自带的支持还是远远不够的，首先先安装下插件吧。

npm Intellisense：为 Vscode 提供 npm 导入支持。
npm：运行定义在 package.json 中的脚本。
JavaScript (ES6) code snippets：封装了一些 ES6 常用 Snippets，非常爽。
Auto Import：TypeScript 自动导入。
Auto Rename Tag：更改一侧的 HTML 标签自动同步修改另一侧。
HTML CSS Support：为 HTML 提供 id、class 自动补全
IntelliSense for CSS class names in HTML：自动分析导入的 CSS 中的类名来给 HTML 自动补全。

配置 Vue.js 环境

针对 Vue.js，还是需要额外配置其他插件的。

Vetur or Volar：为 Vscode 提供 Vue.js 全面支持，这俩看个人喜好二选一吧，都挺不错的。
Vue VSCode Snippets：封装了 Vue 的若干 Snippets。
ESLint：虽然很烦，但是必须用。

Sass/Less 配置

只需要这款插件：Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro，虽然看起来很弱智，但是确实好用，功能刚好够用。

配置 Java 环境

本来以为这个会比 JavaScript 配置更麻烦，结果还简单了不少，首先安装 Extension Pack for Java，然后需要 Java 环境，需要安装 JDK，然后复制安装的路径，然后在设置里加入这个配置：

"java.configuration.runtimes": [
    {
        "name": "JavaSE-17",
        "path": "C://Program Files/OpenJDK/jdk-17.0.1",
        "default": true
    },
]

文件路径请自己配置，注意 Windows 上配置文件路径不能写 \，要写 /!，否则 Vscode 会报错。

这一个扩展包已经囊括大部分的需求了，甚至还给 Spring 做了支持，但是不支持 Lombok，如果需要的话，可以下载 Lombok Annotations Support for VS Code。

配置 Python 环境

安装几个扩展就行了：

Python：添加 Python 语言支持，包括了标准库里的内容。
Python Indent：更正 Vscode 脑瘫的 Python 缩进。
python snippets：提供 Snippets

配置 Golang 环境

我是万万没想到这玩意居然是卡我最久的，不过好在最后找到法子了，简单又方便。
扩展方面，只用安装一个插件 Go，然后打开一个文件夹，右下角会提示你安装 go 的扩展，然后你点全部安装，然后就没有然后了。嗯，网络原因，当个程序员太难了，具体细节不方便提，记得使用 TUN 就行了，懂得都懂，然后 Shift+Ctrl+P，输入 Go:Install，选第一个，全部安装，就能解决了。

贴一下配置文件

如果懒的话就直接复制吧。

{
    "workbench.productIconTheme": "fluent-icons",
    "git.enableSmartCommit": true,
    "git.autofetch": true,
    "workbench.startupEditor": "none",
    "workbench.colorTheme": "Ayu Light Bordered",
    "explorer.confirmDelete": false,
    "terminal.integrated.gpuAcceleration": "off",
    "git.confirmSync": false,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "editor.codeLensFontFamily": "Consolas,'微软雅黑'",
    "editor.fontFamily": "'Jetbrains mono','更纱黑体 UI SC'",
    "bracket-pair-colorizer-2.depreciation-notice": false,
    "volar.icon.splitEditors": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.fontSize": 15,
    "editor.fontLigatures": true,
    "workbench.iconTheme": "ayu",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "workbench.editor.enablePreview": true,
    "eslint.alwaysShowStatus": true,
    "[vue]": {
        "editor.defaultFormatter": "johnsoncodehk.volar"
    },
    "window.zoomLevel": 0.2,
    "editor.unicodeHighlight.allowedLocales": {
        "zh-hans": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "typescript.updateImportsOnFileMove.enabled": "always",
    "redhat.telemetry.enabled": true,
    "[less]": {
        "editor.defaultFormatter": "Wscats.eno"
    },
}

本文作者：AkaraChen

本文链接： https://blog.akr.moe/vscode-config.html

更新于 2022-03-19

# IDE # vscode