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>
的方式打开项目,效果是一样的。
跳转到文件的行列
code -g <file>:<line>:<character>
命令可以快速跳转到文件某一行的某个字符。比如,下面这个命令会打开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>
的形式罗列所有已安装的插件; -
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
실용적인 기능 코딩
최신 대화 열기
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>
를 사용하여 프로젝트를 열 수도 있으며 효과는 동일합니다. 🎜파일 줄로 이동
🎜code -g <file>:<line>:< 문자> ;
명령은 파일의 특정 줄에 있는 특정 문자로 빠르게 이동할 수 있습니다. 예를 들어, 다음 명령은 index.ts
파일을 열고 index
가 8인 문자 바로 앞의 18행에 커서를 놓습니다. 🎜rrreee🎜react-dev-inspector와 같은 일부 최신 개발 도구 🎜 및 vue-devtools🎜를 사용하면 개발자가 DOM 요소를 클릭하여 VSCode에서 열 수 있고 해당 소스 코드 위치를 찾습니다. 개발서버가 실행 중일 때 소스코드의 위치정보를 얻어서 DOM 요소에 삽입한 뒤, 개발자가 DOM을 클릭하면 해당 위치정보가 개발서버로 전달되고, 그 다음에는 개발서버가 전달하는 방식이다. 코드
로 이동하는 기능을 호출합니다. 🎜파일 비교
🎜두 파일을 빠르게 비교하려면 다음 명령을 사용할 수 있습니다. 🎜rrreee🎜이 쌍은 사용됩니다 VSCode 비교를 사용하는 것은 차이점을 정리하고 충돌을 해결하려는 학생들에게 더 유용할 것입니다. 🎜플러그인 작업
🎜이것은 다음 사항을 포함하여 최근 발견한 기능 중 제가 가장 좋아하는 기능입니다. 🎜-
코드 - -list-extensions --show-versions
: 설치된 모든 플러그인을<publisher>.<extensionName>@<version>
형식으로 나열합니다. -
code --install-extension <ext>
: 플러그인을 설치하려면--force
옵션을 추가하여 팝업 프롬프트를 방지할 수 있습니다. -
code --uninstall-extension <ext>
: 플러그인을 제거합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











먼저 컴퓨터에서 vscode 소프트웨어를 열고 그림의 ①과 같이 왼쪽의 [확장] 아이콘을 클릭한 다음 그림의 ②와 같이 확장 인터페이스의 검색 상자에 [officeviewer]를 입력합니다. 그런 다음 검색 결과에서 [officeviewer]를 선택하여 그림의 ③과 같이 설치합니다. 마지막으로 아래와 같이 docx, pdf 등의 파일을 엽니다.

먼저 컴퓨터에서 Visual Studio 코드를 열고 왼쪽에 있는 네 개의 사각형 버튼을 클릭한 다음 검색 상자에 draw.io를 입력하여 플러그인을 쿼리하고 설치를 클릭한 후 새 test.drawio 파일을 생성합니다. test.drawio 파일을 선택하고 왼쪽의 편집 모드로 진입합니다. 측면에 다양한 그래픽이 있습니다. 드로잉 후 파일 → Embed → svg를 클릭한 다음 svg를 복사합니다. 복사한 svg 코드를 html 코드에 붙여넣으세요. html 웹페이지를 열면 해당 페이지의 그림을 클릭하시면 해당 페이지를 확대/축소하실 수 있습니다. 흐름도 여기서는 오른쪽 하단에 있는 연필 패턴을 클릭하여 웹 페이지로 이동합니다.

먼저, vscode 플러그인 관리자에서 Maude 플러그인을 검색할 수 있습니다. 그런 다음, maude의 코드 조각과 구문 강조를 사용하려면 확장명이 maude인 새 파일을 만듭니다. 터미널 -> 새 터미널은 현재 폴더에 있는 vscode 내장 터미널을 열어 maude 또는 full-maude 프로그램을 실행할 수 있습니다. Maude의 공식 튜토리얼에는 그림과 같이 호출하고 실행할 수 있는 http 클라이언트의 예도 있습니다. 파일을 fm 확장자와 연결하려면 설정을 열고 사용자 설정에서 파일 연결을 검색한 다음 settings.json을 엽니다. 파일 연결에 항목, 즉 *.fm에서 maude까지 항목을 추가하기만 하면 됩니다. 그러나 가득 차있다

테렌스 타오(Terence Tao)를 비롯한 많은 수학자들이 극찬한 공식 수학 도구인 LeanCopilot이 다시 진화했다고요? 방금 Caltech 교수인 Anima Anandkumar는 팀이 LeanCopilot 논문의 확장 버전을 출시하고 코드 기반을 업데이트했다고 발표했습니다. 이미지 논문 주소: https://arxiv.org/pdf/2404.12534.pdf 최신 실험에 따르면 이 Copilot 도구는 수학적 증명 단계의 80% 이상을 자동화할 수 있는 것으로 나타났습니다! 이 기록은 이전 베이스라인 이솝보다 2.3배 향상된 기록이다. 그리고 이전과 마찬가지로 MIT 라이선스에 따른 오픈 소스입니다. 사진 속 그는 중국 소년 송페이양이다.

1. 먼저 인터페이스를 연 후 왼쪽 상단에 있는 파일 메뉴를 클릭합니다. 2. 그런 다음 환경 설정 열에서 설정 버튼을 클릭합니다. 3. 그런 다음 이동하는 설정 페이지에서 업데이트 섹션을 찾습니다. 마지막으로 마우스를 클릭하여 확인하고 활성화합니다. Windows의 백그라운드에서 새 VSCode 버전 버튼을 다운로드하여 설치하고 프로그램을 다시 시작합니다.

1. 먼저 vscode 소프트웨어를 열고 탐색기 아이콘을 클릭한 후 작업 공간 창을 찾습니다. 2. 그런 다음 왼쪽 상단 모서리에 있는 파일 메뉴를 클릭하고 작업 공간에 폴더 추가 옵션을 찾습니다. 3. 마지막으로 폴더 위치를 찾습니다. 로컬 디스크, 추가 버튼을 클릭하세요

1. 먼저 설정 메뉴에서 설정 옵션을 엽니다. 2. 그런 다음 일반적으로 사용되는 페이지에서 터미널 열을 찾습니다. 3. 마지막으로 열 오른쪽에 있는 usewslprofiles 버튼을 선택 취소합니다.

1. 먼저 인터페이스를 연 후 작업 공간 인터페이스를 클릭합니다. 2. 그런 다음 열린 편집 패널에서 파일 메뉴를 클릭합니다. 3. 그런 다음 기본 설정 열 아래의 설정 버튼을 클릭합니다. 4. 마지막으로 마우스를 클릭하여 CursorSmoothCaretAnimation을 확인합니다. 버튼을 누르고 저장하면 됩니다.
