本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

VScode技巧

Vscode 格式化vue Template代码段

1.安装 vetur
2.在User Setting中增加设置:
"vetur.format.defaultFormatter.html": "js-beautify-html"

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, //  启用保存时自动修复,默认只支持.js文件
  "eslint.validate": [
    "javascript", //  用eslint的规则检测js文件
    {
      "language": "vue", // 检测vue文件
      "autoFix": true //  为vue文件开启保存自动修复的功能
    },
    {
      "language": "html",
      "autoFix": true
    },
  ],
}

正则删除HTML标签

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

正则替换换行

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

———— 本文结束 感谢阅读 ————

推广

 继续浏览关于 vscode 的文章

 本文最后更新于:2019/10/28 17:26:58,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 学习笔记 > VScode技巧