『干货』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日

推荐博文🍗

# webstorm # ide # 前端
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

新华网：开源盛会在江城——2024开放原子开发者大会侧记

开源盛会在江城——2024开放原子开发者大会侧记

avatar 开放原子开发者工作坊

新华社：释放开源潜能，加快构筑软件创新“朋友圈”

释放开源潜能，加快构筑软件创新“朋友圈”

avatar 开放原子开发者工作坊

开源鸿蒙：引领万物智联，加速生态崛起

开源鸿蒙：引领万物智联，加速生态崛起

avatar 开放原子开发者工作坊