从 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 差不多的体验。

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

json 复制代码

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

调试

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

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

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

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

json 复制代码

{
  // 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 这段代码的依赖。

比如这段代码

tsx 复制代码

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

需要引入以下依赖

ts 复制代码

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

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

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

比如我要写这样的一个 div

tsx 复制代码

<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 的语句是这样！

ts 复制代码

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

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

tsx 复制代码

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

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

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

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

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

有这样一个 tag

tsx 复制代码

<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 系列轻量的感觉，响应也挺快的，不过很多功能和细节方面有点反人类，也许是我用得还不熟悉吧~ 不过想到是开源免费的，还要啥自行车呢......

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

前言

简介

配置

快捷键设置

配置 Explorer 文件树的缩进

其他

调试

痛点

路径识别功能较弱

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

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

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

输入 / 不会自动 close tag

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

Console Panel 无法 collapse

小结

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