阅读 4363
VSCode - 快速生成vue模版

VSCode - 快速生成vue模版

在项目中遇到的问题,记录下来,方便日后查阅和复习😁

VSCode 代码格式化 快捷键

Shift + Alt + F
复制代码

什么是VSCode?

Visual Studio Code(以下简称VSCode)是一个轻量且强大的代码编辑器,支持Windows,OSX和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统, 可通过安装插件来支持C++、C#、Python、PHP等其他语言官网下载地址,对我来说感觉这是前端最好用的编辑器啦,很多插件应有尽有。

接下来就进入到正题了。。。

1、安装一个插件,识别vue文件

插件库中搜索Vetur,点击安装,安装完成之后点击重新加载,即可使用
复制代码

2、新建代码片段

mac的步骤如下,由于我安装了转中文插件,所以接下来会是中文的:
code -> 首选项 -> 用户代码片段 -> (新建代码片段取名vue.json)
新建代码片段这块可以直接往下找就能找到vscode上带的vue.json
复制代码

3、在vue.json里写下自己想要生成的vue模版

{
  "Print to console": {
    "prefix": "vue",  
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "data() {",
      "return {",
      "",
      "}",
      "},",
      "//生命周期 - 创建完成(访问当前this实例)",
      "created() {",
      "",
      "},",
      "//生命周期 - 挂载完成(访问DOM元素)",
      "mounted() {",
      "",
      "}",
      "}",
      "</script>",
      "<style scoped>",
      "/* @import url(); 引入css类 */",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }
}
复制代码

4、粘贴以上代码复制到vue.json里效果如下

此处说明一下:"prefix": "vue", 就是快捷键,(vue名称可随意修改)
新建vue文件,输入vue 按键盘的tab件生成vue模版
复制代码

VScode 全局搜索功能

最近知道到VScode这个软件,开始试用,总体感觉很不错,就是不能全局搜索,经过了解,是我的配置问题,上网找到了一个解决办法,

在配置文件添加:

“search.exclude”: {
“system/”: true,
“!/system/*/.ps*”: true
},
复制代码

现在测试一下吧,

ctrl + shift +F,开始你的表演吧。

vscode 点击import 文件自动跳转到该文件

ctrl+鼠标点击

VSCode怎么跳转到指定行

参考:jingyan.baidu.com/article/3a2…

高效使用VSCode的9点建议

www.baidu.com/link?url=-7…

文章分类
前端