行业知识
『干货』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 函数声明式
- 五、前端Taro框架
- 5.1 React + Taro>=3 语法
- 5.1.1 类声明式
- 5.1.2 函数声明式
- 5.2 Vue3 + Taro>=3 语法
- 5.2.1 选项式API
- 5.2.2 组合式API
- 5.2.3 组合式API + TS
- 六、单文件 HTML 模板
- 七、常见问题
- 7.1 关于头部注释
- 7.1 格式化执行
- 7.3 关于此文章
- 推荐博文
一、代码模板
**代码模板指的是一个预定义的代码结构，用于快速创建特定类型代码的起点，是一个基本框架或蓝图，包含了常见的代码结构、语法和关键元素，可以根据需要进行自定义和扩展。**在VsCode编辑器上更多是通过快速生成指令来实现，当然也有创建文件时自动添加代码模板的插件。对于Jetbrains家族来讲，软件本身支持在创建文件的时候自动添加预制代码，且内置了大多数不同类型文件的代码模板。
本文章主要是基于Jetbrains家族中的WebStorm这个IDE，更好的利用其代码模板功能进行扩展，方便且提高编写代码的效率，如需设置代码模板，在设置选项此处中配置。若你使用的 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 项目。
/* * 组件名: ${NAME} * 组件用途: XXX * 创建日期: ${DATE} * 编写者: XianZhe */export default { name: "${NAME}", components: { }, data() { return {}; }, // 计算属性 computed: { }, mounted() { }} #[[$END$]]# #${NAME} {}2.2 组合式API
适用于 Vue3 中使用 组合式 API 语法糖的项目。
/* * 组件名: ${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()}) #[[$END$]]# #${NAME} {}2.3 组合式API + TS
相对于组合式API的基础上添加了TS语法，RefComponent用于定于组件实例类型，可以考虑以全局类型的形式使用，而不用每个组件下都声明一次。
/* * 组件名: ${NAME} * 组件用途: XXX * 创建日期: ${DATE} * 编写者: XianZhe */import { computed, reactive, onMounted, type PropType, type ComponentPublicInstance} from "vue";type RefComponent = Record;const $refs: RefComponent = reactive({});const $props = defineProps({});const $state = reactive({});const $emits = defineEmits([]);async function exec() {}onMounted(() => {exec()}); #[[$END$]]# #${NAME} {}三、 前端 UniApp 框架
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
Uniapp 此部分和 Vue 相差不大，两者语法有所相同。3.1 选项式API
基于 Vue2 编写的 UniApp 项目仍然占据大多数，组件市场中大部分作者为了同时兼容 Vue2 和 Vue3 采用选项式 API，因此目前的使用频率比较高，此模板适合基于 Vue2 以及 Vue3 项目。
/* * 组件名: ${NAME} * 组件用途: XXX * 创建日期: ${DATE} * 编写者: XianZhe */export default { name: "${NAME}", components: { }, props: {}, emits: {}, data() { return {}; }, // 计算属性 computed: { }, mounted() { }, onLoad(query) {}, onShow() {}} #[[$END$]]# .${NAME} {}3.2 组合式API
/* * 组件名: ${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(() => {}); #[[$END$]]# .${NAME} {}3.3 组合式API + 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;const $refs: RefComponent = reactive({});const $props = defineProps({});const $state = reactive({});const $emits = defineEmits([]);async function exec() {}onMounted(() => {exec()});onShow(() => {});onLoad(() => {}); #[[$END$]]# .${NAME} {}四、前端 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 ( );};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() ( )}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 ( );};// Taro2.x写法，3.x为单独一个page.config.js文件或则definePageConfig宏函数// ${NAME}.config = {// // 导航栏标题// navigationBarTitleText: ${NAME}// };export default ${NAME};5.2 Vue3 + Taro>=3 语法
5.2.1 选项式API
/* * 组件名: ${NAME} * 组件用途: XXX * 创建日期: ${DATE} * 编写者: XianZhe */export default { name: "${NAME}", components: { }, props: {}, emits: {}, data() { return {}; }, // 计算属性 computed: { }, mounted() { }, onLoad(query) {}, onShow() {}} #[[$END$]]# .${NAME} {}5.2.2 组合式API
/* * 组件名: ${NAME} * 组件用途: XXX * 创建日期: ${DATE} * 编写者: XianZhe */export default { name: "${NAME}", components: { }, props: {}, emits: {}, data() { return {}; }, // 计算属性 computed: { }, mounted() { }, onLoad(query) {}, onShow() {}} #[[$END$]]# .${NAME} {}5.2.3 组合式API + 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(() => {}); #[[$END$]]# .${NAME} {}六、单文件 HTML 模板
创建一个HTML文件，使用的场景不会太多，基于传统老式JQuery开发的多页面应用可能会用的比较多，对于我而言，可能是为了测试样式或则脚本的一个特性而创建一个测试页。可有的选择也有快速创建初始代码块指令这一方法，具体可以移步：。
对于大多数人来讲，WebStorm 自带的HTML模板就可以解决大多数问题，当然为扩展内容，可以尝试替换下面的模板。#[[$Title$]]# #${NAME} {}该页面需要在支持Javascript的浏览器上运行
#[[$END$]]#七、常见问题
7.1 关于头部注释
在模板中增加头部注释的初衷是为了使每个代码文件的作用更加清晰，并带上一些基本信息利于溯源，但每个人的喜好、项目规范都是不一样的，难免出现满足不了大多数人的情况，需要无注释版的请自行去除相关注释代码即可，本文不再提供无头部注释版代码。
7.1 格式化执行
值得注意的是，如果对代码样式有一定的自定义程度，基于模板创建的代码可能会产生奇怪的样式。
解决的办法有两种：- 第一种是直接在模板中关闭“按照样式重新格式化”这个选项，但大部分人都希望模板能够随着自己的样式规范走，所以说这并不是最好的方法。
- 第二种是修改自定义样式的规则，直至模板在格式化之后能够符合自己的样式，这是最好的方法，但也是最耗时的，根据自己的需求安排即可。
像图5-1中的问题，可以通过勾选此配置解决。
7.3 关于此文章
前端更新迭代速度快，各类框架和新语法层出不穷，本文也会同步主流框架的语法与版本更新内容，一些有意思的框架和前端包也会考虑更新在此。
本文最新更新日期：2024年3月25日推荐博文
- 《『速查手册』HTML 语义化标签 | 语义化标签必要性？》
- 《前端快速生成初始代码块》
上一篇：服务器上怎么装ftp?
下一篇：腾讯 深圳服务器在哪里？
最新文章
- Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
- Ubuntu系统更新全攻略，软件升级与补丁安装轻松搞定！
- Pygame教程07：键盘常量+键盘事件的2种捕捉方式
- 长虹电视软件下载指南
- SYSTM下载指南，轻松一键获取，快速安装体验！
- 揭秘手机游戏网站源码，打造个性化游戏平台秘籍！
- FlashFXP二进制设置教程，零基础操作指南，轻松上手！
- 华为云主机，引领云端时代，安全稳定助力企业腾飞发展
- web前端之解析xlsx文件、Excel表格转为JSON数据、script标签的type属性、使用webApi选择文件、单元格的地址索引、获取对象的长度、获取属性的数量、限制文件类型、动态添加类名
- 服务器怎么做资源区?
图文
- Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
- Ubuntu系统更新全攻略，软件升级与补丁安装轻松搞定！
- Pygame教程07：键盘常量+键盘事件的2种捕捉方式
- 长虹电视软件下载指南
- SYSTM下载指南，轻松一键获取，快速安装体验！
- 揭秘手机游戏网站源码，打造个性化游戏平台秘籍！
- FlashFXP二进制设置教程，零基础操作指南，轻松上手！
- 华为云主机，引领云端时代，安全稳定助力企业腾飞发展
- web前端之解析xlsx文件、Excel表格转为JSON数据、script标签的type属性、使用webApi选择文件、单元格的地址索引、获取对象的长度、获取属性的数量、限制文件类型、动态添加类名
- 服务器怎么做资源区?