vs code + ts + volar == webstorm More actions + 部分重构?白嫖党的胜利?

简介: 打算用 ts + vue 写一个新项目,突然发现 vs code 竟然还有 Quick Fix... 这个功能,这个功能需要搭配 volar,因为用 vetur 的时候我没看到有出现,在配合 ts 适用是能让人有种使用 IDEA 的错觉,就是 More actions...,你甚至可以将热键改成 alt + enter(回车),那就和 IDEA 一模一样了(当然比不上 IDEA 那么多解决方法和提示)

打算用 ts + vue 写一个新项目,突然发现 vs code 竟然还有 Quick Fix... 这个功能,这个功能需要搭配 volar,因为用 vetur 的时候我没看到有出现,在配合 ts 适用是能让人有种使用 IDEA 的错觉,就是 More actions...,你甚至可以将热键改成 alt + enter(回车),那就和 IDEA 一模一样了(当然比不上 IDEA 那么多解决方法和提示)

img2.png

img3.png

它给出的解决方法是这样的

axios
  .post('/api/user/register', ob)
  .then((res: { data: { data: string; msg: any } }) => {
    ...
  }

实际上我在后端传回来的是是一个常见的 Result 基类,是这样的

public class CloudResult<T> {
  private int code;
  private String msg;
  private T data;
  // 构造方法、getter 和 setter 就不贴出来了 
}

补充回来的也差不多,还是挺好用的

当然也不是所有错误都会有相应的解决方法(说实话 IDEA 有很多也没有),比如这个

img1.png

后续我还发现了像 class 为变量生成 getter/setter 等一系列的功能,更多的 TypeScript 的支持可以查看 Vs Code 的文档

注意

不要觉得这个没有用,因为这个在编译的时候会有错误提示的,可能无法运行(我使用 vue-cli 的时候是这样的),就像下面这个错误,我曾经找了好久,百度到一堆没有的,比如什么改 tsconfig.json 去除掉 type 检查(我寻思你 ts 禁用类型检查你还用什么 ts ?),如果那时候直接有个这样的提示和解决方案我直接就可以省掉一大堆开发时间

img6.png

也不要觉得配置很麻烦,嫌麻烦应该用去 webstorm,配置好了你的 IDE 也是对编码效率的提升

vs code alt + enter 有挺多冲突的,有插件的,也有 vs code 自带的,不过也能用,就是不知道哪天用着用着突然出来奇怪的

img5.png

相关文章
|
6月前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
6月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
2月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
287 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
6月前
个人建议:VSCode和WebStorm中的“关闭其他所有编辑器、关闭左侧编辑器、关闭右侧编辑器”快捷键这么设置shift+alt+w、shift+alt+[、shift+alt+],你会受益匪浅
个人建议:VSCode和WebStorm中的“关闭其他所有编辑器、关闭左侧编辑器、关闭右侧编辑器”快捷键这么设置shift+alt+w、shift+alt+[、shift+alt+],你会受益匪浅
|
6月前
让VSCode的快捷键切换为WebStorm/IDEA的快捷键、修改颜色主题(深色模式)、文件图标主题
让VSCode的快捷键切换为WebStorm/IDEA的快捷键、修改颜色主题(深色模式)、文件图标主题
|
JavaScript
VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案
在使用 VSCode 开发 Vue3 + TS 项目时,编辑器一直有一个报错,因为不影响编译和运行,所以就一直没在意,但这两天看着这红杠提示实在是太别扭,今天就来解决一下这个问题,还自己一个清爽的开发环境。
1174 0
VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案
|
JavaScript 测试技术 C++
VS Code英汉词典插件v0.0.6-改为TS实现, 加测试
实现VS code插件, 基于本地词典数据, 提供英汉翻译功能, 从JavaScript改为TypeScript实现. Rewrite the vscode extension to translate English word or phrase to Chinese from JavaScript to TypeScript.
1027 0
webstorm + vscode支持微信小程序语法及代码智能提示教程
做了半年的微信小程序,由于感觉微信开发者工具非常不好用,所以贴出在下使用webstorm和vscode开发的教程给大家参考一下。 注意:代码只能提示只有js文件 工具:电脑一台、webstorm、vscode 1.首先FileType下Cascading Style Sheet 添加*.wxss 2.FileType下HTML 添加*.wxml 3.打开vscode,搜索下图中的插件安装。
4005 0
|
6月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
79 0
|
6月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
252 0

热门文章

最新文章