美文网首页js css html
vscode 基础操作(官方get-start)

vscode 基础操作(官方get-start)

作者: mudssky | 来源:发表于2023-01-10 10:54 被阅读0次

    今天才发现vscode打开以后,起始页右边walkthroughs会显示一长串教程
    起始页里面,三个板块我只有最近打开这个功能是最常用,其他两个是根本没用过。
    所以今天看了一下vscode的教程,还是比较实用的,至少学会了一个多光标操作。

    01.多光标操作

    1. 区域选择,Shift+DownArrow Shift+RightArrow, Shift+UpArrow, Shift+LeftArrow ,shift+方向键控制选择区域,shift+alt+鼠标 拖拽选择,或者按住鼠标中键拖拽(因为鼠标中键绑定为utools的热键了,所以我还是选择)
    2. 添加光标,Ctrl+Alt+UpArrowCtrl+Alt+DownArrow分别向上或者向下添加光标,Alt+鼠标点击在点击的地方添加光标
    3. 选中出现的所有单词,这个操作就比较强大的,光标在一个单词上,按ctrl+shift+l,就会在所有相同单词上出现光标,然后我们就可以替换这些单词了。(一般这种情况,之前我都是直接f2重命名,或者ctrl+f搜索替换的)

    vscode vim的多光标

    因为我还在用vscode vim,这个的快捷键可以和vscode的多光标结合起来。

    比如vim里面选中有一个模式,按v就可以

    多光标则是在命令模式按ctrl+v,然后上下方向键

    vim比vscode方便的地方在于移动有一套逻辑

    比如

    • w 后移一个单词
    • W后移一个单词+符号
    • b前移一个单词
    • B前移一个单词+符号
    • $移动到尾部
    • ...

    这个和多光标结合起来就比较灵活

    还有vim剪切和复制粘贴的逻辑也可以在多光标模式使用。

    加上vscode自带的alt+鼠标点击添加光标就满足使用了

    02.智能提示

    把鼠标指针移动到函数或者api上面就会浮现智能提示

    或者ctrl+space激活智能提示

    03.行操作

    1. 复制一行插入上方或下方(这个很常用,虽然vim也可以 yyp,但是要两步操作了),shift+alt+DownArrow,Shift+Alt+UpArrow
    2. 移动整行到上方或者下方 Alt+UpArrowAlt+DownArrow(个人不是很常用,一般使用vim的sort命令按变量名排序),
    3. 删除整行,ctrl+shift+k(不如用vim的dd)
    4. 注释 一行ctrl+/

    04.重命名重构

    f2重构还是比较常用的。

    05.格式化

    Shift+Alt+F,或者对选中区域执行ctrl+k ctrl+f

    这个我一般是右键菜单执行,还有在设置里面设置成保存时自动执行格式化

    或者 ctrl+k ctrl+f

    06.代码折叠

    • 折叠代码 ctrl+shift+[

    • 展开代码 ctrl+shift+]

    • 折叠所有代码 ctrl+k ctrl+0

    • 展开所有代码 ctrl+k ctrl+j

    注意要给vscode vim 配置一下,不然ctrl开头的部分快捷键会被vim挡住

    比如下面就是我的配置

      // 取消部分快捷键的拦截
      "vim.handleKeys": {
        "<C-a>": false,
        "<C-f>": false,
        "<C-k>": false
      },
    

    (这个其实我平时一般不用快捷键,因为左边有折叠按钮可以点)

    07.错误和警告

    F8在错误之间导航

    关于错误,我装了error lens 插件,能直接把报错信息显示到出错的位置

    08.代码片段补全 snippets

    可以自己创建,

    我一般都是下载别人提供的补全,自己很少写这个

    09.Emmet

    这个是用来写html的快速语法,但是现在一般都不直接写html了

    写jsx的时候,这个东西就没什么用了。

    vscode里面是输入emmet语法以后,会出现代码提示给你选择触发。

    也可以配置成tab触发

    10.ts类型检查

    可以在顶部添加

    //ts-nocheck禁用ts检查

    相关文章

      网友评论

        本文标题:vscode 基础操作(官方get-start)

        本文链接:https://www.haomeiwen.com/subject/ztcvcdtx.html