cnyballk / wxml-vscode Goto Github PK

View Code? Open in Web Editor NEW

33.0 2.0 5.0 205 KB

:space_invader:Vscode plugin -- wechat applets formatting and highlighting components (highly customized)

License: MIT License

TypeScript 100.00%

wxml wechat weapp miniprogram

wxml-vscode's Introduction

wxml-vscode

wxml-vscode 仓库

提问题

该库我已不再维护，但需要的话可以提pr或者各自fork单独修改

安装

通过 F1 或者 CMD + Shift + P 输入 install. 选择: Install Extension.

特性

格式化功能
高亮组件功能

如何使用格式化功能

格式化支持通过 F1 或者 CMD + Shift + P 输入 format wxml 命令或者右键菜单，也可以配置 wxmlConfig.onSaveFormat 开启保存后自动格式化

example

<!-- if wxmlConfig.format.wrap_attributes_count === 2 -->
<button id="x" class="xx"></button>
<button id="x">123</button>
<!-- ⬇⬇⬇⬇ -->
<button id="x" class="xx" />
<button id="x">123</button>

wxmlConfig.format 无特殊说明的配置的属性可以这里看

// 高亮的颜色，可设置每个组件的自定义颜色, tagName:color
// 例如 <custom> 想渲染成黄色，可以添加字段 "custom":"yellow"
"wxmlConfig.activeColor": {
    "color": "#e5c07b"
  },

  // 是否禁用高亮组件
  "wxmlConfig.activeDisable": false,
  // 是否开启保存自动格式化
  "wxmlConfig.onSaveFormat": false,

  "wxmlConfig.format": {
    "brace_style": "collapse",
    "end_with_newline": false,
    "indent_char": "",
    "indent_handlebars": false,
    "indent_inner_html": false,
    "indent_scripts": "keep",
    "indent_size": 2,
    "indent_with_tabs": true,
    "max_preserve_newlines": 1,
    "wrap_attributes_count": 4,
    "unformatted": "['text']",
    "disable_automatic_closing_labels": false,
    "preserve_newlines": true,
    "wrap_attributes": "force-expand-multiline"
  },

  // 高亮所忽略的组件数组
  "wxmlConfig.tagNoActiveArr": [
    "view",
    "button",
    "text",
    "icon",
    "image",
    "navigator",
    "block",
    "input",
    "template",
    "form",
    "camera",
    "textarea"
  ]

Concat

CHANGELOG

查看版本更新

LICENSE

MIT

wxml-vscode's People

Contributors

Stargazers

Watchers

Forkers

paleplain lisong5713 simuhunluo jingjinghahah terrychan80

wxml-vscode's Issues

format 组件调整

有想法和 vetur 一样，将 format 组件换成 prettyhtml 吗？

高亮没有忽略到注释的标签

版本： 0.1.1
问题：高亮没有忽略到注释的标签

部分 text标签出现异常换行

		<view class="shortName">
			<text>1813543</text>
			<text class="icon icon_bTriangle" />




        </view>

这里text.icon标签自动闭合,但是每次保存会一直加一行空行

属性换行缩进设置无效

缩进我设置了是2个空格，但是属性的缩进是1个空格

出现一个很奇怪的现象

1.同样的代码在不同文件中格式化后的样子不一样
2.而且有时需要按两次保存才能正确格式化。
正确的


代码如下

<!-- pages/index/inquiry/inquiry-picture.wxml -->
<view class="container" hover-class="none" hover-stop-propagation="false">
				<view class="select" hover-class="none" hover-stop-propagation="false">
								<text>选择宠物</text>
								<image src="/images/user/more.png" mode="aspectFit" />
				</view>
				<view class="symptom" hover-class="none" hover-stop-propagation="false">
								<text>症状：</text>
								<textarea value="{{symptom}}" placeholder="请输入症状描述" maxlength="150" auto-focus="true" />
				</view>
				<view class="picture" hover-class="none" hover-stop-propagation="false">
								<text>图片</text>
								<view class="pic-area" hover-class="none" hover-stop-propagation="false">
												<view class="picture-view" wx:for="{{images}}" wx:key="index" data-selectIndex="{{index}}" hover-class="none" hover-stop-propagation="false">
																<image class="cover" src="{{item}}" mode="aspectFit" bind:tap="upload"></image>
																<image class="close" src="/images/close.png" wx:if="{{item.substring(0,4) == 'http'}}" mode="aspectFit" bind:tap="close"></image>
												</view>
								</view>
				</view>
</view>

0.0.6版本，{{}} 中的空白在格式化或编辑器获得焦点时变大

举例：
原始代码：

代码不做任何改动，只是重复“保存”和“使编辑器获得焦点”的操作，多次操作后{{}}之间的空白变大了，变成以下这种情况：

还有这个问题：
原代码：

格式化后：

即：格式化后sendMessagePath属性中?前后被加上空格了

不能格式化

最后个元素如无子元素多属性不换行

保存一直闪

<!--miniprogram/pages/mapPageSlider/mapDetail.wxml-->
<view>
<image src="{{bg}}" mode="aspectFill" class="bg"></image>
<image src="{{map}}" mode="scaleToFill" style="position:absolute;width:100vw;height:{{mapHeight}};top:{{mapTop}}" bindload="imageload"></image>
<view style="position:absolute;width:100vw;height:100rpx;top:0px;display:flex;justify-content: center">
<image src="{{title}}" mode="aspectFit" style=" width:300rpx;height:100rpx;flex-direction: row"></image>

</view>
<image src="{{xztitle}}" mode="aspectFit" style="position:absolute;width:90vw;height:50px;left:5vw;bottom:0px"></image>
<view class="legend">
<view class="inlegend">
  <image src="../../images/rflag.png" class="flag" bindtouchmove="buttonMove1" bindtouchstart="buttonStart1" bindtouchend="buttonEnd1" bindlongpress="longtaped1" style="position: absolute;top:{{buttonTops1[index]}}px;left:{{buttonLefts1[index]}}px" wx:for="{{items1}}" wx:key="index" wx:for-index="index" wx:for-item="items1" data-index="{{index}}" ></image>
  <text>市场较好区域</text>
</view>
<view class="inlegend">
<view class="imgblock2">
  <image src="../../images/yflag.png" class="flag" bindtouchmove="buttonMove2" bindtouchstart="buttonStart2" bindtouchend="buttonEnd2" bindlongpress="longtaped2" style="position: absolute;top:{{buttonTops2[index]}}px;left:{{buttonLefts2[index]}}px" wx:for="{{items2}}" wx:key="index" wx:for-index="index" wx:for-item="items2" data-index="{{index}}"></image>
  </view>
  <text>市场一般区域</text>
</view>
<view class="inlegend">
<view class="imgblock3">
  <image src="../../images/gflag.png" class="flag" bindtouchmove="buttonMove3" bindtouchstart="buttonStart3" bindtouchend="buttonEnd3" bindlongpress="longtaped3" style="position: absolute;top:{{buttonTops3[index]}}px;left:{{buttonLefts3[index]}}px" wx:for="{{items3}}" wx:key="index" wx:for-index="index" wx:for-item="items3" data-index="{{index}}"></image>
  </view>
  <text>有意向区域</text>
</view>
</view>
</view>

复制以上代码保存为wxml保存。
会一直闪屏保存

这个插件还维护吗？

{{ name }} 增加空格后格式化会转行

能更新一下最新版本到vscode扩展市场吗？

你好，非常感谢开发这么棒的扩展，之前提的建议也采纳了，能更新一下扩展到vscode的扩展市场吗？很需要用上最新的特性。

wxs里的代码支持不好，没有缩进了

比如：

<wxs module="wxs">
	var getMsgContent = function(status) {
	return 'Processing';
	}

	module.exports = {
	getMsgContent:getMsgContent
	};
</wxs>

插件版本：0.1.2

vscode 版本：
版本: 1.39.1
提交: 88f15d17dca836346e787762685a40bb5cce75a8
日期: 2019-10-10T23:35:11.314Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 17.7.0

未找到 extension.formatwxml 指令

如图。

v0.1.0 活动窗口切换的时候高亮消失

因为高亮的缓存问题导致当活动窗口切换的时候高亮会消失

属性缩进怎么调整?

ctrl+shift+f无效

如题

增加一个设置选项：无子元素时是否闭合标签

增加一个设置选项：无子元素时是否闭合标签。因为有时候在写页面结构的时候，暂时不写里面的内容，但是一格式化的话就变成闭合标签了，下次想要增加标签内容时就麻烦了，要手动修改，还要手动加上闭合标签。希望加一个设置选项，无子元素时是否闭合标签:false/true，灵活控制。

vscode里面搜不到这个插件

格式化时不要为text标签内容加上换行，否则导致页面排版错乱

格式化时不要为text标签内容加上换行，否则导致页面排版错乱。

可以参考minapp扩展针对这个问题的解决方法：
https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode
【2018-08-06】1.7.2 添加配置项 reserveTags，表示不格式化此配置中的 tag 标签的内容（一般 text 标签不需要格式化）