从 WebStorm 转到 VSCode！使用一周体验报告

前言

最近我的 Jetbrains 开源项目授权到期了，想要续订的时候发现 Jetbrains 提高了开源项目申请门槛，我的 StarBlog 项目因为名字里包含 blog 这个词无法申请，虽然我在 github 上有很多开源项目，但年底比较忙，疏于更新，一时间竟然找不到一个满足 jetbrains 要求（近三个月内每月都有commit）的项目…

所以，在我的项目符合申请条件之前，只能先用 VSCode 顶一段时间了。

简介

作为业余炼丹选手，vscode 其实是我每天都会用到的工具，训练、微调模型对 GPU 算力的要求较高，在本地跑是不实际的，我的习惯是使用 vscode 的 remote development 功能，连接到服务器上去直接编辑和调试 python 代码，当然只是作为前期的快速实现和验证，真正项目还是在 PyCharm 里完成的，因此，vscode 对我来说是既熟悉又陌生，经常使用，但不是主力开发工具，在此之前并没有深入研究过。

本文记录我在使用 VSCode 开发前端项目的经历，主要是 Next.js 项目，使用 TypeScript 。

插件方面，跟前端开发有关有以下几个：

• Babel JavaScript
• ESLint
• Live Preview
• Live Server
• open in browser
• Path Intellisense
• React Native Tools
• Tailwind CSS IntelliSense

实际上用得上估计就 Live Server 和最后那个 Tailwind CSS IntelliSense ，其他的插件给我的感知不强，似乎 vscode 本身就对前端开发特别是 TypeScript 提供了不错的支持。

配置

快捷键设置

我用习惯了 jetbrains 的 IDE ，学习的快捷键也是 IDEA 风格的，得益于 vscode 丰富的插件生态，我安装了 IntelliJ IDEA Keybindings 这个插件之后就可以获得与 jetbrains 差不多的快捷键体验了。

配置 Explorer 文件树的缩进

Settings › Workbench › Tree: Indent

原本是 8 ，目录层次看得不是很清楚，我改成 14 ，好多了

修改前	修改后

其他

其他的就都是很个性化的东西了，我配置了 github 账号，可以看到 PR 、issues 之类的，跟 jetbrains 差不多的体验。

同步功能也很不错，一开始我以为不能禁用主题同步，后面发现要编辑配置文件，添加以下配置即可

"settingsSync.ignoredSettings": [
  "workbench.colorTheme"
]

调试

WebStorm 支持的调试功能，vscode 基本都有的，只不过前者是图形界面配置，后者是通过 JSON 文件配置。

点击 vscode 左侧的 Run and Debug 按钮，创建一个 launch.json 文件。

右下角有 Add Configuration... 按钮，有很多模板可以添加，以我现在的这个 Next.js 项目为例，我创建了一个 npm 的配置，然后稍微修改了一下就好了。

适用于 Next.js dev 模式的配置如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "command": "yarn dev",
      "name": "next dev",
      "request": "launch",
      "type": "node-terminal",
      "env": {
        "NEXT_PUBLIC_BASE_URL": "http://localhost:5234"
      }
    }
  ]
}

配置好了点一下三角形按钮运行就好了~

PS：打断点啥的应该也没问题，我还没测试。

痛点

路径识别功能较弱

虽然我安装了 Path Intellisense 插件，但很多时候路径还是无法识别到，做不到像 jetbrains 那样开箱即用。

除了在前端项目里面很多地方检测不到路径之后，还有……

比如说编辑 .gitignore 文件的时候，路径不会自动补全；

比如说写 commit message 的时候，文件名不会自动补全；

同个项目内复制代码不会自动 import 依赖

同个项目内，从一个文件复制代码到另一个文件，不会自动 import 这段代码的依赖。

比如这段代码

<div>
  <h1 className='text-2xl'>任务列表</h1>
  <Breadcrumbs className='mt-3'>
    <BreadcrumbItem>主页</BreadcrumbItem>
    <BreadcrumbItem>任务列表</BreadcrumbItem>
  </Breadcrumbs>
  <Spacer y={4} />
</div>

需要引入以下依赖

import { Breadcrumbs, BreadcrumbItem } from "@nextui-org/breadcrumbs";
import { Spacer } from "@nextui-org/spacer";

在 WebStorm 中，复制代码到另一个文件后，会把这段代码的依赖 import 一并添加到新文件的顶部，不过 vscode 默认情况下是没办法的，估计需要使用插件来实现。

补全后处于高亮模式下代码提示失效

比如我要写这样的一个 div

<div className="flex justify-items-center">
</div>

现在 <div></div> 已经有了，我接着打了 clas ，按tab补全为 className=""，这很好，光标也自动跑到双引号里面。

但是！为啥双引号里面是高亮的？这时候是不会提示的，要按esc退出这个高亮模式，才能出提示…

这到底是什么鬼啊！！

跟 className 没关系，任何tab出来的都是这样

一补全出来就是高亮纯文本模式

到底是哪个小天才设计的 feature 啊

自动引入的组件默认加上 .jsx 后缀

我在 src\components\page-header.tsx 文件里写了一个组件 PageHeader

然后我在另一个页面里需要使用这个组件，输入 <PageH 自动补全为 <PageHeader，同时提示我要 import 这个组件，一切都OK，也能生成 import 语句

然鹅，它生成的 import 的语句是这样！

import { PageHeader } from "@/components/page-header.jsx";

为啥要加后缀啊？？不用加的，而且这后缀也加错了，我这个是 .tsx 文件啊…

导致 next.js 一下就报错了

Module not found: Can't resolve '@/components/page-header.jsx'

【前端带师】建议我把 tsconfig.json 里的 allowJs 关掉，不过我测试了还是一样（摊手.gif）

输入 / 不会自动 close tag

比如我要使用上面的这个组件

<PageHeader
  title="任务列表"
  breadcrumbs={[
    { title: '主页', href: RouterMap.Index },
    { title: '任务列表' }
  ]}
/>

一开始，我在 IDE 里输入 <PageH 自动补全为 <PageHeader

这时候再输入 / ，在使用 WebStorm 的时候会自动 close tag，自动生成右边的尖括号：<PageHeader />

但是 vscode 不会，没有任何变化，不知道是不是得做什么配置。

修改 tag 时不会同步修改对应的 close tag

有这样一个 tag

<h1 className={title()}>Blog</h1>

现在我要把 h1 改成 div

在 WebStorm 里修改会同步把后面的 </h1> 改成 </div>

但是 vscode 不会，也许需要额外的配置。

Console Panel 无法 collapse

当我打开下面这个 console panel 的时候，不是占着屏幕的空间吗，当我要写代码的时候，要把它折叠起来，但是没有这个功能，右上角按钮的只能关掉

然后我要重新打开 console 来看的时候，点左下角那个「No problems」的按钮时，出来的是 problems panel ，还得手动去切换到 console ，好麻烦。

经过查找资料，我才知道可以用快捷键去 toggle

按 Alt+F8 是切换 debug console

按 Alt+F12 是切换 Terminal

小结

vscode 使用下来给我的感觉就是轻，虽然说只是编辑器，但加上一堆插件之后也是和 IDE 差不多的体量，但仍然给我一种相比于 jetbrains 系列轻量的感觉，响应也挺快的，不过很多功能和细节方面有点反人类，也许是我用得还不熟悉吧~ 不过想到是开源免费的，还要啥自行车呢……