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

news2024/12/21 17:00:16

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

『干货』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，更好的利用其代码模板功能进行扩展，方便且提高编写代码的效率，如需设置代码模板，在设置选项此处中配置👇。
图 1-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 中使用 <script setup> 组合式 API 语法糖的项目。
带有头部注释：

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

<script setup>
/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
import {computed, reactive, onMounted} from "vue";

const \$refs = reactive({})
const \$props = defineProps({});
const \$state = reactive({});
const \$emits = defineEmits([]);


function execute() {
}

onMounted(() => {
  execute()
})

</script>

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

</style>

不带头部注释：

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

<script setup>
import {computed, reactive, onMounted} from "vue";

const \$refs = reactive({})
const \$props = defineProps({});
const \$state = reactive({});
const \$emits = defineEmits([]);


function execute() {
}

onMounted(() => {
  execute()
})

</script>

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

</style>

2.3 组合式API + TS

相对于组合式API的基础上添加了TS语法
带有头部注释：

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

<script lang="ts" setup>
/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
import {
    computed, 
    reactive,
    onMounted,
  	type PropType,
    type ComponentPublicInstance
} from "vue";

type RefComponent = Record<string, ComponentPublicInstance<Record<string, any>>>;

const \$refs: RefComponent = reactive({})
const \$props = defineProps({});
const \$state = reactive({});
const \$emits = defineEmits([]);


function execute() {
}

defineExpose({})

onMounted(() => {
  execute()
})

</script>

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

</style>

不带头部注释：

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

<script lang="ts" setup>
import {
    computed, 
    reactive,
    onMounted,
    type PropType,
    type ComponentPublicInstance
} from "vue";

type RefComponent = Record<string, ComponentPublicInstance<Record<string, any>>>;

const \$refs: RefComponent = reactive({})
const \$props = defineProps({});
const \$state = reactive({});
const \$emits = defineEmits([]);


function execute() {
}

defineExpose({})

onMounted(() => {
  execute()
})

</script>

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

</style>

三、 前端 UniApp 框架

Uniapp此部分其实和Vue相差不大，两者语法有所相同

3.1 选项式API

基于 Vue2 编写的 UniApp 项目占据大多数，组件市场中大部分作者为了同时兼容 Vue2 和 Vue3 采用选项式 API，因此目前的使用频率比较高，适合基于 Vue2 以及 Vue3 项目。
带有头部注释：

<template>
  <view class="${NAME}">
    #[[$END$]]#
  </view>
</template>

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

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

</style>

不带头部注释：

<template>
  <view class="${NAME}">
    #[[$END$]]#
  </view>
</template>

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

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

</style>

3.2 组合式API

带有头部注释：

<template>
  <view class="${NAME}">
    #[[$END$]]#
  </view>
</template>

<script setup>
/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
    computed,
    reactive,
    onMounted
} from "vue";

const $refs = reactive({});
const $props = defineProps({});
const $state = reactive({});
const $emits = defineEmits([]);


function execute() {
}

onMounted(() => {
execute();
});

onShow(() => {});

onLoad(() => {});
</script>

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

</style>

不带头部注释：

<template>
  <view class="${NAME}">
    #[[$END$]]#
  </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
    computed,
    reactive,
    onMounted
} from "vue";

const $refs = reactive({});
const $props = defineProps({});
const $state = reactive({});
const $emits = defineEmits([]);


function execute() {
}

onMounted(() => {
execute();
});

onShow(() => {});

onLoad(() => {});
</script>

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

</style>

3.3 组合式API + TS

带有头部注释：

<template>
  <view class="${NAME}">
    #[[$END$]]#
  </view>
</template>

<script lang="ts" setup>
/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
    computed,
    reactive,
    onMounted,
    type PropType,
    type ComponentPublicInstance
} from "vue";

type RefComponent = Record<string, ComponentPublicInstance<Record<string, any>>>;

const $refs: RefComponent = reactive({});
const $props = defineProps({});
const $state = reactive({});
const $emits = defineEmits([]);


function execute() {
}

onMounted(() => {
execute();
});

onShow(() => {});

onLoad(() => {});
</script>

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

</style>

不带头部注释：

<template>
  <view class="${NAME}">
    #[[$END$]]#
  </view>
</template>

<script lang="ts" setup>
import {onLoad, onShow} from "@dcloudio/uni-app"
import {computed, reactive, onMounted} from "vue";
import type {PropType, ComponentPublicInstance} from "vue";

const \$refs = reactive({});
const \$props = defineProps({});
const \$state = reactive({});
const \$emits = defineEmits([]);


function execute() {
}

onMounted(() => {
  execute();
});

onShow(() => {})

onLoad(() => {})

</script>

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

</style>

四、前端 React 框架

4.1 类声明式

带有头部注释：

import React, { Component } from 'react';
// import "./scss/index"

/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
class ${NAME} extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
  
  componentDidMount() {
  }
  
  componentWillUnmount() {
  }
  
  render() {
    return (
        <>
        
        </>
    )
  }
}

export default ${NAME};

不带头部注释：

import React, { Component } from 'react';
// import "./scss/index"

class ${NAME} extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
  
  componentDidMount() {
  }
  
  componentWillUnmount() {
  }
  
  render() {
    return (
        <>
        
        </>
    )
  }
}

export default ${NAME};

4.2 函数声明式

带有头部注释：

import React, {useState, useEffect} from 'react';
import "./scss/index"

/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
const ${NAME} = (props) => {
  const [\$state, setState] = useState({});
  
  useEffect(() => {})


  return (
      <>
        
      </>
  );
};

export default ${NAME};

不带头部注释：

import React, {useState, useEffect} from 'react';
import "./scss/index"

const ${NAME} = (props) => {
  const [\$state, setState] = useState({});
  
  useEffect(() => {})


  return (
      <>
        
      </>
  );
};

export default ${NAME};

五、单文件 HTML 模板

创建一个HTML文件，使用的场景不会太多，基于传统老式JQuery开发的多页面应用可能会用的比较多，对于我而言，可能是为了测试样式或则脚本的一个特性而创建一个测试页。可有的选择也有快速创建初始代码块指令这一方法，具体可以移步：。
对于大多数人来讲，WebStorm 自带的HTML模板就可以解决大多数问题，当然为扩展内容，可以尝试替换下面的模板。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>#[[$Title$]]#</title>
  <link rel="stylesheet" type="text/css" href>
  <style>
    #${NAME} {}
  </style>
</head>
<body>
    <noscript>
        <p>该页面需要在支持Javascript的浏览器上运行</p>
    </noscript>
    <section id="${NAME}">
        
    </section>
    #[[$END$]]#
    <script type="text/javascript" src></script>
    <script>
    
    </script>
</body>
</html>

六、常见问题

值得注意的是，如果对代码样式有一定的自定义程度，基于模板创建的代码可能会产生奇怪的样式。
图 5-1
解决的办法有两种：

  • 第一种是直接在模板中关闭“按照样式重新格式化”这个选项，但大部分人都希望模板能够随着自己的样式规范走，所以说这并不是最好的方法。image.png

  • 第二种是修改自定义样式的规则，直至模板在格式化之后能够符合自己的样式，这是最好的方法，但也是最耗时的，根据自己的需求安排即可。

    像图5-1中的问题，可以通过勾选此配置解决。
    图 5-2

推荐博文🍗

  • 《『速查手册』HTML 语义化标签 | 语义化标签必要性？》
  • 《前端快速生成初始代码块》

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1121352.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

史上最全 2023全国大学生软件测试大赛——赛后有感

史上最全 2023全国大学生软件测试大赛——赛后有感

这个比赛什么成分我不好多说&#xff0c;首先说一下我的背景&#xff0c;我们学校是这个比赛的我们省赛的主办方&#xff0c;老师要求我们参加web应用测试和开发者测试&#xff0c;我都参加了&#xff0c;自认为还算是个学习成绩比较好的student&#xff0c;计算机专业前5%&…
阅读更多...
【BP-Adaboost预测】基于BP神经网络的Adaboost的单维时间序列预测研究（Matlab代码实现）

【BP-Adaboost预测】基于BP神经网络的Adaboost的单维时间序列预测研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
详解 Diffusion (扩散) 模型

详解 Diffusion (扩散) 模型

扩散模型是跨不同深度学习领域使用的生成模型。目前&#xff0c;它们主要用于图像和音频生成。最值得注意的是&#xff0c;这些模型是令人印象深刻的图像生成模型&#xff08;例如 Dalle2 和稳定扩散&#xff09;背后的驱动力。我相信您已经看过这些模型生成的闪烁图像。令人惊…
阅读更多...
Java基础-IO流

Java基础-IO流

目录 1 File 类的使用 1.1 File类的概念 1.2 构造方法 1.3 常用方法 1.4 课后练习 2 IO流原理及流的分类 2.1 IO原理 2.2 流的分类 2.3 IO流体系 2.4 接口方法 2.4.1 InputStream & Reader相同点 2.4.2 InputStream方法详解 2.4.3 Reader方法详解 2.4.4 Outp…
阅读更多...
【数据结构】顺序表实现通讯录

【数据结构】顺序表实现通讯录

前言 在上一节中我们实现了顺序表&#xff0c;现在我们将使用顺序表完成通讯录的实现。&#xff08;注&#xff1a;本人水平有限&#xff0c;“小屎山”有些许bug&#xff0c;代码冗余且语无伦次&#xff0c;望谅解&#xff01;&#x1f605;&#xff09; 文章目录 一、数据结构…
阅读更多...
postgresql14-安装（一）

postgresql14-安装（一）

安装 以管理员权限运行windows版安装包&#xff0c;否则会导致安装不全。过程中记录密码。 在服务管理&#xff0c;启动postgresql服务。 管理工具pgadmin
阅读更多...
使用Dockerfile生成docker镜像和容器的方法记录

使用Dockerfile生成docker镜像和容器的方法记录

一、相关介绍 Docker 是一个开源的容器化平台&#xff0c;其中的主要概念是容器和镜像。 容器是 Docker 的运行实例。 它是一个独立并可执行的软件包&#xff0c;包含了应用程序及其依赖的所有组件&#xff08;如代码、运行时环境、系统工具、库文件等&#xff09;。容器可以在…
阅读更多...
用户及授权设置API

用户及授权设置API

用户及授权设置API 一、登录API——wx.login(object)二、用户信息API——wx.getUserInfor(object)三、授权API——wx.authorize(object object)四、设置API——wx.openSetting(object object)&wx.getSetting(object object)1、wx.openSetting(object object)2、wx.getSetti…
阅读更多...
汽车屏类产品（五）：中控IVI车载信息娱乐系统

汽车屏类产品（五）：中控IVI车载信息娱乐系统

前言： 车载信息娱乐系统（IVI）的起源可以追溯到20世纪，按钮调幅收音机被认为是第一个功能。从那以后，IVI系统在创造壮观的车内体验方面变得不可或缺，以至于汽车被称为“车轮上的智能手机”。但随着包括自动驾驶汽车在内的汽车技术的进步，以及对个性化体验的需求不断增长…
阅读更多...
从裸机启动开始运行一个C++程序（十二）

从裸机启动开始运行一个C++程序（十二）

前序文章请看&#xff1a; 从裸机启动开始运行一个C程序&#xff08;十一&#xff09; 从裸机启动开始运行一个C程序&#xff08;十&#xff09; 从裸机启动开始运行一个C程序&#xff08;九&#xff09; 从裸机启动开始运行一个C程序&#xff08;八&#xff09; 从裸机启动开始…
阅读更多...
SpringBoot连接MySQL密码错误，报错：Access denied for user

SpringBoot连接MySQL密码错误，报错：Access denied for user

记&#xff1a;一次连接MySQL报密码错误&#xff0c;Access denied for user 检查步骤&#xff1a; 核对用户和密码是否正确&#xff0c;用工具登陆试下。如果配置文件是yml格式&#xff0c;配置密码是123456这种纯数字&#xff0c;记得加上单/双引号。检查云上数据库配置&am…
阅读更多...
使用rna-seq定量软件salmon运行index步骤遇到的一个问题（计算集群slurm）

使用rna-seq定量软件salmon运行index步骤遇到的一个问题（计算集群slurm）

salmon 帮助文档 https://salmon.readthedocs.io/en/latest/building.html#installation github主页 https://github.com/COMBINE-lab/salmon 我最开始是直接使用conda安装的 v1.4 首先第一步是对参考转录组进行索引&#xff0c;命令 salmon index -t pome.fa -i transcr…
阅读更多...
postgresql14-用户与角色（二）

postgresql14-用户与角色（二）

介绍 查看 SELECT rolname FROM pg_roles;postgres是系统初始化时默认创建的角色&#xff0c;为超级管理员。 \duList of rolesRole name | Attributes | Member of ------------------------------------------------------…
阅读更多...
python 之计算矩阵乘法

python 之计算矩阵乘法

文章目录 总的介绍例子 总的介绍 np.matmul 是NumPy库中的矩阵乘法函数&#xff0c;用于执行矩阵乘法操作。矩阵乘法是线性代数中的一种常见操作&#xff0c;用于将两个矩阵相乘以生成新的矩阵。在神经网络、机器学习和科学计算中&#xff0c;矩阵乘法经常用于变换和组合数据。…
阅读更多...
简单宿舍管理系统（springboot+vue）

简单宿舍管理系统（springboot+vue）

简单宿舍管理系统&#xff08;springbootvue&#xff09; 1.创建项目1.前端2.数据库3.后端 2.登陆1.前端1.准备工作2.登陆组件3.配置 2.后端1.链接数据库2.创建用户实体类3.数据操作持久层1.配置2.内容3.测试 4.中间业务层1.异常2.业务实现3.测试 5.响应前端控制层 3.前后对接4…
阅读更多...
散列表：Word文档中的单词拼写检查功能是如何实现的？

散列表：Word文档中的单词拼写检查功能是如何实现的？

文章来源于极客时间前google工程师−王争专栏。 一旦我们在Word里输入一个错误的英文单词&#xff0c;它就会用标红的方式提示“编写错误”。Word的这个单词拼写检查功能&#xff0c;虽然很小但却非常实用。这个功能是如何实现的&#xff1f; 散列别&#xff08;Hash Table&am…
阅读更多...
linux复习笔记02（小滴课堂）

linux复习笔记02（小滴课堂）

linux下输入输出错误重定向&#xff1a; 输入重定向&#xff1a;< 一个大于号是进行了覆盖。 两个大于号是追加。 输出重定向可以用于以后日志打印。 错误重定向&#xff1a; 错误重定向是不把信息打印到屏幕上而是打印到指定文件中去&#xff1a; 输出重定向其实是用的1…
阅读更多...
【论文阅读】(2023TPAMI)PCRLv2

【论文阅读】(2023TPAMI)PCRLv2

目录 AbstractMethodMethodnsU-Net中的特征金字塔多尺度像素恢复多尺度特征比较从多剪切到下剪切训练目标 总结 Abstract 现有方法及其缺点&#xff1a;最近的SSL方法大多是对比学习方法&#xff0c;它的目标是通过比较不同图像视图来保留潜在表示中的不变合判别语义&#xff…
阅读更多...
可视化数学分析软件 MATLAB R2021b mac中文版软件介绍

可视化数学分析软件 MATLAB R2021b mac中文版软件介绍

MATLAB R2021b mac作为数学类科技应用软件中首屈一指的商业数学软件&#xff0c;可以帮助您进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等,主要应用于工程计算、控制设计、信号处理与通讯、图像处理、信号检测、金融建模设计与分析等领域。…
阅读更多...
算法刷题-链表

算法刷题-链表

算法刷题-链表 203. 移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023