在vscode中创建自己的代码文件格式

vscode中自定义用户代码片段

在新建一个HTML文件的时候，我们常常会使用**!+tab**来快速创建一个h5页面。

那我们来看一下，如何能自定义一个指令创建想要的文件格式呢。

1. 首先打开vscode,左下角找到设置标志
   

2. 找到’用户代码片段‘

3. 选择新建全局代码片段文件

4. 按照提示输入文件名，也就是在文件中使用的快捷命令（比如建h5文件时的！）

5. 然后就会出现这样的文件啦！我这里以新建一个vue文件为列来写指令内容：

   {
       "Print to console":{
           "prefix": "vue",
               "body": [
                   "<template>",
                   "  <div class=\"wrapper\">",
                   "    $0",
                   "  </div>",
                   "</template>",
                   "",
                   "<script>",
                   "export default {",
                   "  components: {},",
                   "  props: {},",
                   "  data () {",
                   "    return {",
                   "    };",
                   "  },",
                   "  watch: {},",
                   "  computed: {},",
                   "  methods: {},",
                   "  created () {},",
                   "  mounted () {}",
                   "};",
                   "</script>",
                   "<style lang=\"scss\" scoped>",
                   ".wrapper{}",
                   "</style>",
                   ""
               ],
               "description": "A vue file template"
       }
   }
   
   

   将上面的内容复制到文件中就好了。

   6. 接下来创建一个vue的文件来试一下吧

      

   有指令了！！回车，你就会得到下面的页面了

      <template>
        <div class="wrapper">
          
        </div>
      </template>
      
      <script>
      export default {
        components: {},
        props: {},
        data () {
          return {
          };
        },
        watch: {},
        computed: {},
        methods: {},
        created () {},
        mounted () {}
      };
      </script>
      <style lang="scss" scoped>
      .wrapper{}
      </style>
   

大家可以安装自己的需求去更改啦！！！