子组件怎么直接挂在到body上_前端开发经验技巧——助你提升开发效率(上)

写在前面

一些技巧总结，希望能帮到还不知道的你。

这篇主要讲解如何使用搜索，如何写自己的代码片段以及emmet语法的使用

为了更好的阅读体验请使用掘金访问

搜索

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

​搜索面板介绍

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

1. 展开为替换

2. 区分大小写

3. 全字匹配（意思就是你搜索的内容是一个完整的单词）

4. 使用正则表达式进行匹配

5. 上一个匹配项

6. 下一个匹配项

7. 在选定内容中查找

搜索使用技巧

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

· 区分大小写

· 全字匹配

· 添加特殊符号（如"."、":"、" "等）

· 限定搜索范围

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

添加特殊符号

日常开发中我们经常想要查看某个函数的定义。当我们ctrl + f 查找时，往往会查找出我们所不需要的结果。

比如这里我想查找定义的addLine()方法，当我们直接搜索addLine时

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

​

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

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

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

限定搜索范围

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

搜索的作用

个人认为，搜索的最大的作用就是帮助我们熟悉项目，阅读其他开发者的代码。

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

搜索时能使用的快捷键

ctrl + f 对选中文本进行查找

enter 下一个匹配项

ctrl + enter 上一个匹配项

自定义代码片段

在日常开发中我们会经常用到插件提供的代码提示，以此来提升我们的开发效率。但插件所提供的东西往往是有限的，每一个开发者的需求也是不一样的，此时自定义代码片段就能帮助我们解决这个痛点——高频短小代码。官方文档Snippet

先给大家看一下效果（自己写的生成箭头函数片段）：

有没有心动的感觉！！！！

接下来介绍如何自定义代码片段

如何进入自定义代码片段

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

如何自定义代码片段

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

箭头函数

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

Vue 模版生成（1）

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

效果展示：

这里主要是给大家展示一下${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>"
 ]
 },

效果展示：

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

生成一个函数注释

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

效果展示：

在这里给我们提供了一些变量供我们使用，$BLOCK_COMMENT_START和BLOCK_COMMENT_END让我们获取当前语言的块注释开始标识和结束标识。另外还有一些有用的变量我就不在这里一一列举了。

如果你还想要了解更多关于代码片段的事，请访问VSCode官网

Emmet语法

先展示一下这个的用法吧

下面给大家列几种常用方式

// div#id
<div id="id"></div>
// 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>