VSCode CLI 도구에 대한 간략한 분석은 매우 유용한 것으로 나타났습니다!

vscode CLI 도구라고 하면 일상 업무에는 필요하지 않기 때문에 생소하실 수도 있습니다. 그러나 그 기능 중 일부는 매우 실용적이고 최근 기술 아이디어 중 일부는 이를 통해 실현될 수 있으므로 이 기사에서는 VSCode CLI의 실제 기능에 대해 설명합니다. [추천 학습: "vscode 입문 튜토리얼"]

VSCode CLI의 쉘 명령은 code라고 하며 code는 나중에 VSCode CLI를 참조하는 데 사용됩니다. 도구. 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></folder>的方式打开项目，效果是一样的。

跳转到文件的行列

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

$ code -g /project-path/src/index.ts:18:8

现在的一些dev工具比如react-dev-inspector和vue-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></version></extensionname></publisher>的形式罗列所有已安装的插件；
• code --install-extension <ext></ext>：安装插件，可以加上--force选项防止弹窗提示；
• code --uninstall-extension <ext></ext>：卸载插件。

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

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

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

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

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

실용적인 기능 코딩

최신 대화 열기

code는 옵션이나 매개변수 없이 실행되며, VSCode의 최신 세션이 열립니다. 예를 들어, 최근에 projectA를 열었다면 projectA가 다른 창에 가려졌는지 또는 VSCode를 종료했는지에 관계없이 다음 명령을 사용하면 projectA code>：🎜rrreee🎜쉘을 사용하는 경우 이 명령을 사용하면 VSCode를 빠르게 열거나 방금 편집한 파일을 찾는 데 도움이 됩니다. 🎜<h3 id="strong-특정-프로젝트-열기-strong"><strong>특정 프로젝트 열기</strong></h3>🎜 여기서는 일반적으로 VSCode를 사용하여 프로젝트를 어떻게 여는지 묻고 싶습니다. 항상 Do를 누르세요. 다음 단계를 따르시나요? 🎜<ul style="list-style-type: disc;"> <li>🎜VSCode 아이콘을 클릭하세요🎜</li> <li>🎜메뉴 표시줄 File🎜</li> <li>🎜클릭 on Open🎜 li></li> <li>🎜Mac의 Finder에서 찾아 열기🎜</li> </ul>🎜저는 쉘 사용에 익숙하고 검색보다 명령줄 작업이 더 빠른 것 같아요. 파인더에서. 🎜🎜<code>code . 명령은 제가 평소에 가장 많이 사용하는 명령입니다. VSCode의 현재 디렉터리에 있는 프로젝트를 빠르게 열 수 있습니다. 🎜🎜내 프로젝트는 모두 고정된 디렉터리에 있으므로 먼저 프로젝트 디렉터리로 cd한 다음 code .를 실행하면 됩니다. 🎜🎜물론 code<folder></folder>를 사용하여 프로젝트를 열 수도 있으며 효과는 동일합니다. 🎜

파일 줄로 이동

🎜code -g <file>:<line>: ;</line></file> 명령은 파일의 특정 줄에 있는 특정 문자로 빠르게 이동할 수 있습니다. 예를 들어, 다음 명령은 index.ts 파일을 열고 index가 8인 문자 바로 앞의 18행에 커서를 놓습니다. 🎜rrreee🎜react-dev-inspector와 같은 일부 최신 개발 도구 🎜 및 vue-devtools🎜를 사용하면 개발자가 DOM 요소를 클릭하여 VSCode에서 열 수 있고 해당 소스 코드 위치를 찾습니다. 개발서버가 실행 중일 때 소스코드의 위치정보를 얻어서 DOM 요소에 삽입한 뒤, 개발자가 DOM을 클릭하면 해당 위치정보가 개발서버로 전달되고, 그 다음에는 개발서버가 전달하는 방식이다. 코드로 이동하는 기능을 호출합니다. 🎜

파일 비교

🎜두 파일을 빠르게 비교하려면 다음 명령을 사용할 수 있습니다. 🎜rrreee🎜이 쌍은 사용됩니다 VSCode 비교를 사용하는 것은 차이점을 정리하고 충돌을 해결하려는 학생들에게 더 유용할 것입니다. 🎜

플러그인 작업

🎜이것은 다음 사항을 포함하여 최근 발견한 기능 중 제가 가장 좋아하는 기능입니다. 🎜

• 코드 - -list-extensions --show-versions: 설치된 모든 플러그인을 <publisher>.<extensionname>@<version></version></extensionname></publisher> 형식으로 나열합니다.
• code --install-extension <ext></ext>: 플러그인을 설치하려면 --force 옵션을 추가하여 팝업 프롬프트를 방지할 수 있습니다.
• code --uninstall-extension <ext></ext>: 플러그인을 제거합니다.

🎜프론트 엔드 엔지니어링 비계를 개발하라는 요청을 받았다면 어떻게 하시겠습니까? 🎜🎜시장에 있는 대부분의 스캐폴딩을 모방하여 editorConfig, eslint, prettier 등과 같은 코드 형식과 관련된 구성을 사용자에게 제공합니다. 하지만 이 과정을 마친 후에는 비계의 점수가 90점에 불과합니다. 실제로 eslint를 적용하려면 사용자는 해당 VSCode 플러그인을 설치하고 settings.json을 구성해야 합니다. 🎜🎜settings.json 다행히 .vscode 디렉터리에 settings.json을 생성하여 팀 구성원 간에 구성을 공유하고 로컬 구성을 덮어쓸 수 있습니다. 팀 구성원의 수동 구성 문제를 해결하고 일관되지 않은 개발 구성 문제를 방지합니다. 🎜🎜VSCode 플러그인의 경우 일반적으로 사용자가 직접 설치할 수 있도록 하거나 기본적으로 이미 설치되어 있습니다. 하지만 프론트엔드 초보자나 새로운 동료들에게는 이는 의심할 여지 없이 고통스러운 일이고, 뛰어난 스캐폴딩 개발자들에게도 참을 수 없는 일입니다. 이때 위의 명령이 실행됩니다. 🎜🎜--list-extensions 사용자가 플러그인을 설치했는지 확인하세요. 그렇지 않은 경우 --install-extension을 사용하여 설치하세요. 🎜

.vscode와 결합된 플러그인 작동을 위한 위 명령의 도움으로 스캐폴딩은 사용자가 아무런 의미 없이 개발 환경을 완전히 구성하는 데 도움을 줄 수 있으며 모든 사람이 팀에서 동일한 구성을 사용하는 경우 언젠가 새로운 동료가 와서 그의 eslint가 적용되지 않는다고 걱정하지 마십시오. .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

참고: 플러그인 작업과 관련된 명령은 다소 강력하므로 주의해서 사용하세요.

코드 설치

어떤 학생들은 코드를 효과적으로 만들어야 한다고 말할 수도 있습니다. 전역 환경 변수 PATH에 code 명령을 수동으로 설치하면 안 되나요?

Mac에서는 이와 같지만 /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code 경로를 통해 code를 직접 호출할 수도 있습니다. >.
Windows 및 Linux 시스템의 경우 VSCode를 설치하면 code가 PATH에 자동으로 추가되며, code를 직접 호출할 수 있습니다.

🎜따라서 사용자가 환경 변수를 수동으로 추가하는 것을 방지하기 위해 스캐폴딩을 어느 정도 캡슐화할 수 있습니다. 🎜

요약

🎜이 글에서는 언어 전환이나 언어 전환 등 VSCode CLI의 일부 기능만 소개합니다. 성능 모니터링 및 기타 기능은 소개되지 않았으며, 기사 마지막 부분의 정보에 있는 링크를 통해 공식 홈페이지로 이동하시면 확인하실 수 있습니다. 🎜🎜최근에는 다른 노드 프로젝트에서 직접 호출할 수 있는 기본 기능 집합을 제공하기 위해 code 관련 명령을 간단히 캡슐화했습니다. 프로젝트 주소는 🎜github.com/avennn/입니다. vsc-…🎜, 모두 환영합니다. 괜찮다고 생각하시면 별점 주셔도 좋습니다. 🎜🎜VSCode에 대한 자세한 내용을 보려면 🎜vscode 튜토리얼🎜을 방문하세요! 🎜🎜

위 내용은 VSCode CLI 도구에 대한 간략한 분석은 매우 유용한 것으로 나타났습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!