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

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

2024-04-08 489
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 让你爽到飞起的【懒人插件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


文章标签：
前端开发
敏捷开发
人工智能
关键词：
vscode插件
插件vscode
CSS插件
CSS结构
CSS标签
你挚爱的强哥
目录
相关文章
aliyun5606190238
|
6月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件，自然语言控制VS Code，轻松开发应用，核心技术开源！
SmartVscode插件深度解析：自然语言控制VS Code的革命性工具及其开源框架App-Controller
aliyun5606190238
1090 1
阿里通义推出SmartVscode插件，自然语言控制VS Code，轻松开发应用，核心技术开源！
极客小俊
|
3月前
|
机器学习/深度学习 人工智能 自然语言处理
告别熬夜写代码！VSCode+Cline扩展插件+DeepSeek-V3大模型，让你的编程水平瞬间超越99.9%的人!
逆天改变！VSCode+Cline+DeepSeek-V3，编程界的新王者就是你!
极客小俊
1335 35
告别熬夜写代码！VSCode+Cline扩展插件+DeepSeek-V3大模型，让你的编程水平瞬间超越99.9%的人!
划雨悦潭之赋
|
1月前
|
JavaScript 前端开发 程序员
甚至用不了五分钟就能学会vscode插件开发
本文介绍了VSCode插件的开发流程，从创建项目到最终发布。首先通过安装`yo`和`generator-code`脚手架工具初始化项目，选择JavaScript语言配置基础信息。接着，在`extension.js`中实现业务逻辑，例如将中文“变量”替换为“var”。通过F5进入调试模式验证功能。完成后使用`vsce`工具进行打包，解决可能遇到的版本不兼容或README文档问题。最后生成`.vsix`文件，可通过VSCode的“从VSIX安装”加载插件，实现开发闭环。进一步可将插件发布至官方市场供更多开发者使用。
划雨悦潭之赋
174 0
卓伊凡
|
4月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
105 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
aliyun9583140110-15652
|
3月前
|
人工智能 自然语言处理 前端开发
通义灵码插件在VSCode中的运用
借助通义灵码插件在VSCode构建新闻网，实现效率与智能的融合。VSCode作为前端开发的“瑞士军刀”，提供实时预览、智能辅助和高效管理功能；通义灵码插件通过自然语言交互生成代码，简化复杂任务并优化代码质量。两者结合形成从设计到部署的高效闭环，大幅减少基础编码时间，降低开发门槛，助力开发者聚焦业务逻辑与创新。
aliyun9583140110-15652
328 3
通义灵码
|
3月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码：完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码：完全免费+实战教程+微信贪吃蛇小程序
通义灵码
390 8
哈你真皮
|
5月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开
哈你真皮
98 21
哈你真皮
|
5月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
哈你真皮
61 2
游客dng4gjyb342he
|
5月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画，它可以和animate.css完美结合，生成60多种轮播图过渡动画效果。
游客dng4gjyb342he
67 2
游客dng4gjyb342he
|
6月前
|
前端开发
纯css3经典列表式手风琴插件
这是一款十分经典的纯css3列表手风琴插件。该插件使用css兄弟选择器和:target伪类来实现。
游客dng4gjyb342he
90 0

热门文章

最新文章

  • 1
    这个被忽略的CSS:hover隐藏用法，让交互设计师都跪了
  • 2
    【CodeBuddy】三分钟开发一个实用小功能之：CSS渐变背景生成器
  • 3
    DeepSeek 满血版在 VScode 和 IDEA 中怎么用？手把手教程来了
  • 4
    【CodeBuddy】三分钟开发一个实用小功能之：CSS代码瘦身专家
  • 5
    在VScode环境下配置Python环境的方法
  • 6
    甚至用不了五分钟就能学会vscode插件开发
  • 7
    【Azure Developer】VS Code上登录China Azure遇见错误：CAA20002
  • 8
    CSS 居中方法总结
  • 9
    CSS3实现简单下拉菜单
  • 10
    前端学习 -- Css -- display和Visibility
  • 1
    在VScode环境下配置Python环境的方法
    68
  • 2
    DeepSeek 满血版在 VScode 和 IDEA 中怎么用？手把手教程来了
    107
  • 3
    甚至用不了五分钟就能学会vscode插件开发
    174
  • 4
    【Azure Developer】VS Code上登录China Azure遇见错误：CAA20002
    67
  • 5
    vscode推送项目到github仓库故障解决1
    122
  • 6
    vscode代码推送到github库菜鸡专用教程
    226
  • 7
    利用通义灵码AI在VS Code中快速开发扫雷游戏：Qwen2.5-Max模型的应用实例
    22247
  • 8
    AI程序员：通义灵码 2.0应用VScode前端开发深度体验
    287
  • 9
    通义灵码插件在VSCode中的运用
    328
  • 10
    VSCode AI提效工具，通义灵码前端开发体验
    260

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • CSS基础教程
    • 下一篇
    阿里云oss简介和如何对接使用