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

转载 作者:来者不拒 更新时间:2024-01-31 09:26:59 24 4

前言

最近我的 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 ,好多了 。

修改前 修改后
image-20240126154932048 image-20240126154947630

其他

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

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

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

调试

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

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

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

image-20240126155422865

适用于 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 的时候,不是占着屏幕的空间吗,当我要写代码的时候,要把它折叠起来,但是没有这个功能,右上角按钮的只能关掉 。

image-20240128230729506

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

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

按 Alt+F8 是切换 debug console 。

按 Alt+F12 是切换 Terminal 。

小结

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

最后此篇关于从WebStorm转到VSCode!使用一周体验报告的文章就讲到这里了,如果你想了解更多关于从WebStorm转到VSCode!使用一周体验报告的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

24 4 0
Copyright 2021 - 2022 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com