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

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

文章目录

  • 『干货』WebStorm代码模板配置大全
    • 一、代码模板
    • 二、前端 vue 框架
      • 2.1 选项式API
      • 2.2 组合式API
      • 2.3 组合式API + TS
    • 三、 前端 UniApp 框架
      • 3.1 选项式API
      • 3.2 组合式API
      • 3.3 组合式API + TS
    • 四、前端 React 框架
      • 4.1 类声明式
      • 4.2 函数声明式
    • 五、单文件 HTML 模板
    • 六、常见问题
    • 推荐博文


一、代码模板

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


二、前端 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>

不带头部注释:

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

<script>
export default {
  name: "${NAME}",
  components: {
  },
  data() {
    return {};
  },
  // 计算属性
  computed: {
  },
  mounted() {
  }
}
script>

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

style>

2.2 组合式API

适用于 Vue3 中使用

你可能感兴趣的:(webstorm,ide,前端)