수집할 가치가 있는 10가지 고급 VSCode 구성(공유)

이 기사에서는 10가지 고급 VSCode settings.json 구성을 공유합니다. 모두에게 도움이 되기를 바랍니다.

영혼 고문: VS Code settings.json 파일에는 몇 줄이 있나요? settings.json 文件有多少行了？

本瓜查了下有 60 多行，有一些看起来，却还比较陌生，不知道是配置用来干嘛的；╮(╯▽╰)╭

本篇带来 10 个 settings.json 高（装）阶（杯）配置项~

1. 隐藏活动栏

VS Code 左侧图标列表是“活动栏”，我们可以点击图标跳转到各个模块，我们可以通过配置 workbench.activityBar.visible 来控制活动栏的显示。【推荐学习：《vscode教程》】

如果你想恢复显示，可以自定义快捷键来再次显示这块空间；

如何设置快捷键：keybindings

我们可以用 Ctrl+B 来隐藏/显示文件资源管理器，用 Ctrl+Alt+B 来隐藏/显示活动栏；

虽然，你也可以在命令面板 Ctrl+Shift+P 中搜索，不过使用快捷键就更有装杯效果~

活动栏在隐藏状态下，我们也可以通过快捷键跳转到不同的工作空间，比如 Ctrl+Shift+E（跳转到文件资源管理器）、Ctrl+Shift+X（跳转到扩展）、Ctrl+Shift+H（搜索和替换）等

2. AI 编码

GitHub Copilot 是 VS Code 的一个扩展，可在你编写代码时生成片段代码；

由于它是人工智能、机器学习，有可能会产生一些你不喜欢的代码，但是请别仇视它，毕竟 AI 编码是未来趋势！

处于隐私考虑，建议不要在工作中使用 Copilot，但是可以在个人项目中使用它，有趣又有用，尤其是对于单元测试；

可以在 settings.json 中配置 Copilot；

3. 字体与缩放

这个不多做解释，根据自己的需求进行文字大小及缩放比例的配置；

当然，你不一定要在 settings.json 中去编写这个配置，也可以在可选项及输入配置窗口进行配置。

4. 无拖拽/删除确认

如果你对自己的编程技能足够自信，或者对 VS Code 的 Ctrl+Z 足够自信，你可以配置取消删除确认；因为拖拽/删除确认有时也会干扰思路~

5. 自更新绝对路径

VS Code 的最佳功能之一是它的文件导入很友善，使用绝对路径，例如：@/components/Button 比 ../../Button 更让人舒适；

当移动文件重新组织目录时，希望 VS Code 能自动更新文件的路径？你可以配置它们：

请注意，您需要在 .tsconfig/.jsconfig 文件中配置路径才能使用绝对路径导入。

6. 保存执行

配置过 ESLint 保存修正的应该都知道这个配置。这个非常强大，出了 fixAll，还能 addMissingImports

60줄이 넘는 줄을 확인했는데 그 중 일부는 낯설어 보이고 무엇을 위해 구성되었는지 모르겠습니다. ╮(╯▽╰)╭

이 기사에서는 ​​10개를 가져왔습니다. settings.json 높음(설치) 레벨(컵) 구성 항목~

1. 액티비티 바 숨기기

VS 코드 왼쪽 아이콘 목록은 " Activity Bar"인 경우 아이콘을 클릭하여 각 모듈로 이동할 수 있으며, workbench.activityBar.visible을 구성하여 활동 표시줄 표시를 제어할 수 있습니다. [추천 학습: "vscode 튜토리얼"]

복원하고 싶다면 표시, 이 공간을 다시 표시하도록 단축키를 사용자 정의할 수 있습니다. png" alt="수집할 가치가 있는 10가지 고급 VSCode 구성(공유)"/>

단축키 설정 방법: 키 바인딩

🎜 Ctrl+B를 사용하여 파일 탐색기를 숨기거나 표시할 수 있고, Ctrl+Alt+B를 사용하여 활동 표시줄을 숨기거나 표시할 수 있습니다. 명령 패널Ctrl+Shift+P, 단축키를 사용하면 커핑 효과가 더 좋아집니다~🎜🎜활동 표시줄이 숨겨지면 단축키를 사용하여 다른 작업 공간으로 이동할 수도 있고, 예: Ctrl+Shift+E(파일 탐색기로 이동), Ctrl+Shift+X(확장 프로그램으로 이동), Ctrl+Shift+H 코드 > (검색 및 바꾸기) 등 🎜<h2 id="AI-코딩-GitHub-Copilot은-코드를-작성할-때-코드-조각을-생성하는-VS-Code용-확장입니다-그것은-인공-지능과-기계-학습입니다-마음에-들지-않는-코드가-생성될-수도-있지만-싫어하지-마세요-결국-AI-코딩은-미래의-트렌드입니다-img-src-static-imghwm-default-png-data-src-https-img-php-cn-upload-image-png-x-oss-process-image-resize-p-class-lazy-title-수집할-가치가-있는-가지-고급-VSCode-구성-공유-alt-수집할-가치가-있는-가지-고급-VSCode-구성-공유-at-개인-정보-보호를-고려하여-직장에서는-Copilot을-사용하지-않는-것이-좋지만-개인-프로젝트에서는-사용할-수-있습니다-이는-특히-단위-테스트에-흥미롭고-유용합니다-Copilot은-code-settings-json에서-구성할-수-있습니다-code-gt-글꼴-및-크기-조정-여기서는-자세히-설명하지-않고-필요에-따라-텍스트-크기와-크기를-구성합니다-https-img-php-cn-upload-image-수집할-가치가-있는-가지-고급-VSCode-구성-공유-title-수집할-가치가-있는-가지-고급-VSCode-구성-공유-alt-수집할-가치가-있는-가지-고급-VSCode-구성-공유-gt-물론-없으시죠-이-구성을-작성하기-위해-code-settings-json에서-설정하려면-옵션-및-입력-구성-창에서도-구성할-수-있습니다-h-data-id-heading-드래그-삭제-확인-없음-프로그래밍-기술에-자신감이-있거나-VS-Code의-code-Ctrl-Z-code-에-자신감이-있다면-드래그-삭제-확인이-가끔-생각을-방해하기-때문에-삭제-확인을-취소하도록-구성할-수-있습니다-img-src-static-imghwm-default-png-data-src-https-img-php-cn-upload-image-png-x-oss-process-image-resize-p-class-lazy-php-cn-vscode-title-수집할-가치가-있는-가지-고급-VSCode-구성-공유-alt-수집할-가치가-있는-가지-고급-VSCode-구성-공유-img-src-static-imghwm-default-png-data-src-https-img-php-cn-upload-image-png-x-oss-process-image-resize-p-class-lazy-title-수집할-가치가-있는-가지-고급-VSCode-구성-공유-alt-수집할-가치가-있는-가지-고급-VSCode-구성-공유-h-data-id-heading-자동-업데이트-절대-경로-VS-Code의-가장-큰-특징-중-하나는-파일-가져오기-편의성입니다-절대-경로-예-code-comComponents-Button-code-는-code-Button-code-보다-더-편안합니다-디렉토리를-재구성하기-위해-파일을-이동할-때-Can-VS-Code를-사용하시기-바랍니다-파일-경로를-자동으로-업데이트하시겠습니까-구성할-수-있습니다-img-src-static-imghwm-default-png-data-src-https-img-php-cn-upload-image-png-x-oss-process-image-resize-p-class-lazy-title-수집할-가치가-있는-가지-고급-VSCode-구성-공유-alt-수집할-가치가-있는-가지-고급-VSCode-구성-공유-절대-경로-가져오기를-사용하려면-tsconfig-jsconfig-파일에서-경로를-구성해야-합니다-h-data-id-heading-저장-및-실행-ESLint를-설정하고-저장하고-수정하신-분들은-이-설정을-아셔야-합니다-code-fixAll-code-을-추가하면-code-addMissingImports-code-를-통해-누락된-가져오기-또는-저장-후-수행하려는-기타-작업을-보완할-수도-있습니다-구성은-프로그래밍-마법과-같습니다-CSS-형식-지정-이미-Stylelint를-사용하고-있을-수도-있습니다-그렇지-않은-경우-구성에서-설정하세요">2. AI 코딩 🎜🎜GitHub Copilot은 코드를 작성할 때 코드 조각을 생성하는 VS Code용 확장입니다. 그것은 인공 지능과 기계 학습입니다. 마음에 들지 않는 코드가 생성될 수도 있지만, 싫어하지 마세요. 결국 AI 코딩은 미래의 트렌드입니다! 🎜🎜<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/479/213/172/1636514191183990.png?x-oss-process=image/resize,p_40" class="lazy" title="163651414527770수집할 가치가 있는 10가지 고급 VSCode 구성(공유)" alt="수집할 가치가 있는 10가지 고급 VSCode 구성(공유)">🎜🎜at 개인 정보 보호를 고려하여 직장에서는 Copilot을 사용하지 않는 것이 좋지만 개인 프로젝트에서는 사용할 수 있습니다. 이는 특히 단위 테스트에 흥미롭고 유용합니다. 🎜🎜Copilot은 <code>settings.json에서 구성할 수 있습니다. code>; 🎜3. 글꼴 및 크기 조정 🎜🎜 여기서는 자세히 설명하지 않고 필요에 따라 텍스트 크기와 크기를 구성합니다. https://img.php.cn/upload/image/690/603/356/163651414940269수집할 가치가 있는 10가지 고급 VSCode 구성(공유)" title="163651414940269수집할 가치가 있는 10가지 고급 VSCode 구성(공유)" alt="수집할 가치가 있는 10가지 고급 VSCode 구성(공유)"/>🎜🎜물론 없으시죠? 이 구성을 작성하기 위해 <code>settings.json에서 설정하려면 옵션 및 입력 구성 창에서도 구성할 수 있습니다. 🎜<h2 data-id="heading-3">4. 드래그/삭제 확인 없음🎜🎜프로그래밍 기술에 자신감이 있거나 VS Code의 <code>Ctrl+Z에 자신감이 있다면 드래그/삭제 확인이 가끔 생각을 방해하기 때문에 삭제 확인을 취소하도록 구성할 수 있습니다~🎜🎜🎜🎜🎜

5. 자동 업데이트 절대 경로🎜🎜VS Code의 가장 큰 특징 중 하나는 파일 가져오기 편의성입니다. 절대 경로(예: @/comComponents/Button는 ../../Button보다 더 편안합니다. 🎜🎜디렉토리를 재구성하기 위해 파일을 이동할 때 Can VS Code를 사용하시기 바랍니다) 파일 경로를 자동으로 업데이트하시겠습니까? 구성할 수 있습니다: 🎜🎜🎜🎜절대 경로 가져오기를 사용하려면 .tsconfig/.jsconfig 파일에서 경로를 구성해야 합니다. 🎜

6. 저장 및 실행 🎜🎜ESLint를 설정하고 저장하고 수정하신 분들은 이 설정을 아셔야 합니다. fixAll을 추가하면 addMissingImports를 통해 누락된 가져오기 또는 저장 후 수행하려는 기타 작업을 보완할 수도 있습니다. 구성은 프로그래밍 마법과 같습니다~🎜🎜7. CSS 형식 지정🎜🎜이미 Stylelint를 사용하고 있을 수도 있습니다. 그렇지 않은 경우 구성에서 설정하세요! 🎜🎜🎜🎜

또 다른 설정은 editor.suggest.insertMode입니다. "교체"로 설정하면 프롬프트를 선택하고 Tab 또는 Enter를 누르면 전체 텍스트를 힌트인데 매우 유용합니다. editor.suggest.insertMode，当设置为“replace”时，意味着——当你选择一个提示并按 Tab 或 Enter 时，将替换整个文本为提示，这非常有用。

8. 开启 Emmet

你可能熟悉 Emmet —— Web 开发人员必备工具包，如果没有，请设置它；虽然它内置于 VS Code，但必须手动配置启用；

9. Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

虽然它目前尚未内置在 VS Code 中，但可作为免费的 VS Code 扩展进行安装使用，还可以配置附加设置增强它的功能！

10. 单击打开文件

VS Code 默认用户界面，有个奇怪的现象，它需要双击才能从文件资源管理器中打开文件。

单击一下得到的是奇怪的“预览”模式，当你单击下一个文件时，第一个文件就会消失。这就像只有一个标签。

需要进行这个配置，关闭后，单击将在新选项卡中打开文件。问题解决了~

将配置用 Settings Sync

8. Emmet 켜기

웹 개발자를 위한 필수 툴킷인 Emmet에 익숙하실 수도 있습니다. up; VS Code에 내장되어 있지만

9. Tailwind CSS

Tailwind CSS는 다음과 같은 기능을 통합하는 기능 우선 CSS 프레임워크입니다. flex, pt-4, text-center 및 rotate-90와 같은 클래스를 스크립트에서 직접 사용할 수 있습니다. 마크업 언어를 결합하여 어떤 디자인이든 만들 수 있습니다. 현재 VS Code에 내장되어 있지는 않지만 무료 VS Code 확장으로 설치하여 사용할 수 있으며, 추가 설정을 구성하여 기능을 향상시킬 수 있습니다!

🎜🎜

10. 클릭하여 파일 열기

🎜 VS Code 기본 사용자 인터페이스에 이상한 현상이 있습니다. 파일 탐색기에서 파일을 열려면 두 번 클릭해야 합니다. 🎜🎜한 번의 클릭으로 얻을 수 있는 것은 다음 파일을 클릭하면 첫 번째 파일이 사라지는 이상한 "미리보기" 모드입니다. 라벨이 하나뿐인 것 같습니다. 🎜🎜🎜🎜필수 이를 구성한 후 닫은 후 클릭하면 새 탭에서 파일이 열립니다. 문제가 해결되었습니다~🎜🎜 설정 동기화를 사용하여 구성을 동기화하면 어디를 가든 맞춤 설정할 수 있습니다! 시원한! 🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 수집할 가치가 있는 10가지 고급 VSCode 구성(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!