VScode常用技巧

VSCode
作者: 醉月思 发布日期: 2020-07-08 分类: 学习笔记

vscode

Vscode 格式化vue Template代码段

1.安装 vetur

2.在User Setting中增加设置:

"vetur.format.defaultFormatter.html": "js-beautify-html"

2020.07.08留：我现在已经使用prettier来格式化代码了

Vs code 添加 wepy template 代码

  1. 打开File > preference > user snippets, 选择vue

  2. 编辑vue.json

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <view class='page'> </view>",
      "</template>",
      "",
      "<script>",
      "import wepy from 'wepy'",
      "export default class Index extends wepy.page {",
      "config = {",
      "    navigationBarTitleText: '场馆预订',",
      "    usingComponents: {}",
      "};",
      "",
      "components = {};",
      "",
      "mixins = [];",
      "",
      "data = {};",
      "",
      "computed = {};",
      "",
      "methods = {};",
      "",
      "events = {};",
      "",
      "onLoad() {}",
      "}",
      "</script>",
      "<style lang='less'>",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

使用emmet自动代码补全

  1. 打开File > preference > setting, 搜索emmet.triggerExpansionOnTab

  2. 设置为true

自动读取eslint文件并进行修复

  1. 先安装eslint

  2. 设置中添加以下内容

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

2020.07.08留：这个配置已经过时了

正则删除HTML标签

Ctrl + H 正则匹配 <[^>]+> 替换为空

正则替换换行

Ctrl + H 正则匹配 \n 替换为你想要的

tab无法缩进代码

按Ctrl + M试试

多光标操作

1、按住alt，用鼠标左键点击，可以出现多个光标，输入的代码可以在光标处同时增加。

2、按住Ctrl + Alt，再按键盘上向上或者向下的键，可以使一列上出现多个光标。

3、选中一段文字，按shift+alt+i，可以在每行末尾出现光标

4、按shift+alt，再使用鼠标拖动，也可以出现竖直的列光标，同时可以选中多列。

版权声明: 本文首发于 指尖魔法屋-VScode常用技巧（https://blog.thinkmoon.cn/post/210_vscode%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7/） 转载或引用必须申明原指尖魔法屋来源及源地址！