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

已于 2024-03-25 16:18:04 修改
阅读量1.1k 收藏 5
点赞数 4
文章标签： webstorm ide 前端
于 2023-10-22 19:05:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XianZhe_/article/details/133976458
版权

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

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

文章目录

一、代码模板🤠

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

若你使用的 VsCode 此类编辑器，请查阅 VsCode snippets（代码片段）功能相关文档，或使用与之相关的 snippets 插件。

二、前端 vue 框架🎍

Vue.js（简称Vue）是一个用于创建用户界面的开源 MVVM 渐进式前端 JavaScript 框架，也是一个创建单页应用（SPA）的Web应用框架。Vue.js 由尤雨溪创建，由他和其他活跃的核心团队成员维护。
2016年一项针对JavaScript框架的调查表明，Vue有着89%的开发者满意度。在 GitHub 上，该项目平均每天能收获95颗星，为GitHub有史以来星标数第3多的项目。

2.1 选项式API

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

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

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

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

</style>

2.2 组合式API

适用于 Vue3 中使用 <script setup> 组合式 API 语法糖的项目。

<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>

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

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

</style>

2.3 组合式API + TS

相对于组合式API的基础上添加了TS语法，RefComponent用于定于组件实例类型，可以考虑以全局类型的形式使用，而不用每个组件下都声明一次。

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

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

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

async function exec() {
}

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

</script>

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

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

</style>

三、 前端 UniApp 框架

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
Uniapp 此部分和 Vue 相差不大，两者语法有所相同。

3.1 选项式API

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

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

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

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

</style>

3.2 组合式API

<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>

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

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

</style>

3.3 组合式API + TS

<script setup lang="ts">
/*
 * 组件名: ${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>> | null>;

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

async function exec() {
}

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

onShow(() => {});

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

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

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

</style>

四、前端 React 框架👑

React（也称为React.js或ReactJS）是一个自由及开放源代码的前端JavaScript工具库，用于基于UI组件构建前端界面。
它由Meta（前身为Facebook）和由个人开发者和公司组成的社群维护。React可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应用程序的基础。然而，React只专注状态管理和将状态渲染到DOM，因此创建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};

4.2 函数声明式

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

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

  useEffect(exec, [])

  function exec() {
  }

  return (
    <View className="${NAME}">

    </View>
  );
};

export default ${NAME};

五、前端Taro框架

Taro 是一个开放式跨端跨框架解决方案，支持使用 React、Vue、Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

5.1 React + Taro>=3 语法🌊

5.1.1 类声明式
// Taro2.x
// import Taro, { Component } from '@tarojs/taro'
import React, { Component } from "react";
import { View, Text } from "@tarojs/components";

/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
class ${NAME} extends Component {
  componentDidMount() {}
  
  componentWillUnmount() {}

  // Taro3.x onLoad
  onLoad() {}

  render() (
    <View className="${NAME}">
    
    </View>
  )
}

export default ${NAME};
5.1.2 函数声明式
// Taro2.x
// import Taro, { useState, useEffect, useMemo, useCallback, useRouter } from "@tarojs/taro";
import React, { useState, useEffect, useMemo, useCallback } from "react";
import Taro, { useRouter, useLoad } from "@tarojs/taro";
import { View, Text } from "@tarojs/components" 

// import "./scss/index"

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

  useEffect(exec, [])

  // Taro3.x  
  useLoad((query) => {
  })

  function exec() {
  }

  return (
    <View className="${NAME}">

    </View>
  );
};

// Taro2.x写法，3.x为单独一个page.config.js文件或则definePageConfig宏函数
// ${NAME}.config = {
//   // 导航栏标题
//   navigationBarTitleText: ${NAME}
// };

export default ${NAME};

5.2 Vue3 + Taro>=3 语法🥗

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

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

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

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

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

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

</style>
5.2.3 组合式API + TS
<script setup lang="ts">
/*
 * 组件名: ${NAME}
 * 组件用途: XXX
 * 创建日期: ${DATE}
 * 编写者: XianZhe
 */
import { useLoad, useDidShow } from "@tarojs/taro";
import {
    computed,
    reactive,
    onMounted
} from "vue";

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

async function exec() {
}

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

useDidShow(() => {});

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

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

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

</style>

六、单文件 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>

七、常见问题🔨

7.1 关于头部注释

在模板中增加头部注释的初衷是为了使每个代码文件的作用更加清晰，并带上一些基本信息利于溯源，但每个人的喜好、项目规范都是不一样的，难免出现满足不了大多数人的情况，需要无注释版的请自行去除相关注释代码即可，本文不再提供无头部注释版代码。

7.1 格式化执行

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

  • 第一种是直接在模板中关闭“按照样式重新格式化”这个选项，但大部分人都希望模板能够随着自己的样式规范走，所以说这并不是最好的方法。image.png
  • 第二种是修改自定义样式的规则，直至模板在格式化之后能够符合自己的样式，这是最好的方法，但也是最耗时的，根据自己的需求安排即可。

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

7.3 关于此文章

前端更新迭代速度快，各类框架和新语法层出不穷，本文也会同步主流框架的语法与版本更新内容，一些有意思的框架和前端包也会考虑更新在此。
本文最新更新日期：2024年3月25日

推荐博文🍗

XianZhe_
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebStorm配置Vue代码模板
黄彪博客
09-27 681
vue2 的模板return {return {return {
webstorm的live templates快速编辑功能,让你的css JS代码书写速度飞起来
weixin_30268071的博客
01-11 293
前言: Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码， 大大提高了HTML/CSS代码编写的速度，比如下面的演示： 但是对于我们来说这远远不够,我还想写css js呢,有些编辑器会提供一部分快捷功能,但是对于一些我自己常用的,编辑器没有的,我想自己定义,那怎么办呢, 下边...
2024年最全webstorm的安装及基本配置，2024最新物联网嵌入式开发高频精选面试题分享
最新发布
2401_85015025的博客
05-14 413
择“License server”,然后在输入框中输入 License server address 为：http://hb5.s.osidea.cc:1017（有可能不能用，自己可以百度搜一下最新的）点击”Activate”按钮。人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**各种配置 可以根据自己的需求自行配置。7、开始基本配置 主要在。
WebStorm设置代码模板
zhang1509123907的博客
02-17 3112
注：本人的是windows系统，2021.2版本。但是其实版本不同，操作也是大同小异。 第一步，打开setting设置 第二步：点击Editor，然后点击Live Templates，再点击右上方的加号 Live Template（代表创建具体的模板） Template Group（代表创建模板组） 选中模板组，点击Live Template创建具体的代码模板 Abbreviation（模板的缩写） Description（模板的描述） Template.
webstorm 生成/修改自定义头部注释
m0_52685922的博客
08-01 3365
webstorm 生成/修改自定义头部注释
webstorm 自定义代码模板
知之为知之，不知为不知
01-09 1050
1，添加代码片段 Live Template $变量名$ 为模板中定义的变量，可以在右侧的编辑变量中设置变量信息及Tab顺序
01-学习笔记（webstorm自定义模板代码）【新手上路，多多关照】
fwz123的博客
11-23 762
webstorm自定义模板代码
WebStorm中配置浏览器方法
热门推荐
fd214333890的专栏
09-19 6万+
之前把google chrome换了个文件夹之后就出现WebStorm不能通过kua
WebStorm_快捷键和代码模板
01-04
### 二、WebStorm代码模板 WebStorm允许用户自定义代码模板，可以快速生成常见的代码结构。例如： 1. **HTML模板** - 输入`div`然后按`Tab`键，会自动生成一个`<div>`标签，并自动关闭。 - 输入`doc`然后按`Tab`...
WebStorm代码颜色美化、语法清晰
11-13
调了很久的颜色，语法清晰，种类齐全。导入直接使用。使用方法： 1、打开文件 2、导入设置 3、重新启动。简单快捷
7_webstorm配置mongodb1
08-08
WebStorm配置MongoDB WebStorm是一款功能强大的集成开发环境（IDE），它支持多种编程语言，包括Java、Python、JavaScript、HTML、CSS等。MongoDB是一款NoSQL数据库，擅长处理大量数据，经常用于大数据分析和机器...
一款前端web模板
07-18
一款web前端模板
webstorm主题及详细配置文件
06-19
webstorm主题及详细配置文件，一键式导入即可使用，主题加配置
webstorm中配置nodejs环境及npm的实例
10-18
今天小编就为大家分享一篇webstorm中配置nodejs环境及npm的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
webstorm如何自定义代码模板
Camel
04-12 3158
1、在webstorm中，点击file菜单栏，进入settings设置选项 2、选中Editor中的live Templates（动态模板） 3、点开javascript，点击+添加按钮 4、填写模板 注释： （1）Abbreviation（缩写）：填写了can，即输入can按tap键，就会自动生成代码模板 （2）description：模板介绍 （3）Templates text：模板文字...
一些简单的webstorm的设置 模板
weixin_37448356的博客
10-16 2699
webstorm设置自定义注释/注解
糜家智の博客
04-18 2858
webStorm自定义注释、注解
Idea（WebStorm）自定义文件代码模板
justforuse的博客
01-28 2185
Idea支持新建文件时自定义文件内容模板。 参考链接： https://www.jetbrains.com/help/idea/creating-and-editing-file-templates.html 比如新建js文件自定义文件说明文档： 模板可以插入很多变量，上述链接有提到。 结果：
webstorm如何创建一个代码模板？以创建vue代码模板为例
涂涂
01-03 2968
1.打开setting  2.找到file and codeTemplate，点击加号 3.填写内容
webstorm代码模板怎样导出给别人用
08-09
要将WebStorm代码模板导出给别人使用，可以执行以下步骤： 1. 打开WebStorm并转到"File"（文件）菜单。 2. 选择"Manage IDE Settings"（管理IDE设置）下的"Export Settings..."（导出设置）选项。 3. 在打开的对话框中，选择要导出的模板相关的设置。在这种情况下，选择"Code Templates"（代码模板）选项。 4. 确定导出的文件路径和名称，并单击"OK"（确定）按钮。 5. WebStorm将在指定路径上创建一个压缩文件，其中包含所选设置的XML文件。 6. 将生成的压缩文件共享给别人，可以通过文件共享工具或电子邮件来传输。 当别人收到该压缩文件后，他们可以按照以下步骤导入WebStorm代码模板： 1. 打开WebStorm并转到"File"（文件）菜单。 2. 选择"Manage IDE Settings"（管理IDE设置）下的"Import Settings..."（导入设置）选项。 3. 在打开的对话框中，选择之前共享的压缩文件并单击"OK"（确定）按钮。 4. WebStorm将解压缩文件并自动应用所有导入的设置。 5. 在设置中，导入的代码模板将在适当的位置显示，并可以立即使用。 通过这些步骤，您可以轻松地将WebStorm代码模板导出给别人使用，并且其他人可以通过使用相同的步骤导入这些模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值