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

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

青灯夜游
풀어 주다: 2021-11-15 18:51:36
앞으로
3232명이 탐색했습니다.

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

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

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

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

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

1. 隐藏活动栏

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

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

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

수집할 가치가 있는 10가지 고급 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 编码是未来趋势!

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

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

可以在 settings.json 中配置 Copilot;

3. 字体与缩放

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

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

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

4. 无拖拽/删除确认

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

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

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

5. 自更新绝对路径

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

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

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

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

6. 保存执行

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

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

수집할 가치가 있는 10가지 고급 VSCode 구성(공유)이 기사에서는 ​​10개를 가져왔습니다. settings.json 높음(설치) 레벨(컵) 구성 항목~

1. 액티비티 바 숨기기

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

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

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

수집할 가치가 있는 10가지 고급 VSCode 구성(공유)단축키 설정 방법: 키 바인딩

🎜 Ctrl+B를 사용하여 파일 탐색기를 숨기거나 표시할 수 있고, Ctrl+Alt+B를 사용하여 활동 표시줄을 숨기거나 표시할 수 있습니다. 명령 패널Ctrl+Shift+P, 단축키를 사용하면 커핑 효과가 더 좋아집니다~🎜🎜활동 표시줄이 숨겨지면 단축키를 사용하여 다른 작업 공간으로 이동할 수도 있고, 예: Ctrl+Shift+E(파일 탐색기로 이동), Ctrl+Shift+X(확장 프로그램으로 이동), Ctrl+Shift+H 코드 > (검색 및 바꾸기) 등 🎜<h2 data-id="heading-1">2. AI 코딩 🎜🎜GitHub Copilot은 코드를 작성할 때 코드 조각을 생성하는 VS Code용 확장입니다. 그것은 인공 지능과 기계 학습입니다. 마음에 들지 않는 코드가 생성될 수도 있지만, 싫어하지 마세요. 결국 AI 코딩은 미래의 트렌드입니다! 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/479/213/172/1636514191183990.png" 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에 자신감이 있다면 드래그/삭제 확인이 가끔 생각을 방해하기 때문에 삭제 확인을 취소하도록 구성할 수 있습니다~🎜🎜수집할 가치가 있는 10가지 고급 VSCode 구성(공유)🎜🎜수집할 가치가 있는 10가지 고급 VSCode 구성(공유)🎜

5. 자동 업데이트 절대 경로🎜🎜VS Code의 가장 큰 특징 중 하나는 파일 가져오기 편의성입니다. 절대 경로(예: @/comComponents/Button../../Button보다 더 편안합니다. 🎜🎜디렉토리를 재구성하기 위해 파일을 이동할 때 Can VS Code를 사용하시기 바랍니다) 파일 경로를 자동으로 업데이트하시겠습니까? 구성할 수 있습니다: 🎜🎜수집할 가치가 있는 10가지 고급 VSCode 구성(공유)🎜🎜절대 경로 가져오기를 사용하려면 .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,但必须手动配置启用;

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

9. Tailwind CSS

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

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

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

10. 单击打开文件

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

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

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

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

将配置用 Settings Sync

8. Emmet 켜기

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

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

9. Tailwind CSS

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

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

10. 클릭하여 파일 열기

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

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

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿