前言
最近我的 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 这段代码的依赖。
比如这段代码
任务列表
主页
任务列表
需要引入以下依赖
import { Breadcrumbs, BreadcrumbItem } from "@nextui-org/breadcrumbs";
import { Spacer } from "@nextui-org/spacer";
在 WebStorm 中，复制代码到另一个文件后，会把这段代码的依赖 import 一并添加到新文件的顶部，不过 vscode 默认情况下是没办法的，估计需要使用插件来实现。
补全后处于高亮模式下代码提示失效
比如我要写这样的一个 div
现在
已经有了，我接着打了 clas ，按tab补全为 className=""，这很好，光标也自动跑到双引号里面。
但是！为啥双引号里面是高亮的？这时候是不会提示的，要按esc退出这个高亮模式，才能出提示…
这到底是什么鬼啊！！
跟 className 没关系，任何tab出来的都是这样
一补全出来就是高亮纯文本模式
到底是哪个小天才设计的 feature 啊
自动引入的组件默认加上 .jsx 后缀
我在 srccomponentspage-header.tsx 文件里写了一个组件 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
比如我要使用上面的这个组件
一开始，我在 IDE 里输服务器托管网入 自动补全为
这时候再输入 / ，在使用 WebStorm 的时候会自动 close tag，自动生成右边的尖括号：
但是 vscode 不会，没有任何变化，不知道是不是得做什么配置。
修改 tag 时不会同步修改对应的 close tag
有这样一个 tag
Blog
现在我要把 h1 改成 div
在 WebStorm 里修改会同步把后面的 改成
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
微附件提供了一个高效的文件托管服务，专门针对微信公众号运营者提出解决方案，使他们能够轻松添加和管理附件。鉴于微信公众号自身并未提供直接上传和分享附件的选项，微附件因此成为了一个关键的辅助工具，承担着至关重要的媒介作用。需要上传Excel表格就可以借助微附件轻松…
