php emment,vscode emmet扩展输出带浏览器前缀的css3属性-emmet扩展阅读

emmet扩展是编写css的标配工具，在N年前css3刚出那会，借助emmet可快速编写输出带浏览器前缀的css3属性相信这个功能对从事前端工作的小伙伴编写兼容性良好的css带来了不可或缺的帮助！

强大的vscode编辑器也集成了emmet的部分功能，强调部分，这就是今天我们要说的“vscode emmet扩展输出带浏览器前缀的css3属性”这个话题！

在vscode css 里面输入：trf-sc 再按tab扩展emmet css3的缩写，不出意外你会发现输出的是：

transform: scale(x, y);

对的，不带浏览器前缀的输出，如何输出带浏览器前缀的css3属性呢？

看回emmet官方文档

https://docs.emmet.io/customization/preferences/

中提到的css.autoInsertVendorPrefixes项说明，只有在输入css缩写前加中破折号即：-  才会输出带浏览器前缀的css3属性。

输入-trf-sc，再按tab，即可看到输出下列属性：

-webkit-transform: scale(x, y);

-moz-transform: scale(x, y);

-ms-transform: scale(x, y);

-o-transform: scale(x, y);

transform: scale(x, y);

但这个写法，对缩写css3的渐变属性的编写支持地并不好，只能输入lg按tab输出，不支持lg(#f00,#900)这种写法，基于带浏览器前缀跟不带浏览器前缀的渐变属性值的定义不同，此时输入-lg扩展出来的带浏览器前缀的渐变属性已无意义！

另外vscode对emmet.preferences也是部分支持，详见：

https://code.visualstudio.com/docs/editor/emmet

中emmet.preferences项说明：

You can use this setting to customize Emmet as documented in Emmet Preferences. The below customizations are currently supported:

css.propertyEnd

css.valueSeparator

sass.propertyEnd

sass.valueSeparator

stylus.propertyEnd

stylus.valueSeparator

css.unitAliases

css.intUnit

css.floatUnit

bem.elementSeparator

bem.modifierSeparator

filter.commentBefore

filter.commentTrigger

filter.commentAfter

format.noIndentTags

format.forceIndentationForTags

profile.allowCompactBoolean

css.fuzzySearchMinScore

部分支持，在一定程度上也限制了emmet发挥应有的功能，比如：#f00

会输出#ff0000，并且不能配置输出成：#f00,因为上述支持设置项并不包含emmet官方preferences文档

https://docs.emmet.io/customization/preferences/

中提到的css.color.short设置项，诸如此类限制不再一一列举，希望后面vscode更新版本中对emmet的支持能更友好、全面！