zoukankan      html  css  js  c++  java
  • 【vsCode】识别.vue/一键生成.vue模板文件

    1.安装插件Vetur     

     结果 ---> .vue代码识别彩标

    2.配置.vue文件模板,以便快速一键生成格式化

       2.1新建代码片段

       File->Preferences->User Snippets-->New Global Snippets file... -->取名vue.json

       2.2删除其中的代码片段
       2.3黏贴.vue配置代码
    {
        "Print to console": {
            "prefix": "vue",
            "body": [
                "<!-- $1 -->",
                "<template>",
                "<div class='$2'>$5</div>",
                "</template>",
                "",
                "<script>",
                "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
                "//例如:import 《组件名称》 from '《组件路径》';",
                "",
                "export default {",
                "//import引入的组件需要注入到对象中才能使用",
                "components: {},",
                "data() {",
                "//这里存放数据",
                "return {",
                "",
                "};",
                "},",
                "//监听属性 类似于data概念",
                "computed: {},",
                "//监控data中的数据变化",
                "watch: {},",
                "//方法集合",
                "methods: {",
                "",
                "},",
                "//生命周期 - 创建完成(可以访问当前this实例)",
                "created() {",
                "",
                "},",
                "//生命周期 - 挂载完成(可以访问DOM元素)",
                "mounted() {",
                "",
                "},",
                "beforeCreate() {}, //生命周期 - 创建之前",
                "beforeMount() {}, //生命周期 - 挂载之前",
                "beforeUpdate() {}, //生命周期 - 更新之前",
                "updated() {}, //生命周期 - 更新之后",
                "beforeDestroy() {}, //生命周期 - 销毁之前",
                "destroyed() {}, //生命周期 - 销毁完成",
                "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
                "}",
                "</script>",
                "<style lang='scss' scoped>",
                "//@import url($3); 引入公共css类",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }
    }
    View Code

     结果 --->保存好之后,新建.vue结尾的文件,在文件中输入vue并按下Tab键,则一键生成同模板的.vue文件代码段

    3.根据eslint保存自动修复配置

      3.1安装插件eslint和prettier
      3.2配置settings

     File->Preferences->Settings -->黏贴设置代码

    {
      "editor.formatOnPaste": true, //粘贴时格式化
      "eslint.autoFixOnSave": true /**eslint保存自动校验不全*/,
      "eslint.alwaysShowStatus": true,
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      // "window.zoomLevel": 1, // 窗口大小比例
      // "editor.tabSize": 2,
      "editor.detectIndentation": false,
      "emmet.triggerExpansionOnTab": true,
      // "update.channel": "none",
      "editor.formatOnSave": true, // eslint保存格式化
      "javascript.format.enable": false // 不启动JavaScript格式化
      // "prettier.eslintIntegration": true // 让prettier遵循eslint格式美化
    }
    View Code

       

       

  • 相关阅读:
    机器学习、图像识别方面 书籍推荐 via zhihu
    网络工具 NetCat
    CSharp读取配置文件的类(简单实现)
    about future
    Google's BBR拥塞控制算法模型解析
    对称加密与非对称加密
    windows平台下新网络库RIO ( Winsock high-speed networking Registered I/O)
    在mac os下编译android -相关文章
    [原创] linux 下上传 datapoint数据到yeelink 【golang版本】同时上传2个数据点
    在 树莓派上使用 c++ libsockets library
  • 原文地址:https://www.cnblogs.com/smilexumu/p/11935657.html
Copyright © 2011-2022 走看看