PHP程序员小白到大牛集训(12期免息)
首页 >开发工具 >VSCode > 正文

浅析VSCode CLI工具,原来它这么有用!

转载2022-09-16 20:21:19685 + php学习QQ群(点击入群)

php入门到就业线上直播课:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

说到VSCode CLI工具,可能大家比较陌生,因为在日常工作中它不是必须的。但鉴于它有些功能还比较实用,并且最近我在技术上的一些想法刚好可以借助它来实现,所以这篇文章就来聊聊VSCode CLI那些实用的功能。【推荐学习:《vscode入门教程》】

VSCode CLI的shell命令叫做code,后面都会用code来指代VSCode CLI工具。

code实用功能

打开最近一个会话

code后面不带任何选项或参数执行,会打开VSCode最近一个会话。比如,如果你最近打开了projectA,无论现在projectA是否被其他窗口覆盖或者你已经退出VSCode,下面的命令都能快速打开projectA

$ code
登录后复制

如果你正在使用shell,这个命令应该能帮助你迅速打开VSCode或者定位到刚才编辑的文件。

打开特定的项目

在这里我想问大家平时都是怎样用VSCode打开某个项目的,都是按以下步骤执行吗?

  • 点击VSCode图标

  • 点击菜单栏File

  • 点击Open

  • 在Mac的Finder里找到并打开

我就不是,我习惯了使用shell,觉得命令行操作比在Finder里查找要快。

code .命令是我平时用得最多的,它可以快速地在VSCode打开当前目录的项目。

我的所有项目都是放在一个固定的目录下,所以我只要先cd到项目目录下,再执行code .就好了。

当然,你也可以使用code <folder>的方式打开项目,效果是一样的。

跳转到文件的行列

code -g <file>:<line>:<character>命令可以快速跳转到文件某一行的某个字符。比如,下面这个命令会打开index.ts文件,光标定位到第18行,index为8的字符前面的位置。

$ code -g /project-path/src/index.ts:18:8
登录后复制

现在的一些dev工具比如react-dev-inspectorvue-devtools,它们能够让开发者点击DOM元素即可在VSCode打开并定位到对应的源码位置。原理都是在dev server运行的时候获取源码的位置信息并插入到DOM元素上,然后开发者点击DOM时给dev server发送位置信息,dev server再调用code的能力跳转源码。

文件对比

如果你想快速对比两个文件,可以使用以下命令:

$ code -d file-path-a file-path-b
登录后复制

这对习惯使用VSCode对比文件差异以及解决冲突的同学来说应该比较有用。

插件操作

这是我近期发现的最让我喜欢的功能了,包括以下几个点:

  • code --list-extensions --show-versions:以<publisher>.<extensionName>@<version>的形式罗列所有已安装的插件;
  • code --install-extension <ext>:安装插件,可以加上--force选项防止弹窗提示;
  • code --uninstall-extension <ext>:卸载插件。

想象一下,如果让你来开发一个前端工程的脚手架,你会做哪些事情?

仿照市面上大部分的脚手架,当然会给用户提供editorConfig、eslint、prettier等代码格式相关的配置。但完成这些,脚手架只有90分。实际上,要想eslint等生效,用户还得安装相应的VSCode插件和配置settings.json

settings.json还好说,可以在.vscode目录下创建settings.json实现团队成员间配置的共享以及覆盖本地配置,省去团队成员手动配置的麻烦和避免开发配置不一致的问题。

至于VSCode插件,一般来说,我们会让用户自己去安装或者默认他已经安装了。但对于前端小白或者新入职的同事来说,这无疑是痛苦的,也是优秀的脚手架开发者不能容忍的。这时,上面几个命令就发挥作用了。

--list-extensions查看用户是否安装了某个插件,如果没有,则使用--install-extension安装。

可以想象,借助上面几个操作插件的命令,配合.vscode,脚手架可以完全无感地帮用户配置好开发环境,并且能够保证团队里每个人的配置都是一样的,不用担心突然有一天某个新同事跑过来说他的eslint不生效。

注意:插件操作相关的命令权力有点大,要小心使用。

code的安装

有的同学可能会说,要使code生效,不得手动将code命令安装到全局环境变量PATH上吗?

在Mac上是这样的,但我们也能通过/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code这个路径直接调用code

对于Windows、Linux系统,VSCode安装时code就会自动添加到PATH,可以直接调用code

所以,脚手架可以做一定的封装,避免用户手动添加环境变量。

总结

这篇文章只介绍了VSCode CLI的一些我认为比较实用的功能,其他的诸如切换语言、性能监控等功能并没有介绍,大家可以通过文末资料里的链接跳转官网去查看。

最近我在简单封装code相关的命令,希望提供一套基础的能力给其他node工程直接调用,项目地址在:github.com/avennn/vsc-…,欢迎大家使用和pr。如果觉得还不错的话,也欢迎给个star。

更多关于VSCode的相关知识,请访问:vscode教程

以上就是浅析VSCode CLI工具,原来它这么有用!的详细内容,更多请关注php中文网其它相关文章!

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:VSCode
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐