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

本文主要是介绍WebStorm | 如何修改webstorm中新建html文件默认生成模板中title的初始值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在近期的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的初始值的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/716927

相关文章

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.