怎样才能改进 VSCode 的智障 CSS 补全…

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Visual Studio Code

这是一个创建于 2724 天前的主题，其中的信息可能已经有所发展或是发生改变。

当我尝试输入border-radius时：

当我尝试输入text-align: center时：

当我尝试输入最简单的width时：

……所以，有什么插件可以修复 VSCode 的这种智障行为，使得它不会默认提示冷门的、根本没人用的 CSS 属性呢？

真心求，最近换用 VSCode 之后简直要被这个逼疯了。

VSCode

CSS

智障

输入

16 条回复 • 2017-06-19 17:06:50 +08:00

viko16

2017-05-22 09:34:13 +08:00

要不，记一下 emmet ?
https://docs.emmet.io/cheat-sheet/

BoiledEgg

2017-05-22 09:37:43 +08:00

这种缩写，可以考虑设置你自己的用户代码片段

wdhwg001

2017-05-22 09:42:11 +08:00

@viko16 加冒号的确可以让这个提示闭嘴…

而且，`w`和`va`都是常见的 emmet 指令，`w`的结果之前已经贴了，`va`的是这样的：

以及，我发现 emmet 其实可以在 VSCode 里正确工作——你只需要 va，然后 tab，然后 ctrl+z，然后 tab 就行了。

……但是更智障了，不是吗？

blanu

2017-05-22 09:42:12 +08:00 via iPhone

我对这个有点恼火，不能安装使用频次做一下重新排序吗，lz 可以考虑提 issue

wdhwg001

2017-05-22 09:44:22 +08:00

@BoiledEgg 在 webstorm 里的 emmet 是可以不用加冒号的，VSCode 里也不用加，但 emmet 在 tab 的时候的优先级低于自动补完，而这个自动补完是个智障…

66beta

2017-05-22 09:46:08 +08:00

"editor.snippetSuggestions": "top"
"editor.quickSuggestionsDelay": 300

延迟 300 毫秒加载智能提示，在这之前赶紧 tab 出 emmet

话说 emmet 居然不能在智能提示的第一位，vscode 离 sublime 还差几条街

lneoi

2017-05-22 09:47:34 +08:00

sublime 用习惯了.. 对 VSCode 这个补全真是用着难受常常打 tac 然后又得删了写全

BoiledEgg

2017-05-22 09:52:07 +08:00

@wdhwg001 我的意思不是 emmet 代码片段，而是 vsc 自带的那个，mac 的话选择 code->首选项->用户代码片段，或者 cmd+shift+p 后输入 snippet

另外对于 border-radius 来说我一般是 borr

Trim21

2017-05-22 09:53:24 +08:00

@66beta vscode 好多 snippet 都不在第一个选项，反而要去用上下键选择。。。。而且也不能手动设置。。

lifesimple

2017-05-22 10:02:03 +08:00

sublime 输入 br 也是和 vscode 一样啊 tac 倒是出来了，借楼问一下 vscode 有没有类似 Sublime AllAutoComplete 这样的插件可以全局提示变量名？

wdhwg001

2017-05-22 10:04:37 +08:00

找到了一个解决方案是这样：
"[css]": {
"editor.quickSuggestions": false
}
但是，VSCode 不支持 language injection，所以这只会对.css 文件生效。

而且，如果进一步的关闭 html 的快速提示的话，会使得 JavaScript 的补全也受到影响。

nannanziyu

2017-05-22 11:03:35 +08:00

@wdhwg001
@blanu
@66beta
@lneoi
@Trim21

css 里的 emmet 和 QuickSuggest 冲突的问题很早就有人提了
但是因为经过调研，更多的人使用智能提示，而不是 emmet
比如 https://github.com/Microsoft/vscode/issues/15817

对我个人而言
1，html 里不会冲突。
2，css 除了常见的几个，很少有人能背出多少来。我算是用的比较熟练的，算一算，大概也就用 20 个左右
解决方法如下：

keybindings.json 中增加类似下面的片段

``` js
[
{
"key": "ctrl+m",
"command": "editor.emmet.action.expandAbbreviation",
"when": "editorTextFocus"
}
]
```

之后输入 emmet 后按设定的快捷键就好了

wdhwg001

2017-05-22 12:36:29 +08:00 via iPhone

@nannanziyu
但是 VSCode 的智障不仅这些…
比如，在仅使用 emmet，关闭快速建议的 html 文件里，它会把`fw:b`补成`fw:<b></b>`…

Rice

2017-05-25 08:55:42 +08:00

官方的解决方法:https://github.com/Microsoft/vscode/issues/1952#issuecomment-257811974
You can change this in your keybindings file.
Add

{ "key": "tab", "command": "-acceptSelectedSuggestion"},

if you don't wan't to complete completion-proposals with the tab key.

Add

{ "key": "tab", "command": "editor.emmet.action.expandAbbreviation",
"when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorHasMultipleSelections && !editorHasSelection && !editorReadonly && !editorTabMovesFocus" }
}

To give emmet priority.
When evaluating a keybinding, VSCode first looks in the user keybinding settings, bottom to top, then in the default settings, bottom to top. It will take the first command where the when clause matches.

piapia

2017-05-30 23:22:45 +08:00

同样还有在 php 文件里写 html.. 连标签配对都做不到了。。鼠标选中一个 div。所有的 div 都给你高亮了。

Rice

2017-06-19 17:06:50 +08:00

好消息
VSCode 的 Emmet 改进已经在 1.13 版的实现

Emmet abbreviation expansion in suggestion list
Until now, the default behavior for expanding an Emmet expansion has been to use the Tab key. There were two issues with this design:

Many unexpected Emmet expansions occurred when the user wanted to just add an indent.
On the other hand, items from the suggestion list got inserted when the user was expecting the Emmet abbreviation to be expanded.
Both of these issues can be now solved by having the expanded Emmet abbreviations show up in the suggestion list and freeing up the Tab key for what it was meant to do, indenting.

Set emmet.useNewEmmet to true to start using this new feature. This feature is best used with the suggestion documentation fly-out expanded where you can preview the expanded abbreviation as you type. Note that Tab key will no longer expand the abbreviation by default.