自己开发一个VSCode插件，快速生成Flex布局代码

已于 2023-09-27 13:51:24 修改
阅读量196 收藏 1
点赞数
分类专栏： 前端 文章标签： vscode ide 编辑器 css scss css3 前端
于 2023-09-27 13:41:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssd21988/article/details/133348209
版权

插件CSS Flex

安装地址：VSCode插件安装
GitHub：https://github.com/xutao-o/css-flex-code

💡介绍

这是一个快捷生成CSS Flex布局代码的VS Code插件，类似于Google开发者控制台里的Flex布局工具，就是看谷歌的布局工具很好用才决定自己在VSCode里面开发一个。

🖥️实现效果

  • 支持多类css文件
  • 保持代码缩进格式
  • 兼容深色与浅色主题
  • 自动替换同属性代码

⚠️注意事项

不建议在压缩后的CSS代码或HTML的行内样式中使用插件，因为会自动换行！！！

😉

本插件参考于 css-flexbox-cheatsheet

安装地址：CSS FlexCode

欢迎反馈交流，点个Star~

丘秋_XT
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局代码及语法讲解
12-20
前端入门,flex布局分析，清楚明了，代码清除明了，布局清晰，易读性强，上手容易，可借鉴性高。有收藏价值。有需要flex布局的可以看看，对新手很友好！
微信小程序开发flex布局总结
03-29
本文首发在简书博客，希望大家可以多多交流 小程序的布局只要有两种，一种是用flex来做布局，还有就是用相对定位和绝对定位。相对定位和绝对定位这个见得比较多，比起flex麻烦很多，坚决舍弃了，总结一下flex布局的资料，留备查用。如有不足，希望各位道友助攻。 不管是APP开发还是前端开发，最恶心最头痛的就是对各种屏幕的适配了。。。一不留神看着就难看了，在web网页中必须要考虑兼容性，因为浏览器不同导致不同浏览器兼容起来很麻烦。不过，小程序的话，并不需要考虑其他浏览器，我记得前段时间微信专门发了个公告，说是换成了WKWebView，都换成了webkit。flex布局的话，能够很好地适应各个尺寸的屏
vscode环境下的flex&bison
最新发布
bgape002的博客
02-29 558
​ 定义部分包括选项、文字块、定义、开始条件和转换。其中，以空白字符开始的行将被原样拷贝到C文件中。定义部分可以包含文字块，他们是被原样拷贝到生成的C文件的开始部分的C代码，文字块存在于%{和%}或者%code中，通常包括声明#include行。声明包括%union、%start、%token、%type、%left、%right和%nonassoc。
vscode切换界面布局
weixin_33994444的博客
11-16 1万+
调整vscode的控制面板位置 鼠标操作 view》Appearance》Toggle Panel Position   调整控制面板在界面底部 或者界面右侧   2.编辑区分布  鼠标操作 view》Editor Layout》Split Up编辑器水平分开，显示在上侧 view》Editor Layout》Split Down编辑器水平分开，显示在下侧 view》Editor...
VScode 中 Easy Less插件.less文件保存后自动生成css文件而不是wxss文件的问题解决教程
m0_46641521的博客
09-16 2115
解决VScode 中 Easy Less插件.less文件保存后自动生成wxss文件 问题描述 在使用 VScode 进行小程序开发时，我们都会安装 Easy LESS插件，这个插件可以帮助我们更便携的写出css文件，也就是小程序开发中的 .wxss 文件，但是，使用这款插件，首先需要将 .wxss 文件改为 .less 文件，才可以使用 Easy LESS 插件规定的语法规则，快速高效的编写样式文件。但是我们的小程序开发只认后缀名为 .wxss 的文件作为样式文件，我们在保存 .less 文件的时候该插件
VScode中常见/易忘CSS代码(原理)
weixin_72322475的博客
07-09 5466
整理总结了一些实际使用VScode的时候，比较常见和容易忘记的CSS代码，持续更新。。。主要是博主自存
vscode-flex-snippets:适用于Visual Studio Code的Flex（MX和Spark）代码段
05-13
VSCode的Flex代码段 快速创建MX和Spark组件。 如何使用 在VSCode中安装扩展 打开mxml文件，开始输入组件名称并选择代码段 注意：要在VSCode中创建Flex项目，请安装。 片段 AdvancedDataGrid BorderContainer Box MX Button Spark Button Canvas MX Checkbox Spark Checkbox MX ComboBox Spark ComboBox MX DataGrid Spark DataGrid DataGroup DateFormatter DateValidator DropDownList Ellipse MX Form Spark Form Group HBox HGroup HorizontalLayout HTTPService
vscode：如何在保存less文件时，自动生成对应的css文件，并指定css文件的保存路径
小祥编程擅长前端
06-25 1380
vscode：如何在保存less文件时，自动生成对应的css文件，并指定css文件的保存路径
【弹性布局】
abc18822941334的博客
04-24 239
文献种类：专题技术文献；编程语言 作者：胡乔冠 ；年级： ；撰写时间：2022年 4 月 18 日 文献编号： VSCode 归档时间：2022 年 4 月 18 号 VSCode的应用工具 开发工具：VSCode 关键技术：弹性布局 弹性布局 容器的属性（父元素） 首先写四个盒子 由于< div >的块状元素特性c 1 2 3现在都各自独占一行。 那么我们就可以使用弹性布局（flex布局）进行修改...
vscode-lex-flex-yacc-bison:VSCode中的Lex，Flex，Yacc和Bison的语法突出显示
05-20
Lex Flex Yacc野牛 Lex，Flex，Yacc和Bison的语法突出显示。 此扩展基于以下扩展： 概述 编程语言的编译器或解释器通常分解为两部分： 阅读源程序并发现其结构。 处理此结构，例如生成目标程序。 Lex和Yacc可以生成解决第一个任务的程序片段。 再次发现源结构的任务被分解为子任务： 将源文件拆分为令牌（Lex）。 查找程序的层次结构（Yacc）。 在阅读更多内容 已知的问题 未检测到某些关键字。 发行说明 请参阅。 贡献 分叉它 创建功能分支git checkout -b my-new-feature 提交更改git commit -am 'Add some feature' 推送到分支git push origin my-new-feature 创建一个新的拉取请求 贡献者 Faustino 创建者，维护者
移动web开发实例flex布局案例源码
02-16
移动web开发实例flex布局案例源码
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
CSS3 flex布局之快速实现BorderLayout布局
12-13
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame....
如何发布自己的静态网页
热门推荐
丘秋的博客
04-17 1万+
如何发布静态网页 相信大家做完一些网页都想把自己的网页发布出去给别人欣赏或使用，没有服务器又如何把网页发布出去呢？如果发布的仅是一个静态网页，还是很简单的。 使用对象存储云服务 对象存储（Cloud Object Storage，COS）是一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。 对象存储简单的说就是一种文件的云存储服务，类似于使用的网盘。各大云平台都有各自对象存储...
H5将网页数据导出为Excel并可下载
丘秋的博客
05-27 1万+
H5将网页数据导出为Excel并可下载 在制作webapp中，遇到个要将数据导出为Excel的问题。我搜索了一下网上的方案，可以直接将HTML的表格导出为Excel文件，这些方法在电脑上确实是可行的，当时如果放到手机上导出的Excel根本不能下载，手机下载文件都是已网络链接的形式，直接导出的文件在手机上是获取不到的。 我搜遍网上的资料都没有发现有讲在手机上将网页数据导出Excel的，于是只能自己去...
HBuilder webapp实现消息推送
丘秋的博客
02-02 9714
HBuilder webapp实现消息推送 关于软件的push推送 HBuilder 只提供了二个SDK（小米推送、个推） 因为我使用的是个推所以这篇文章就主要介绍如何使用个推实现消息推送、 1.注册个推 个推官网：https://www.getui.com/cn/index.html 注册完之后再开发者中心选择个推的消息推送 然后选择登记应用。这个自己填就行了，最后的应用标识就是应用包名。 ...
H5 webapp 实现分享功能
丘秋的博客
02-09 8346
HBuilder webapp 实现分享功能 在webapp要实现分享首要需要去社区开放平台进行申请 腾讯开放平台：https://open.tencent.com/ 在腾讯开放平台上的QQ与微信开放平台中申请创建应用，一般没什么要求都是可以通过的。 应用审核通过后就可以获得分享的权限了 在SDK配置中填入申请到的应用ID等信息 代码 在 mui.plusReady中加入下面代码获取分享参数...
vscode flex,bison代码补全和语法高亮插件
05-25
对于使用 VSCode 的用户，可以通过安装相应的插件来实现 Flex 和 Bison 代码补全和语法高亮。以下是一些常用的插件： 1. C/C++ 插件：这个插件支持 C 和 C++ 语言的语法高亮和代码补全，包括 Flex 和 Bison 的语法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值