목차
code实用功能
打开最近一个会话
打开特定的项目
跳转到文件的行列
文件对比
插件操作
실용적인 기능 코딩
특정 프로젝트 열기
파일 줄로 이동
파일 비교
플러그인 작업
code的安装
总结
코드 설치
요약
개발 도구 VSCode VSCode CLI 도구에 대한 간략한 분석은 매우 유용한 것으로 나타났습니다!

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

Sep 08, 2022 pm 08:34 PM
vscode

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-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

실용적인 기능 코딩

최신 대화 열기

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>: 플러그인을 제거합니다.
🎜프론트 엔드 엔지니어링 비계를 개발하라는 요청을 받았다면 어떻게 하시겠습니까? 🎜🎜시장에 있는 대부분의 스캐폴딩을 모방하여 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

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

코드 설치

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

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

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

요약

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

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

VSCODE 용 헤더 파일을 정의하는 방법 VSCODE 용 헤더 파일을 정의하는 방법 Apr 15, 2025 pm 09:09 PM

Visual Studio 코드를 사용하여 헤더 파일을 정의하는 방법은 무엇입니까? .h 또는 .hpp 접미사 이름 (예 : 클래스, 함수, 변수)을 사용하여 헤더 파일을 만들고 기호를 선언합니다. 소스 파일에 헤더 파일을 포함시키기 위해 #include 지시문을 사용하여 프로그램을 컴파일합니다. 헤더 파일이 포함되어 있고 선언 된 기호를 사용할 수 있습니다.

VSCODE에 필요한 컴퓨터 구성 VSCODE에 필요한 컴퓨터 구성 Apr 15, 2025 pm 09:48 PM

대 코드 시스템 요구 사항 : 운영 체제 : Windows 10 이상, MacOS 10.12 이상, Linux 배포 프로세서 : 최소 1.6GHz, 권장 2.0GHz 이상의 메모리 : 최소 512MB, 권장 4GB 이상의 저장 공간 : 최소 250MB, 권장 1GB 및 기타 요구 사항 : 안정 네트워크 연결, Xorg/Wayland (LINUX)

vscode 중국 주석의 문제를 해결하는 방법 물음표가되는 방법 vscode 중국 주석의 문제를 해결하는 방법 물음표가되는 방법 Apr 15, 2025 pm 11:36 PM

Visual Studio Code에서 중국어 의견이 물음표가되는 문제를 해결하는 방법 : 파일 인코딩을 확인하고 "BOM이없는 UTF-8"인지 확인하십시오. 글꼴을 "노래 스타일"또는 "Microsoft Yahei"와 같은 한자를 지원하는 글꼴로 변경하십시오. 글꼴을 다시 설치하십시오. 유니 코드 지원을 활성화합니다. vscode를 업그레이드하고 컴퓨터를 다시 시작하고 소스 파일을 재현하십시오.

vscode를 사용하는 방법 vscode를 사용하는 방법 Apr 15, 2025 pm 11:21 PM

Visual Studio Code (VSCODE)는 Microsoft가 개발 한 크로스 플랫폼, 오픈 소스 및 무료 코드 편집기입니다. 광범위한 프로그래밍 언어에 대한 가볍고 확장 성 및 지원으로 유명합니다. VSCODE를 설치하려면 공식 웹 사이트를 방문하여 설치 프로그램을 다운로드하고 실행하십시오. VScode를 사용하는 경우 새 프로젝트를 만들고 코드 편집, 디버그 코드, 프로젝트 탐색, VSCODE 확장 및 설정을 관리 할 수 ​​있습니다. VSCODE는 Windows, MacOS 및 Linux에서 사용할 수 있으며 여러 프로그래밍 언어를 지원하며 Marketplace를 통해 다양한 확장을 제공합니다. 이점은 경량, 확장 성, 광범위한 언어 지원, 풍부한 기능 및 버전이 포함됩니다.

VSCODE 터미널 사용 튜토리얼 VSCODE 터미널 사용 튜토리얼 Apr 15, 2025 pm 10:09 PM

VSCODE 내장 터미널은 편집기 내에서 명령 및 스크립트를 실행하여 개발 프로세스를 단순화 할 수있는 개발 도구입니다. VSCODE 터미널 사용 방법 : 바로 가기 키 (CTRL/CMD)로 터미널을 엽니 다. 명령을 입력하거나 스크립트를 실행하십시오. 핫키 (예 : ctrl l)를 사용하여 터미널을 지우십시오). 작업 디렉토리 (예 : CD 명령)를 변경하십시오. 고급 기능에는 디버그 모드, 자동 코드 스 니펫 완료 및 대화식 명령 기록이 포함됩니다.

VSCODE 터미널의 공통 명령 VSCODE 터미널의 공통 명령 Apr 15, 2025 pm 10:06 PM

VS 코드 터미널에 대한 공통 명령은 다음과 같습니다. 터미널 화면 (Clear) 지우기 (CLEAR), 현재 디렉토리 파일 (LS)을 나열하고 현재 작업 디렉토리 (CD) 변경, 현재 작업 디렉토리 경로 (MKDIR) 작성, 빈 디렉토리 (RMDIR) 삭제, 새 파일 (터치), 파일 삭제 또는 디렉토리 또는 디렉토리 (CP) (MV) 파일 콘텐츠 표시 (CAT) 파일 콘텐츠보기 및 스크롤 (적음) 파일 컨텐츠보기 아래로 스크롤 (more) 파일의 처음 몇 줄 (헤드)을 표시합니다.

vscode에서 코드를 작성하는 위치 vscode에서 코드를 작성하는 위치 Apr 15, 2025 pm 09:54 PM

Visual Studio Code (VSCODE)에서 코드를 작성하는 것은 간단하고 사용하기 쉽습니다. vscode를 설치하고, 프로젝트를 만들고, 언어를 선택하고, 파일을 만들고, 코드를 작성하고, 저장하고 실행합니다. VSCODE의 장점에는 크로스 플랫폼, 무료 및 오픈 소스, 강력한 기능, 풍부한 확장 및 경량 및 빠른가 포함됩니다.

VSCODE로 코드를 실행하는 방법 VSCODE로 코드를 실행하는 방법 Apr 15, 2025 pm 09:51 PM

코드에서 코드 실행은 6 단계 만 가져갑니다. 1. 프로젝트 열기; 2. 코드 파일을 작성하고 작성합니다. 3. 터미널을 엽니 다. 4. 프로젝트 디렉토리로 이동; 5. 적절한 명령으로 코드를 실행하십시오. 6. 출력을 봅니다.

See all articles