vscode中快速生成样式结构

最新推荐文章于 2024-05-24 16:55:16 发布
最新推荐文章于 2024-05-24 16:55:16 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46853684/article/details/113619394
版权
1、在vscode中安装插件CSS Tree插件（安装后需重启）

在这里插入图片描述

2、选择要生成样式结构的内容

在这里插入图片描述

3、按ctrl+shift+p，选择css tree

在这里插入图片描述

4、生成的文件中，删除view/navigator/undefined，img改为image
  • vscode中按住alt+左键，可以多选
  • 或者ctrl+shift+L 选择所有的要删除的元素
    在这里插入图片描述
5、最后的样式结构

在这里插入图片描述

Dyoner013
关注
专栏目录
最全 vscode 快速生成vue模板的过程
weixin_42214743的博客
05-19 949
mac 系统为 code，Windows 为文件 1. code（文件）==> 首选项 ==> 用户代码片段 ==> 输入vue然后回车 或者英文：File---->preferences----->User Snippets 刚开始找了很多教程找不到文件在哪里，最后发现mac 在 code 中。 2.在搜索框中输入 vue 回车，打开vue.json文件，开始默认显示如下图。 其中 prefix 是你最后模板文件的名字，body 是你即将插入用作的模板...
scss提取 vue_vscode扩展之根据Vue模板自动生成Scss结构
weixin_39644377的博客
12-22 337
某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候，template大概布局写完后，对着 template结构写 scss是件比较耗时耗力的事情，如果能作出一个自动依据 template结构生成 scss文件的 vscode插件就好了我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode扩展的开发文档，就上手 code了，做出来后效果还不错，最起码不用再做...
提高代码效率-----vscode中用标签结构快速生成样式结构的方法
zzyaiaad的博客
04-11 1915
1、在vscode中安装CSS tree插件 2、选中标签样式 3、按快捷键ctrl+shift+p 出现以下窗口 此时会生成一个文件 4、整理一下这个文件，把前面的标签名（view,navigator等）删除，再把undefined删除 统一删除标签名的方法： 1)选中要删除的标签名 2)CTRL+Shift+L 选中所有的目标变量 3)按删除键 5、把处理好的文件样式粘贴到样式文件中就...
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构，敏捷开发必备插件！！！
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-07 5906
Ctrl+Shift+X 搜索AutoScssStruct4Vue 如上图直接右键-autoScssStruct（你都不需要聚焦到template节点）直接就给你妥妥的把SCSS代码写好了，如果你还是嫌弃点右键太麻烦了太累了（泥马~这也太懒了吧，要不要AI帮你写代码？）我们还可以设置快捷键Ctrl+Alt+S，自动插入结构SCSS ...
VSCode自动生成less结构的插件
m0_50676101的博客
11-12 770
VSCode中通过安装插件，自动生成less选择器嵌套。
vs code快速生成css组织结构 CSS Tree
Ali_code的博客
10-04 1107
CSS Tree 功能介绍： 将Html 文档结构直接生成对应 css, sass, less 组织结构 使用方法： 安装 css tree 插件 选中对应的html文档结构 ctrl+shift+p Generate css tree
vscode扩展之根据Vue模板自动生成Scss结构
xianjs的博客
03-14 992
某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候，template大概布局写完后，对着 template结构写 scss是件比较耗时耗力的事情，如果能作出一个自动依据 template结构生成 scss文件的 vscode插件就好了 我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode扩展的开发文档，就上手 code了，做出来后效果还不错，最起码不用再...
vscode快速生成vue模板
08-12
在开发Vue项目时，Visual Studio Code (VSCode) 提供了一种高效的方式来创建Vue模板，通过自定义用户代码片段。...在Vue开发中，这样的模板能帮助开发者快速构建出符合规范的组件结构，从而更专注于业务逻辑的实现。
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
10-15
在这个模板中，“prefix”是触发补全的关键词，“body”包含了`.vue`文件的结构，包括模板（template）、脚本（script）和样式（style）部分。`$1`、`$2`等表示占位符，当你在生成的代码中输入时，光标会依次跳转到...
vscode md 生成html,[VScode教程] VSCode 支持Markdown
weixin_30522983的博客
06-10 1358
VSCode 支持Markdown，我们再来看看另一个 VS Code 支持的非常好的语言——Markdown。Markdown 在近些年已经成为了主流的文档书写语言，比如GitHub 上的项目 readme 默认就是 Markdown，微软在13年也把 MSDN 的文档从 XML 逐步地转为 Markdown 了。你在 VS Code 中书写 Markdown 的时候，VS Code 会提供语法...
[css]VScode中移动端适配插件cssrem的使用
小钿钿不忘初心的博客
06-11 2170
1.安装插件 vscode扩展商店搜索 “cssrem"插件 2.运行并修改配置 先启动插件，之后选择设置->扩展设置 根据实际设计稿设置基础字号 配置好了之后就可以重启vscode。 3.搭配js代码编程 在项目中创建一个自动修改基准font-size的js脚本 cssrem.js，在index.html里body标签下引入一下，我这里是设置的100倍，也就是100px=1rem。 fnResize(); window.onresize = function () { fnResize
解决VScode更新后快捷生成不能使用问题
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-18 817
解决快捷生成不能使用问题！$ < > *10等快捷生成方式
2024年VSCode插件最新推荐（54款）
最新发布
wfq741985885的博客
05-24 6898
Alignment 是一个非常实用的 VSCode 插件，它可以帮助你快速对齐代码中的各种元素，使用 Alignment 非常简单，只需要在 VSCode 中按下 Ctrl + Shift + P，然后输入“Alignment”即可查看插件的所有命令和快捷键。该插件用于帮助我们统计项目代码的行数，安装插件后，先选中需要进行代码统计的代码文件夹，然后鼠标右键点击唤出菜单，选择“Count lines in directory”，该扩展就是自动生产一个 .VSCodeCounter 的文件夹。
vscode快捷键创建div和起class名字
weixin_72155467的博客
03-06 4266
vscode快捷键创建div和起class名字
根据class类名自动生成style样式
m0_57590419的博客
08-10 741
我们前端开发不可避免的要和class类名和style样式打交道，有的时候我们只需要为某个dom设置一个样式，这时候我们也需要给dom添加一个class，然后在style中书写样式。现在给大家分享一个好用的webpack插件，可以根据你写的class名称,自动生成style样式,比如 font-size:16px 会自动生成.font-size:16px { font-size: 16px;}, color:red会自动生成.color:red { color: red }。
vsCode 快速生成vue 模板
热门推荐
versionli的博客
06-13 2万+
1.使用快捷Ctrl + Shift + P唤出控制台 2，然后输入“snippets”并选择 2.接着输入vue， vs code自动生成vue.json文件。 3. 将vue.json文件改为下面得模板（可以根据个人需求修改当中的模板内容） { "Print to console": { "prefix": "vue", "body": [ ...
VScode快速生成Vue3组件模板（代码片段&插件）
有事儿私信。
03-09 1万+
两种方法根据个人喜好使用，也可同时使用。好处：可以完全按照个人习惯设置。好处：安装即用，生成默认模板。1、打开设置里的用户代码片段。4、使用：输入vue回车生成。2、找到vue.json。
vscode中如何快速生成vue3模板-非常实用的小技巧
m0_37873510的博客
11-10 1万+
vscode中快速生成vue3模板
VS code react插件快捷键
weixin_41016986的博客
07-13 1063
VS code react插件快捷键
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值