V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wdhwg001
V2EX  ›  Visual Studio Code

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

  •  
  •   wdhwg001 · 2017-05-22 09:31:16 +08:00 · 9997 次点击
    这是一个创建于 2744 天前的主题,其中的信息可能已经有所发展或是发生改变。

    当我尝试输入border-radius时:

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

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

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

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

    16 条回复    2017-06-19 17:06:50 +08:00
    viko16
        1
    viko16  
       2017-05-22 09:34:13 +08:00
    要不,记一下 emmet ?
    https://docs.emmet.io/cheat-sheet/
    BoiledEgg
        2
    BoiledEgg  
       2017-05-22 09:37:43 +08:00
    这种缩写,可以考虑设置你自己的用户代码片段
    wdhwg001
        3
    wdhwg001  
    OP
       2017-05-22 09:42:11 +08:00
    @viko16 加冒号的确可以让这个提示闭嘴…

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



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

    ……但是更智障了,不是吗?
    blanu
        4
    blanu  
       2017-05-22 09:42:12 +08:00 via iPhone
    我对这个有点恼火,不能安装使用频次做一下重新排序吗,lz 可以考虑提 issue
    wdhwg001
        5
    wdhwg001  
    OP
       2017-05-22 09:44:22 +08:00
    @BoiledEgg 在 webstorm 里的 emmet 是可以不用加冒号的,VSCode 里也不用加,但 emmet 在 tab 的时候的优先级低于自动补完,而这个自动补完是个智障…
    66beta
        6
    66beta  
       2017-05-22 09:46:08 +08:00
    "editor.snippetSuggestions": "top"
    "editor.quickSuggestionsDelay": 300

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

    话说 emmet 居然不能在智能提示的第一位,vscode 离 sublime 还差几条街
    lneoi
        7
    lneoi  
       2017-05-22 09:47:34 +08:00
    sublime 用习惯了.. 对 VSCode 这个补全 真是用着难受 常常打 tac 然后又得删了写全
    BoiledEgg
        8
    BoiledEgg  
       2017-05-22 09:52:07 +08:00
    @wdhwg001 我的意思不是 emmet 代码片段,而是 vsc 自带的那个,mac 的话选择 code->首选项->用户代码片段,或者 cmd+shift+p 后输入 snippet

    另外对于 border-radius 来说我一般是 borr
    Trim21
        9
    Trim21  
       2017-05-22 09:53:24 +08:00
    @66beta vscode 好多 snippet 都不在第一个选项,反而要去用上下键选择。。。。而且也不能手动设置。。
    lifesimple
        10
    lifesimple  
       2017-05-22 10:02:03 +08:00
    sublime 输入 br 也是和 vscode 一样啊 tac 倒是出来了,借楼问一下 vscode 有没有类似 Sublime AllAutoComplete 这样的插件可以全局提示变量名?
    wdhwg001
        11
    wdhwg001  
    OP
       2017-05-22 10:04:37 +08:00   ❤️ 1
    找到了一个解决方案是这样:
    "[css]": {
    "editor.quickSuggestions": false
    }
    但是,VSCode 不支持 language injection,所以这只会对.css 文件生效。

    而且,如果进一步的关闭 html 的快速提示的话,会使得 JavaScript 的补全也受到影响。
    nannanziyu
        12
    nannanziyu  
       2017-05-22 11:03:35 +08:00   ❤️ 1
    @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
        13
    wdhwg001  
    OP
       2017-05-22 12:36:29 +08:00 via iPhone
    @nannanziyu
    但是 VSCode 的智障不仅这些…
    比如,在仅使用 emmet,关闭快速建议的 html 文件里,它会把`fw:b`补成`fw:<b></b>`…
    Rice
        14
    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
        15
    piapia  
       2017-05-30 23:22:45 +08:00
    同样还有在 php 文件里写 html.. 连标签配对都做不到了。。鼠标选中一个 div。所有的 div 都给你高亮了。
    Rice
        16
    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.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3372 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 12:38 · PVG 20:38 · LAX 04:38 · JFK 07:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.