首页 > 其他分享 >修改VSCODE默认模板(live template)

修改VSCODE默认模板(live template)

时间:2024-02-26 15:44:58浏览次数:36  
标签:scale 1.0 修改 VSCODE width live meta template 模板

1.问题

在使用VSCDOE编写html文件时,对于使用的语言这一块,公司统一要求
但是VSCODE默认的是,这就需要我们每次都手改一下,非常麻烦,结合IDEA里面使用live template的经历
我就在思考能否修改VSCODE的相关配置文件达到同样的效果呢?

首先我找到了这个参考:如何修改vscode模板
这里要求我找到expand-full.js文件,事实上我并没有找到,所以再继续翻阅资料后,我找到了以下解决方案:

2.解决

参考链接:[VS Code修改html默认模板代码(Win10)](VScode新建html文件后,使用'!+tab'会自动生成一个html模板

但是由于默认模板不满足我们的要求,所以每次都要修改lang和mate:vp,十分麻烦

通过修改文件内容可以实现修改每次默认生成的html代码段

方法如下:

目前网上大多数教程都是通过以下目录

{VScode安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js

找到expand-full.js文件

进而进行修改

然而,在本人尝试该方法时发现,emmet目录下并没有node_modules\vscode-emmet-helper\out\expand\expand-full.js这一路径和文件

通过测试我发现了通过以下路径也可以达到目的:

1. 找到文件emmetNodeMain.js

通过 \Microsoft VS Code\resources\app\extensions\emmet\dist\node\emmetNodeMain.js

可以找到文件emmetNodeMain.js

如图: image.png

2. 使用VScode或其他编辑器将其打开

3. 开始修改

郑重提醒,修改之前请务必备份之,以防不测。

*** 查找 功能(默认快捷键 Ctrl+F ) ***

3.1 修改lang为zh-CN

查找variables:{lang:

lang:"en"修改为lang:"zh-CN"

如图:

image.png

3.2 修改meta:vp(viewport)

此操作会将将默认生成的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

修改为

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

同上一步操作

查找"meta:vp" (注意引号也要复制)

"meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']"

整体替换为下列代码(注意符号)

"meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, minimum-scale=${3:1.0}, maximum-scale=${4:1.0}, user-scalable=${5:no}']"

结果如图:

image.png

3.3 修改H5模板生成时光标的初始位置

默认情况下,使用!感叹号生成H5模板时,光标默认是选中device-width文本状态,需要3-4个Tab键才能将光标移入body中。

搜索关键字device-width即可找到如下代码:

"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']"

删除 ${1:及}即可解除初始光标对device-width的文本选中状态 同理,删除${2:及}即可解除初始光标对1.0的文本选中状态 结果如图

image.png

"meta:vp":"meta[name=viewport content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no']"

其他亦同理 title{${1:Document}},其中title即为H5模板的页面标题,$应该是类似于变量的引用,1:还是意味着初始时光标在标题行的第1次选中Document文本状态,后者也就是模板页面的标题,完全可以修改成自己想要字符,如 XXX

4.在全部修改结束后保存,关闭文件,重启VS code

新建html文件进行测试

5.实现效果

注意:更新 VScode 会丢失更改,需要重新配置

v2-c6a6573ff6a1f8602841698d989f14a2_b.webp

即:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
</head>

<body>

</body>

</html>

参考资料:

作者:xishuiinsz

链接:www.jianshu.com/p/4effad66e…

链接:www.yuque.com/gangafengli…)

标签:scale,1.0,修改,VSCODE,width,live,meta,template,模板
From: https://www.cnblogs.com/trmbh12/p/18034473

相关文章

  • vscode报错,nodemon 在此系统上禁止运行脚本
    1.vscode报错,nodemon:因为在此系统上禁止运行脚本注意:不仅仅适用于nodemon报错,报在此系统上禁止运行脚本的错都可以用以下方法解决2.报错原因分析:windows为了安全,默认的执行策略为Restricted,因此需要将执行策略设置为RemoteSigned即可3.解决方法  (1)get-exec......
  • JdbcTemplate 自定义返回的结果集字段和实体类映射
    废话不多:抄袭代码packagecom.webank.wedatasphere.qualitis.handler;importcom.webank.wedatasphere.qualitis.response.Grid;importcom.webank.wedatasphere.qualitis.response.SelectRuleResponse;importorg.springframework.beans.factory.annotation.Autowired;impo......
  • vscode格式
    ctr+shift+P  搜settings.json {"security.workspace.trust.untrustedFiles":"open","vetur.format.options.tabSize":4,"vetur.format.defaultFormatterOptions":{"prettier":{......
  • 用wsl和windows vscode 进行开发
    https://code.visualstudio.com/docs/remote/wsl用wsl和windowsvscode进行开发上面是官方教程准备:安装wsl安装vscode插件:RemoteDevelopment使用(多种方式):在wslubuntu中输入code.在code中打开F1-WSL:xxxdistro...在windows用命令行启动code,附带下......
  • vscode配置cpplint
    cpplint是Google开发的一个用于检查C++代码风格的工具。它可以自动扫描C++源代码,并提供有关代码规范、风格和错误的反馈。cpplint基于Google的C++编码规范,但也可以配置为符合其他的代码风格指南。注意,cpplint不依赖于vscode存在,可以单独在命令行中使用。安装cpplint:pipinsta......
  • vscode cuda编程环境配置
    我使用的是RemoteSSH连接远程服务器需要确保vscodec/c++插件安装正确包括客户端插件和服务器插件,之前安装过c/c++插件,然后后面又删除过服务器上的vscodeserver,没注意到服务器上的c/c++插件没有安装,导致后面编辑.cu文件时出现各种问题(不提示代码补全)创建c++配置文件先创......
  • Android无线调试--VSCode也能用
    只针对android11版本及以上版本官方文档https://developer.android.google.cn/studio/run/device?hl=zh-cn#wireless官方文档讲的是使用AndroidStudio开发工具进行开发时的无线连接如下: 点进去之后会有两个选项,一个是扫码,一个是使用配对码 拿出手机,打开开发者选项--》......
  • vscode+.md文件生成pdf简历
     前提:vscode下载安装插件:MarkdownPreviewEnhanced,用来预览md文件的效果 操作:1.编辑md文件,文件的格式基本同html标签的使用一样。2.点击如图位置,预览md文件的效果:3.在md预览界面鼠标右键-点击选择在浏览器打开4.在浏览器页面->鼠标右键->打印,生成pdf即可。 ......
  • 2024年!vscode和clangd的配置
    前言Ubuntu20系统下,使用vscode和clangd来进行代码补全和拼写检查.安装vscode直接从Ubuntu的应用商店下载vscode.安装clangd$sudoaptinstallclangd安装vscode插件-clangdvscode安装clangd插件不需要对clangd插件进行配置.不需要对clangd插件进......
  • Vue 学习笔记 3--live server
    liveserver插件在Vscode扩展插件中安装liveserver,启用扩展后展示如下所示: 单击GoLive,会运行启用网页,如下图所示: 注:使用http://127.0.0.1:5500/可查看网页下详细资源信息 ......