当前位置： 首页 > news >正文

WebStorm | 如何修改webstorm中新建html文件默认生成模板中title的初始值

news 2026/2/9 12:52:27

在近期的JS的学习中，使用webstorm，总是要先新建一个html文件，然后再到里面书写<script>标签，真是麻烦，而且标题也是默认的title，想改成文件名还总是需要手动去改

经过小小的研究，找到了修改生成模板的方法

1.设置

2.文件 | 设置 | 编辑器 | 文件和代码模板

3.快速进入

这里可以看到HTML的模板了，默认模板代码如下（不用复保存的，一会儿教你一键还原）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>#[[$Title$]]#</title>
</head>
<body>
#[[$END$]]#
</body>
</html>

 首先先改title默认文件名，以下是jetbrain官方给的参考参数

预定义变量列表


${DATE}        当前系统日期
${DAY}        当前月份的日期
${DAY_NAME_SHORT}        当前日期名称的前 3 个字母（例如，Mon、Tue 等）
${DAY_NAME_FULL}        当前日期的全名（Monday、Tuesday 等）
${DIR_PATH}        新文件的目录路径（相对于项目根目录）
${DS}        美元符号 （$）。 此变量用于转义美元字符，因此不会将其视为模板变量的前缀。
${FILE_NAME}        新文件名称
${HOUR}        当前小时
${MINUTE}        当前分钟
${SECOND}        当前秒
${MONTH}        当前月份
${MONTH_NAME_SHORT}        当前月份名称的前 3 个字母（Jan、Feb 等）。
${MONTH_NAME_FULL}        当前月份的全名（January、February 等）。
${NAME}        新实体的名称（文件、类型、接口等）
${ORGANIZATION_NAME}        在项目设置中指定的组织名称
${PRODUCT_NAME}        IDE 名称
${PROJECT_NAME}        当前项目名称
${TIME}        当前系统时间
${USER}        当前用户的系统登录名
${YEAR}        当前年度

根据参考，我们选择${FILE_NAME}即可，写进模板里如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>${FILE_NAME}</title>
</head>
<body>
#[[$END$]]#
</body>
</html>

在修改了模板文件后，重新进此页，会出现下图的两个选项

重置（蓝色）：一键还原当前的模板，且只在编辑时才会出现，而且点击后此页的所有模板选项会全部清空，再次重进此页会重新看到默认的模板文件，所以不推荐点击

还原图标：还原单个模板文件，出现重置确认弹窗后同意即可

然后再加上想修改的其余部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>${FILE_NAME}</title><style>body {background-color: black;}</style><script>#[[$END$]]#</script>
</head>
<body></body>
</html>

再次新建一个用于测试模板的文件，会发现IDE会帮我们自动生成好可以直接写JS学习代码的HTML文件了，里面有css的用于护眼的代码，还有准备好的scrip标签，游标也自动停在了scrip标签后面，直接回车就能开写，非常贴心

 

然后格式不对直接一个ctrl+alt+L组合键一键整理就完事了，非常方便我这种懒人

还可以自定义自己喜欢的模板，例如

${FILE_NAME}
${PROJECT_NAME}
${PRODUCT_NAME}
${DATE}项目描述：代办清单：人员名单：

点击应用后，回到项目中，直接通过模板可以快速建立一个项目文档

哦，懒癌福音，可以轻轻松松的写好项目任务清单，真是太棒了

相关文章：

WebStorm | 如何修改webstorm中新建html文件默认生成模板中title的初始值

在近期的JS的学习中&#xff0c;使用webstorm&#xff0c;总是要先新建一个html文件&#xff0c;然后再到里面书写<script>标签&#xff0c;真是麻烦&#xff0c;而且标题也是默认的title&#xff0c;想改成文件名还总是需要手动去改 经过小小的研究&#xff0c;找到了修…...

编程日记 2024/2/21 22:40:26

大厂的数据质量中心系统设计

日常工作中&#xff0c;数据开发上线完一个任务后并不是就可以高枕无忧&#xff0c;时常因上游链路数据异常或者自身处理逻辑的 BUG 导致产出的数据结果不可信。而问题发现可经历较长周期&#xff08;尤其离线场景&#xff09;&#xff0c;往往是业务方通过上层数据报表发现数据…...

编程日记 2024/2/21 22:39:25

docker （一）-简介

1.什么是docker Docker 是一个开源的应用容器引擎&#xff0c;由于docker影响巨大&#xff0c;今天也用"Docker" 指代容器化技术。 2.docker的优势 一键部署&#xff0c;开箱即用 容器使用基于image镜像的部署模式&#xff0c;image中包含了运行应用程序所需的一…...

编程日记 2024/2/21 22:35:21

全国乙卷高考理科数学近年真题的选择题练一练和解析

虽然很多中小学才陆陆续续开学&#xff0c;但是高三的学子们一定是过年的时候也在抓紧备考&#xff0c;毕竟&#xff0c;距离2024年高考只剩下不到四个月了。 如何在最后四个月的时间提高成绩&#xff1f;以高考真题为抓手是一个不错的方法&#xff0c;因为真题都是严格遵循考试…...

编程日记 2024/2/21 22:34:20

uniapp运动课程健身打卡系统微信小程序

考虑到实际生活中在我来运动管理方面的需要以及对该系统认真的分析,将系统分为小程序端模块和后台管理员模块&#xff0c;权限按管理员和用户这两类涉及用户划分。 (a) 管理员&#xff1b;管理员使用本系统涉到的功能主要有&#xff1a;首页、个人中心、用户管理、课程类别管理…...

编程日记 2024/2/21 22:33:19

IP详细地理位置查询：技术原理与应用实践

IP地址是互联网上设备的唯一标识&#xff0c;在网络安全、个性化服务等领域具有重要意义。通过IP详细地理位置查询&#xff0c;可以获取到IP地址所在地的具体信息&#xff0c;为网络管理、定位服务等提供支持。IP数据云将深入探讨IP详细地理位置查询的技术原理、应用实践以及相…...

编程日记 2024/2/21 22:31:17

SpringBoot2整合支付宝进行沙箱支付

目录 1. 进入支付宝的开放平台 2. 导入Maven依赖 3. 配置application.yml文件 NATAPP.cn(内网穿透工具) 注册登录 下载 4. 后端配置 5. 测试 1. 进入支付宝的开放平台 开发平台: 支付宝开放平台 登录后,点击控制台 点击最下面的沙箱 2. 导入Maven依赖 <dependency…...

编程日记 2024/2/21 22:27:14

世界顶级名校计算机专业，都在用哪些书当教材？

清华、北大、MIT、CMU、斯坦福的学霸们在新学期里要学什么&#xff1f;今天我们来盘点一下那些世界名校计算机专业采用的教材。 欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &…...

编程日记 2024/2/21 22:21:08

Linux内核解读

来自鹅厂架构师 作者&#xff1a;aurelianliu 工作过程中遇到的调度、内存、文件、网络等可以参考。 1.os运行态 X86架构&#xff0c;用户态运行在ring3&#xff0c;内核态运行在ring0&#xff0c;两个特权等级。 &#xff08;1&#xff09;内核、一些特权指令&#xff0c;例…...

编程日记 2024/2/21 22:20:08

在VS里使用C#制作窗口应用

新建项目 创建项目的时候搜索net&#xff0c;选择这个。 打开应该是这样 第一个控件 选择公共控件 - PictureBox - 拖入Form 在Image处选择上传本地资源&#xff0c;建议上传一个小一点的图片。 修改一下尺寸。 ctrls 保存 从“属性”切换到“事件” 双击Click事件…...

编程日记 2024/2/21 22:18:06

Nginx的流式响应配置

Nginx的流式响应配置 使用ChatGPT的能力在聊天时来实现打字机效果&#xff0c;因此需要服务端接口进行流式响应&#xff0c;碰到了几个问题&#xff1a; 1、服务端明明配置了响应头的Content-Type为&#xff1a;text/event-stream&#xff0c;但前端仍然不是流式接收内容。 2、…...

编程日记 2024/2/21 22:13:02

Excel练习：双层图表

Excel练习&#xff1a;双层图表 学习视频Excel制作双层图表&#xff0c;很多人都不会&#xff0c;其实只需1步操作就够了&#xff01;_哔哩哔哩_bilibili ​​ 通过调整两个图形的显示范围实现 增加折现图的负数显示范围&#xff0c;使折现图仅出现在整体图形的上方增加柱形…...

编程日记 2024/2/21 22:11:00

2024展望龙年，索蝶音乐成立

近日,北京索蝶文化传媒有限公司在北京成立,引起了业内众多公司的关注。作为翰扬影视的兄弟公司,索蝶音乐致力于音乐、练习生两大市场的深耕及探索,立志三年内成为国内市场的主流厂牌。 公司负责人刘孝林先生表示,索蝶音乐以艺人经纪、艺人包装、音乐制作与发行、练习生选拔与培…...

编程日记 2024/2/21 22:09:59

什么是 Wake-on-LAN？如何使用 Splashtop 远程喊醒电脑

在当今数字互联的世界里&#xff0c;远程访问电脑已不仅仅是一种便利&#xff0c;而是许多人的需要。无论是远程工作、IT 支持&#xff0c;还是管理整个网络中的计算机群&#xff0c;我们都必须掌握正确的工具和技术。 其中一项在远程访问中发挥关键作用的技术是 Wake-on-LAN …...

编程日记 2024/2/21 22:08:58

正则表达式的一些高级用法

不允许出现某个单词&#xff0c;使用?! (?!Pattern).\.matches 表示.matches之前的不能是Pattern非贪婪匹配&#xff0c;在匹配项后加? matches\((.*?)\) 这里在.*后加问号&#xff0c;表示尽可能少的匹配。\w表示字母、数字和下划线防范redos攻击&#xff0c;可使用Cyber-…...

编程日记 2024/2/21 22:05:55

第3.1章：StarRocks数据导入——Insert into 同步模式

一、概述 在StarRocks中&#xff0c;insert的语法和mysql等数据库的语法类似&#xff0c;并且每次insert into操作都是一次完整的导入事务。 主要的 insertInto 命令包含以下两种&#xff1a; insert into tbl select ...insert into tbl (col1, col2, ...) values (1, 2, ...…...

编程日记 2024/2/21 22:04:55

Docker基本使用【数据卷的挂载及常用命令】

镜像和容器&#xff1a;当我们利用docker安装应用时&#xff0c;Docker会自动搜索并下载应用的镜像&#xff08;image&#xff09;&#xff0c;镜像不仅包含应用本身还包含应用所需要的环境、配置、系统函数库。Docker会在运行镜像时创建一个隔离的环境&#xff0c;称为容器&am…...

编程日记 2024/2/21 22:02:53

5G DTU实现燃气管道数据采集远程管理

随着物联网技术与智慧城市的不断发展&#xff0c;燃气管道户外组网的需求逐渐浮现。在户外组网应用中5G DTU&#xff08;Data Terminal Unit&#xff09;发挥着至关重要的作用。5G DTU可用于数据采集、传输与远程管理&#xff0c;能够实现燃气数据的单点或多点采集和传输&#…...

编程日记 2024/2/21 22:00:51

请解释Java中的代理模式，分别介绍静态代理和动态代理

请解释Java中的代理模式&#xff0c;分别介绍静态代理和动态代理 代理模式是一种常见的设计模式&#xff0c;它允许一个对象&#xff08;代理对象&#xff09;代表另一个对象&#xff08;被代理对象&#xff09;进行访问控制&#xff0c;以控制对对象的访问。代理模式可以在不…...

编程日记 2024/2/21 21:59:50

Python 文件处理指南：打开、读取、写入、追加、创建和删除文件

文件处理是任何Web应用程序的重要部分。Python有多个用于创建、读取、更新和删除文件的函数。 文件处理 在Python中处理文件的关键函数是open()函数。open()函数接受两个参数&#xff1a;文件名和模式。 有四种不同的方法&#xff08;模式&#xff09;可以打开文件&#xff1…...

编程日记 2024/2/21 21:58:49

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05