VS Code还能这样?

1,993 阅读3分钟

控制台

  • @ 可查看当前文件的所有方法和变量(加个:可以排序

  • # 可在当前打开的所有文件中搜索方法和变量

  • > 控制台命令

  • : 快速去到当前文件的某一行

  • ? 查看所有的快捷命令

操作技巧


善用内置快捷语法

比如输入for,会有提示


这种图标对应的JavaScript Language Basics,展开后如下图这样,有很多定位锚点,直接修改内容=>tab切换到下一个锚点=>修改内容,即可极快速完成很多事情!



重命名

选择某个变量,右键重命名或F2即可全部更改过来


快捷键


通用

Ctrl Tab 来回切换上方打开的标签页。

Ctrl W 关闭当前标签页。

Ctrl S 保存

Ctrl Z 撤销

Ctrl Y 重做

Ctrl F 查找,有个whole word选项可以开启精确匹配,并对Ctrl D选择重复项产生影响

Ctrl H 查找并替换

Ctrl N 新建文档


窗口相关

Ctrl B 开关侧边栏

Ctrl Shift E 侧边栏文件区(Explorer)

Ctrl Shift F 侧边栏搜索区(Find)(跨文件搜索

Ctrl Shift G 侧边栏Git管理(Git)

Ctrl Shift D 侧边栏调试区(Debug)

Ctrl 2 开启第二个分屏或切换到第二个分屏,配合其它数字同理(将某个分屏拉到比另一个大很多,然后控制台开启maximize editor group选项可以在切换分屏时自动放大当前屏

Ctrl ~ 在当前编辑文件的目录处唤起终端,当熟练使用系统cmd后转来用VS Code终端

Ctrl J 开关下侧栏,不一定开启终端

Ctrl K Z 开启zen模式

Ctrl -+ 缩小和放大界面


编辑相关

Ctrl L 选中当前行

Ctrl Shift K 删除当前行

Ctrl D 按一次选中当前光标对应单词,按两次以上继续匹配一样的单词

Alt按住 鼠标左键 同时出现多个光标

鼠标中键按住拖动 快速选择多行内容

Shift Ctrl [] 开关代码块

Alt UpDown 将该行和上一行或下一行调换顺序

Alt Shift UpDown 将该行往上一行或下一行复制一份过去

Ctrl Alt UpDown 新增光标

Ctrl [] 增加或减少缩进。

Alt Shift F 格式化代码

F2 全局(跨文件)修改变量名

F8 逐个跳转至文件中的错误处并打开详细信息

Ctrl Space 在某些地方比如一个点后面,按这个可以调出代码智能提示(注意别和输入法切换冲突,可以通过系统设置添加英语语言,Alt Shift切换至英语输入后,该快捷键就不会唤起输入法


顺手插件

Better Comments

通过! ? *等符号,可以使注释带上颜色,方便突出重点内容。在settings.json可以自定义样式。

Quokka.js

可以通过Ctrl K Q来开启,在编辑器中提供一个实时反馈的环境,十分方便。(貌似仅支持JavaScript



settings.json常用配置

{
  "editor.minimap.enabled": false, // 关闭编辑器迷你地图
  "workbench.editor.enablePreview": false, // 点击文件默认在新窗口打开,而不是现窗口跳转
  "workbench.colorTheme": "Monokai ST3", // 颜色主题,强烈推荐monokai,代码提示还挺智能的,有些场景比如找不到有某个方法就会显示不同的颜色以提醒用户
  "emmet.triggerExpansionOnTab": true, // 只要按tab就会生成emmet代码块,而不需要在代码提示里找
  "better-comments.tags": [ // better comments插件自定义注释的颜色即触发符号
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "backgroundColor": "transparent"
        },
        {
            "tag": "-",
            "color": "#FF8C00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "#",
            "color": "#333",
            "strikethrough": false,
            "backgroundColor": "#98C379"
        },
        {
            "tag": "@",
            "color": "pink",
            "strikethrough": false,
            "backgroundColor": "rgba(0,0,0,.2)"
        },
    ],
  
}