备案控制台
开发者社区 开发与运维 文章 正文

让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构，敏捷开发必备插件！！！

2024-04-08 89
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构，敏捷开发必备插件！！！

Ctrl+Shift+X

搜索AutoScssStruct4Vue

如上图直接右键-autoScssStruct（你都不需要聚焦到template节点） 直接就给你妥妥的把SCSS代码写好了，如果你还是嫌弃点右键太麻烦了太累了（泥马~这也太懒了吧，要不要AI帮你写代码？）我们还可以设置快捷键Ctrl+Alt+S，自动插入结构SCSS

如果想了解如何自己开发插件，并安装到VSCode请点击https://s-z-q.blog.csdn.net/article/details/120167727


文章标签：
前端开发
敏捷开发
人工智能
关键词：
CSS vscode
CSS标签
vs code插件
CSS less
标签CSS
你挚爱的强哥
目录
相关文章
rxha4vsifpt4y
|
2天前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具，集成在 Visual Studio Code (VSCode) 中，可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
rxha4vsifpt4y
22 4
小z前端笔记
|
2天前
|
移动开发 前端开发 JavaScript
揭秘VSCode魔法工具箱：HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
揭秘VSCode魔法工具箱：HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
小z前端笔记
8 1
西瓜味的敌敌畏
|
10天前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
西瓜味的敌敌畏
19 2
_BugMan
|
15天前
|
存储 前端开发 编译器
【CSS预处理语言】less快速入门
【CSS预处理语言】less快速入门
_BugMan
17 1
阿珊和她的猫
|
1月前
|
XML 前端开发 数据格式
探索CSS预处理器：Sass、Less与Stylus
探索CSS预处理器：Sass、Less与Stylus
阿珊和她的猫
13 1
梦中千秋
|
1月前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
梦中千秋
17 1
梦回故国楼台梦
|
1月前
|
前端开发
【专栏：CSS进阶篇】CSS变量与预处理器（Sass/Less）
【4月更文挑战第30天】本文探讨了CSS变量和预处理器Sass的使用，以提升开发效率和代码可维护性。CSS变量通过--*语法定义，可在文档范围内重用，减少冗余，提高可维护性。Sass预处理器引入了变量、嵌套规则、混合和函数等特性，使CSS编写更简洁、可维护。Sass变量使用$符号定义，支持嵌套规则和混合，如定义border-radius混合以减少重复代码。Sass的高级功能使其成为强大工具。
梦回故国楼台梦
31 0
梦回故国楼台梦
|
1月前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先，通过 `npm` 安装 less 或 sass 依赖，然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着，详细阐述如何使用 less/sass 编写样式。再者，安装 react-css-modules 并配置 webpack，使能样式模块化。最后，展示了如何结合使用 less/sass 和 react-css-modules，以提升前端开发的效率和代码质量。
梦回故国楼台梦
83 0
渐暖
|
1月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
渐暖
40 0
橙子先生
|
1月前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
橙子先生
32 0

热门文章

最新文章

  • 1
    CSS3 探索发现系列：一组梦幻般的 CSS3 动画按钮效果
  • 2
    编写跨浏览器兼容的 CSS 代码的金科玉律
  • 3
    CSS实现DIV水平 垂直居中-1
  • 4
    简化Web开发的12个HTML5-CSS框架
  • 5
    CSS中选择器优先级顺序实战讲解
  • 6
    10 个超棒的 CSS3 下拉菜单
  • 7
    css vertical-align:middle来实现垂直居中
  • 8
    CSS3 动画一瞥
  • 9
    如何用纯 CSS 创作一副国际象棋
  • 10
    【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
  • 1
    【C++】Windows端VS code中运行CMake工程（手把手教学）
    68
  • 2
    国产新型AI编程助手—DevChat AI插件在VSCode中的应用
    150
  • 3
    vscode点击通过import引入方法名或模块名跳转其定义的文件
    216
  • 4
    VSCode安装教程（超详细）
    63
  • 5
    VSCode 插件Code Runner 中文提示乱码
    237
  • 6
    Ubuntu下安装vscode，并解决终端打不开vscode的问题
    423
  • 7
    「远程开发」VSCode使用SSH远程linux服务器 - 公网远程连接
    222
  • 8
    编程笔记 GOLANG基础 005 第一个程序：hello world 使用vscode
    56
  • 9
    编程笔记 GOLANG基础 004 GOLANG常用命令及VSCODE快捷键
    65
  • 10
    VSCode 放弃 Python 3.7
    41

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • JS零基础入门教程（上册）
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算部署Serverless VSCode WebIDE
  • CSS基础教程
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）