提升开发效率之VScode使用技巧

MAYOHA
4,843 阅读4分钟

写在前面

一些敬仰以及技巧总结，希望能帮到还不知道的你。
这篇主要讲解如何使用搜索，如何写自己的代码片段以及emmet语法的使用。

搜索

在VSCode里一共有两个搜索，一个是在某个具体的文件下局部搜索，另外一个是整个文件夹下的全局搜索。并且这两个搜索默认是不区分大小写的。 image.png

搜索面板介绍

image.png
解释一下上面七个icon的作用。

  1. 展开为替换
  2. 区分大小写
  3. 全字匹配（意思就是你搜索的内容是一个完整的单词）
  4. 使用正则表达式进行匹配
  5. 上一个匹配项
  6. 下一个匹配项
  7. 在选定内容中查找

搜索使用技巧

这里我们以在.vue文件里的使用为例

  • 区分大小写
  • 全字匹配
  • 添加特殊符号（如"."、":"、" "等）
  • 限定搜索范围

前面两点很简单，这里就不多加赘述了，这里主要讲一下后面两点。

添加特殊符号

日常开发中我们经常想要查看某个函数的定义。当我们ctrl + f 查找时，往往会查找出我们所不需要的结果。
比如这里我想查找定义的addLine()方法，当我们直接搜索addLine时 1.gif

从图中我们可以看到我们VSCode给我们筛选出来的结果不仅有addLine，还有addLineForm、addLineRules等，为了避免这种情况你可以打开全字匹配功能，当然这还远远不够。

2.gif

从上图我们可以发现，我们搜索到的不仅有addLine()方法，还有他的调用this.addLine()，此时只需要在我们想要搜索的方法前面加一个空格就好了，因为在Vue里，要调用方法的话都必须通过Vue实例来调用。

image.png

再比如，我们现在想要查看子组件prop的size的默认属性，是你你又会怎么做呢？此时加一个空格可能就不能完全解决我们的问题。

3.gif

从图中可以看出，我们不仅查找到了prop里的size，还查找到了元素中size属性，此时 我们在搜索的内容后面加一个:就ok了

限定搜索范围

当你知道你想要搜索的内容大概在哪个文件夹下时，我们可以指定全局搜索的范围来减少不必要的搜索结果。

image.png

搜索的作用

个人认为，搜索的最大的作用就是帮助我们熟悉项目，阅读其他开发者的代码。
比如说，刚进公司时，我们总会花上一段时间熟悉项目，了解其他开发者的代码。在你熟悉项目时，你会发现有许多东西已经写在全局上面了，此时你想要找到这些组件、方法你就不得不通过全局搜索的方式来查找。以此来了解别人组件或者方法的使用。

搜索时能使用的快捷键

ctrl + f                 对选中文本进行查找
enter                      下一个匹配项
ctrl + enter           上一个匹配项 

自定义代码片段

在日常开发中我们会经常用到插件提供的代码提示，以此来提升我们的开发效率。
但插件所提供的东西往往是有限的，每一个开发者的需求也是不一样的，此时自定义代码片段就能帮助我们解决这个痛点——高频短小代码。
先给大家看一下效果（自己写的生成箭头函数片段）：

af.gif

有没有心动的感觉！！！！
接下来介绍如何自定义代码片段

如何进入自定义代码片段

image.png

根据自己所使用的语言新建代码片段

image.png

如何自定义代码片段

用几个例子给大家讲解一下最常用的几种用法（附上代码，有需要的自取哦） 箭头函数

//箭头函数提示
"Arrow Function": {
    "prefix": "af",
    "body": [
        "($1) => {",
        "  $0",
        "}"
    ],
},

image.png image.png

Vue 模版生成（1）

//Vue模版生成
"Vue template": {
    "prefix": "tmp",
    "body": [
        "<template>",
        "  <div>$0</div>",
        "</template>",
        "",
        "<script>",
        "export default {}",
        "</script>",
        "",
        "<style lang='${1|less,scss|}' scoped></style>"
    ]
},

效果展示：

tmp1.gif

这里主要是给大家展示一下${1|less,scss|}的这种用法,令我们的代码片段支持可选项

Vue 模版生成（2）

//Vue模版生成
"Vue template": {
    "prefix": "tmp",
    "body": [
        "<template>",
        "  <div>$0</div>",
        "</template>",
        "",
        "<script>",
        "export default {}",
        "</script>",
        "",
        "<style lang='${1:less}' scoped></style>"
    ]
},

效果展示：

tmp2.gif

这里主要是给大家展示一下'${1:less}'的这种用法，令我们的代码片段支持修改

生成一个函数注释

// Function Comment
"Comment": {
    "prefix": "fc",
    "body": [
        "$BLOCK_COMMENT_START*",
        " * @description:$1",
        " * @param {$2}",
        " * @return {$3}",
        " $BLOCK_COMMENT_END",
        ""
    ]
}

效果展示：

comment.gif

在这里给我们提供了一些变量供我们使用，$BLOCK_COMMENT_START和BLOCK_COMMENT_END让我们获取当前语言的块注释开始标识和结束标识。另外还有一些有用的变量我就不在这里一一列举了。 如果你还想要了解更多关于代码片段的事，请访问VSCode官网

Emmet语法

先展示一下这个的用法吧 id.gif 下面给大家列几种常用方式 id

// div#id
<div id="id"></div>

class

// div.test
<div class="test"></div>

重复

// div.test*3
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

子节点

// div>ul>li
<div>
  <ul>
    <li></li>
  </ul>
</div>

兄弟节点

// div+span
<div></div>
<span></span>

文本

// div{文字}
<div>文字</div>

分组

// ul>(li*3)
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

想要了解更多请访问官网

avatar
文章
阅读
粉丝