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}

项目描述:



代办清单:



人员名单:

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阅读笔记(BMSB 2018)Video Stitching Based on Optical Flow

参考文献 Xie C, Zhang X, Yang H, et al. Video Stitching Based on Optical Flow[C]//2018 IEEE International Symposium on Broadband Multimedia Systems and Broadcasting (BMSB). IEEE, 2018: 1-5. 摘要 视频拼接在计算机视觉中仍然是一个具有挑战性的问题&#xff0…

软件工程师,为什么不喜欢关电脑

概述 你是否注意到&#xff0c;软件工程师们似乎从不关电脑&#xff0c;也不喜欢关电脑&#xff1f;别以为他们是电脑“上瘾”&#xff0c;或是沉迷于电脑&#xff0c;这一现象背后蕴含着多种实际原因。 1、代码保存与恢复。 在编写代码过程中&#xff0c;遇到问题时可能会暂时…

【打工日常】使用docker部署Dashdot工具箱

一、Dashdot介绍 dashdot是一个简洁清晰的服务器数据仪表板&#xff0c;基于React实现 &#xff0c;主要是显示操作系统、进程、存储、内存、网络这五个的数据。 二、本次实践介绍 1. 本次实践简介 本次实践部署环境为个人测试环境 2. 本地环境规划 本次实践环境规划&#xf…

【leetcode】深搜、暴搜、回溯、剪枝(C++)3

深搜、暴搜、回溯、剪枝&#xff08;C&#xff09;3 一、解数独1、题目描述2、代码3、解析 二、单词搜索1、题目描述2、代码3、解析 三、黄金矿工1、题目描述2、代码3、解析 四、不同路径III1、题目描述2、代码3、解析 一、解数独 1、题目描述 leetcode链接 2、代码 class…

机器学习西瓜书之决策树

目录 算法原理剪枝处理连续值处理缺失值处理多变量决策树 算法原理 从逻辑角度&#xff1a;通过一系列if-else语句进行多重判断&#xff0c;比如白富美的判断条件&#xff08;“白”“富”“美”&#xff09;。 从几何角度&#xff1a;根据定义的标准进行样本空间的划分。 以二…

如何在CSS中实现背景图片的渐变?

--引言 在CSS中&#xff0c;实现背景图片的渐变通常需要使用linear-gradient或者radial-gradient函数&#xff0c;这些函数可以与背景图像一起使用来创建渐变效果。然而&#xff0c;CSS的渐变并不直接支持使用图像作为渐变的颜色停止点。但你可以通过一些技巧来实现类似的效果…

每日一题 429.N叉树的层序遍历

429. N 叉树的层序遍历 描述&#xff1a; 给定一个 N 叉树&#xff0c;返回其节点值的层序遍历。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。 树的序列化输入是用层序遍历&#xff0c;每组子节点都由 null 值分隔&#xff08;参见示例&#xff09;。 示例 1…

谷歌新动作:双子模型大放送,开发者福音来了!

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

SQL29 计算用户的平均次日留存率(lead函数的用法)

代码 with t1 as(select distinct device_id,date --去重防止单日多次答题的情况from question_practice_detail ) select avg(if(datediff(date2,date1)1,1,0)) as avg_ret from (selectdistinct device_id,date as date1,lead(date) over(partition by device_id order by d…

神经网络学习小记录78——Keras CA(Coordinate attention)注意力机制的解析与代码详解

神经网络学习小记录78——Keras CA&#xff08;Coordinate attention&#xff09;注意力机制的解析与代码详解 学习前言代码下载CA注意力机制的概念与实现注意力机制的应用 学习前言 CA注意力机制是最近提出的一种注意力机制&#xff0c;全面关注特征层的空间信息和通道信息。…

走近 Next.js:全栈框架的简介与应用

微信搜索“好朋友乐平”关注公众号。 1. Next.js Next.js 是一个使用 React 构建单页应用程序&#xff08;SPA&#xff09;的开源 JavaScript 框架。它使得构建服务端渲染&#xff08;SSR&#xff09;和静态网站生成&#xff08;SSG&#xff09;的 React 应用程序变得简单和高…

安全基础~通用漏洞5

文章目录 知识补充CSRFSSRFxss与csrf结合创建管理员账号 知识补充 NAT&#xff1a;网络地址转换&#xff0c;可以将IP数据报文头中的IP地址转换为另一个IP地址&#xff0c;并通过转换端口号达到地址重用的目的。即通过将一个外部IP地址和端口映射更大的内部IP地址集来转换IP地…

人工智能学习与实训笔记(七):神经网络之模型压缩与知识蒸馏

人工智能专栏文章汇总&#xff1a;人工智能学习专栏文章汇总-CSDN博客 本篇目录 七、模型压缩与知识蒸馏 7.1 模型压缩 7.2 知识蒸馏 7.2.1 知识蒸馏的原理 7.2.2 知识蒸馏的种类 7.2.3 知识蒸馏的作用 七、模型压缩与知识蒸馏 出于对响应速度&#xff0c;存储大小和能…

鸿蒙应用开发工程师招聘多吗?工资有多少呢?

随着鸿蒙操作系统的快速普及&#xff0c;越来越多的企业开始重视鸿蒙应用开发人才的培养和引进。那么&#xff0c;目前市场上鸿蒙应用开发工程师招聘多吗&#xff1f;工资有多少呢&#xff1f; 首先&#xff0c;我们来了解一下鸿蒙应用开发工程师的招聘情况。随着鸿蒙操作系统…

IEEE Internet of Things Journal投稿经验

期刊名&#xff1a;IEEE Internet of Things Journal 期刊分区&#xff1a;中科院一区 Top 影响因子&#xff1a;10.6 投稿状态 &#xff08;1&#xff09;2023.11.3&#xff0c;投稿成功&#xff0c;状态为&#xff1a;under review&#xff08;大u大r&#xff09;&#xff1…

无心剑小诗《爱的迷宫》

爱的迷宫 在心海深处悄然铺陈 情感线索纷乱中交织缠绵 一道道的拐角&#xff0c;星云的光辉 指引渴望的心追寻那深邃的真理 曲折通道&#xff0c;每次心跳 爱的重奏在无边探寻里 每一寸肌肤与每一根神经 都铭记你的气息&#xff0c;你的轮廓 迷宫的幻影&#xff0c;无尽的梦…

掌上新闻随心播控,HarmonyOS SDK助力新浪新闻打造精致易用的资讯服务新体验

原生智能是HarmonyOS NEXT的核心亮点之一&#xff0c;依托HarmonyOS SDK丰富全面的开放能力&#xff0c;开发者只需通过几行代码&#xff0c;即可快速实现AI功能。新浪新闻作为鸿蒙原生应用开发的先行者之一&#xff0c;从有声资讯入手&#xff0c;将基于Speech Kit朗读控件上线…

什么软件可以监控电脑屏幕?

随着信息技术的飞速发展&#xff0c;电脑已成为企业日常运营不可或缺的工具。然而&#xff0c;这也带来了一系列的管理挑战&#xff0c;如何确保员工高效工作、避免信息泄露、监控不当行为等成为了企业迫切需要解决的问题。在这种背景下&#xff0c;电脑屏幕监控软件应运而生&a…

基于Springboot+Vue实现的宿舍管理系统

基于SpringbootVue的宿舍管理系统 1.系统相关性介绍1.1 系统架构1.2 设计思路 2.功能模块介绍2.1 用户信息模块2.2 宿舍管理模块2.3 信息管理模块 3. 源码获取以及远程部署 前言&#xff1a; 在现代教育环境中&#xff0c;学生宿舍的管理显得尤为重要&#xff0c;需要一套能…