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

news/2024/7/16 9:03:06 标签: webstorm, ide, 前端

『干货』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.niftyadmin.cn/n/5112531.html

相关文章

Ubuntu源码编译samba

Ubuntu源码编译samba

概述 本人最近研究samba的源码&#xff0c;但是在源码编译的时候&#xff0c;本以为直接config,make,make install。没想到编译过程中碰到很多麻烦&#xff0c;主要是各种依赖问题。 基于此&#xff0c;本文把samba编译的详细过程记录下来&#xff0c;以供再次研究借鉴。 软件…
阅读更多...
python 之计算矩阵乘法

python 之计算矩阵乘法

文章目录 总的介绍例子 总的介绍 np.matmul 是NumPy库中的矩阵乘法函数&#xff0c;用于执行矩阵乘法操作。矩阵乘法是线性代数中的一种常见操作&#xff0c;用于将两个矩阵相乘以生成新的矩阵。在神经网络、机器学习和科学计算中&#xff0c;矩阵乘法经常用于变换和组合数据。…
阅读更多...
2023年合肥市青少年信息学科普日活动（初中组）

2023年合肥市青少年信息学科普日活动（初中组）

2023年合肥市青少年信息学科普日活动（初中组）第1题 计“6”器 【题目描述】 小C十分喜欢数字“6”。 一天，大数据专家小 L 给了小 C一个整数。小 C 一眼望去发现这个整数出现了很多 “6”，于是想统计整数中出现了多少次“6”。这个数字可能很大，详情请认真阅读【数据范围】…
阅读更多...
【论文阅读】(2023TPAMI)PCRLv2

【论文阅读】(2023TPAMI)PCRLv2

目录 AbstractMethodMethodnsU-Net中的特征金字塔多尺度像素恢复多尺度特征比较从多剪切到下剪切训练目标 总结 Abstract 现有方法及其缺点&#xff1a;最近的SSL方法大多是对比学习方法&#xff0c;它的目标是通过比较不同图像视图来保留潜在表示中的不变合判别语义&#xff…
阅读更多...
SpringBoot +JdbcTemplate+VUE 实现在线输入SQL语句返回数据库结果

SpringBoot +JdbcTemplate+VUE 实现在线输入SQL语句返回数据库结果

文章目录 前言框架选型SpringBoot 结合JdbcTemplate简单示例SpringBoot 结合JdbcTemplate实现运行SQL处理思路后端处理前端处理 前言 想起来要做这个功能是因为我们公司的预生产环境和生产环境如果想要连接数据库都需要登录堡垒机&#xff0c;然后再通过堡垒机进行跳转到对应定…
阅读更多...
100106. 元素和最小的山形三元组 I

100106. 元素和最小的山形三元组 I

给你一个下标从 0 开始的整数数组 nums 。 如果下标三元组 (i, j, k) 满足下述全部条件&#xff0c;则认为它是一个 山形三元组 &#xff1a; i < j < k nums[i] < nums[j] 且 nums[k] < nums[j] 请你找出 nums 中 元素和最小 的山形三元组&#xff0c;并返回其 …
阅读更多...
Linux 中监控磁盘分区使用情况的 10 个工具

Linux 中监控磁盘分区使用情况的 10 个工具

在本文[1]中&#xff0c;我们将回顾一些可用于检查 Linux 中磁盘分区的 Linux 命令行实用程序。 监控存储设备的空间使用情况是系统管理员最重要的任务之一&#xff0c;它可以确保存储设备上有足够的可用空间&#xff0c;以维持 Linux 系统的高效运行。 1. fdisk fdisk 是一个强…
阅读更多...
【BP-Adaboost预测】基于BP神经网络的Adaboost的单维时间序列预测研究（Matlab代码实现）

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

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
最新文章

Copyright @ 2022~2023