我的 VSCode 快捷方式、设置和扩展，以提高工作效率。

祝你有美好的一天😃！

大家好！祝大家有美好的一天！

自从大学开始编程到第一份工作，我用过很多IDE和代码编辑器，比如Python的IDLE、PyCharm、Notepad++、Visual Studio、Android Studio和VS Code 。但当我在第一份工作中使用VS Code时，我感到更满足和快乐，因为它轻量、快速，并且有很多有用的扩展。

单击编辑器，然后在键盘上执行此命令CTRL+P，然后输入settings.json。

editor.tabSize - 表示按下 Tab 键时的空格数。editor.fontSize - 显然是字体的大小😄。

editor.formatOnSave - 在保存文件或使用快捷键CTRL+S时格式化文件内容。

editor.detectIndentation - 我们必须将其设置为false ，以便它不会覆盖我们的editor.tabSize设置。

files.exclude - 在文件资源管理器中要包含或排除的文件或文件夹。您可以使用glob 模式。true表示隐藏文件夹或文件，否则false表示不隐藏。

例如：
src: true -隐藏当前工作区中的 src 文件夹。
src/**.js:true-隐藏src 文件夹中所有以js为扩展名的文件。
package*.json:true-隐藏所有带有包名且以json为扩展名的文件。
san?.js:True -隐藏所有以san开头且后面有任何单个字符且以js为扩展名的文件。 匹配sand.js和sane.js但不匹配sandy.js。

emmet.includeLanguages - 启用默认不支持的语言的 emmet 缩写。

javascript.updateImportsOnFileMove.enabled - 当js文件的文件名更改时更新导入语句。

typescript.updateImportsOnFileMove.enabled - 当ts文件的文件名更改时更新导入语句。

在 VSCode 中启用字体连字

那么什么是字体连字？基本上，字体连字是将两个或多个符号、字母或字符连接起来形成一个新字符。

没有字体连字。

使用字体连字。

很酷吧？

点击此处下载 Fira Code 字体。
解压后安装。

editor.fontFamily - 指定
编辑器中要使用的字体。editor.enableFontLigatures - 是否启用字体连字。

键盘快捷键

CTRL+SHIFT+P - 显示命令面板
CTRL+k CTRL+T - 显示主题列表
CTRL+T - 在所有文件中查找类、函数或变量。
CTRL+KZ - 切换禅定模式

动图

动图

CTRL+, - 转到用户设置

动图

Ctrl+F - 查找
Ctrl+H - 替换

动图

ALT+Enter——选择所有匹配的“查找”

动图

 
ALT——显示定义

动图

CTRL+= - 放大

动图

Shift+UpArrow - 选择上一行的所有代码

动图

ALT+向上箭头- 将选定的代码向上移动一行

动图

ALT+SHIFT+向上箭头- 将选定的代码向上复制一行

动图

CTRL+B - 切换侧边栏
CTRL+SHIFT+X - 显示扩展
CTRL+SHIFT+G - 显示源代码控制
CTRL+SHIFT+E - 显示文件资源管理器
CTRL+SHIFT+D - 显示调试

动图

 
CTRL+SHIFT+V - 预览 Markdown

动图

编辑或添加新的键盘快捷键

好的，让我们编辑并添加一些键盘快捷键。

单击编辑器，然后在键盘上执行此命令CTRL+P，然后输入keybindings.json。

好的，我将把“重新加载窗口”命令从CTRL+R更改为CTRL+E
，并且我将添加两个新命令Git Commit和Git Init。

你的电脑必须安装git才能添加最后两个命令。你可以在这里
找到所有可能的值。VSCode 中有很多命令可以编辑或更改。 所有命令都可以在你的编辑器中使用。执行此命令：Ctrl +K CTRL+S。但要注意，如果你使用新的键绑定添加或编辑新命令，则该键绑定不能存在于当前命令中。

我使用的扩展

1.自动导入

自动查找、解析并提供所有可用导入的代码操作和代码补全。兼容 Typescript 和 TSX。这个扩展能帮你找到文件路径，这功能真是太棒了。

动图

2.自动重命名标签

自动重命名配对的 HTML/XML 标签。此功能在 JSX 中也有效。

动图

3.括号对着色器

一个可自定义的扩展程序，用于为匹配的括号着色。如果您在查找括号或花括号的末尾对时遇到问题，那么这个扩展程序非常适合您。

动图

4.代码时间

Code Time 是一款开源插件，可在 Visual Studio Code 中直接提供编程指标。您可以借此了解自己每天和每周的编程时间，以及哪些语言的编程时间最长。

5. CSS Peek

允许从 HTML 文件中提取 CSS ID 和类字符串作为相应 CSS 的定义。允许提取并转到定义。

动图

6. DotENV

突出显示.env文件中的键、值对。

7.突出显示匹配的标签

突出显示匹配的结束或开始标签。

动图

8. HTML 中 CSS 类名的智能感知

根据工作区中找到的定义，为 HTML 类属性补全 CSS 类名。如果您有时会忘记 CSS 类名，那么这款扩展非常适合您。

动图

9.实时服务器

启动具有静态和动态页面实时重新加载功能的开发本地服务器。

10. Material Icon主题

Visual Studio Code 的 Material Design 图标

11.材料主题

Visual Studio Code 目前最经典的主题

12 One Dark Pro

Atom 为 Visual Studio Code 打造的标志性 One Dark 主题

13暗加语法

VS Code 的默认深色主题，但稍微好一点。

14夜神星

Noctis 是一系列明暗主题，暖色和冷色的平衡融合

15 Python

代码检查、调试（多线程、远程）、智能感知、代码格式化、重构、单元测试、代码片段等。

16 个ES7 React/Redux/GraphQL/React-Native 代码片段

使用 ES7 语法在 JS/TS 中对 React、Redux 和 Graphql 进行简单扩展

17维图尔

VS Code 的 Vue 工具

2019年18期

拍一张你的代码的照片。

19编年史家

在编码时拍摄自己编码的视频。

动图

20 TSLint

TSLint 对 Visual Studio Code 的支持

21 GitLens — Git 增强版

增强 Visual Studio Code 内置的 Git 功能 - 通过 Git blame 注释和代码镜头一目了然地查看代码作者，无缝导航和探索 Git 存储库，通过强大的比较命令获得有价值的见解等等

22德古拉官方

官方 Dracula 主题。一款适用于多种编辑器、Shell 等的暗黑主题。如果你喜欢 Python，你一定会爱上它。

23进口成本

在编辑器中显示导入/需要的包大小

24日志文件荧光笔

如果您想轻松读取日志文件，那么您需要这个。

动图

25 Slack 主题

配色方案灵感来自 Slack 的默认主题

26 Docker

为 Dockerfile 和 docker-compose 文件添加了语法高亮、命令、悬停提示和 linting。我没用过 docker，但听说它是一项很棒的技术，希望将来能用上。

27 Chrome 调试器

想在 VSCode 中调试React代码吗？那就下载这个扩展吧！它可以在 Chrome 浏览器或任何其他支持 Chrome Debugger 协议的目标浏览器中调试 JavaScript 代码。

28代码运行器

在一个命令中运行您的代码片段。

感谢大家阅读这篇文章。

祝你有美好的一天😃！