『干货』WebStorm代码模板配置大全

『干货』WebStorm代码模板配置大全

---

一、代码模板🤠

**代码模板指的是一个预定义的代码结构，用于快速创建特定类型代码的起点，是一个基本框架或蓝图，包含了常见的代码结构、语法和关键元素，可以根据需要进行自定义和扩展。**在VsCode编辑器上更多是通过快速生成指令来实现，当然也有创建文件时自动添加代码模板的插件。对于Jetbrains家族来讲，软件本身支持在创建文件的时候自动添加预制代码，且内置了大多数不同类型文件的代码模板。
本文章主要是基于Jetbrains家族中的WebStorm这个IDE，更好的利用其代码模板功能进行扩展，方便且提高编写代码的效率，如需设置代码模板，在设置选项此处中配置👇。

---

二、前端 vue 框架

2.1 选项式API

适用于 Vue2 以及使用选项式 API 的 Vue3 项目。

<template>
  <section id="${NAME}">
    #[[$END$]]#
  section>
template>

<script>
/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
export default {
  name: "${NAME}",
  components: {
  },
  data() {
    return {};
  },
  // 计算属性
  computed: {
  },
  mounted() {
  }
}
script>

<style lang="scss" scoped>
#${NAME} {}

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

2.2 组合式API

适用于 Vue3 中使用