vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.79k stars 390 forks source link

initially typing a style block in with scss, or stylus language, comments won't work if the block contains only line breaks and tabs #4485

Open yezheyu opened 3 months ago

yezheyu commented 3 months ago

Vue - Official extension or vue-tsc version

v2.0.21

VSCode version

1.90.2

Vue version

3.2.37

TypeScript version

none

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-4200U CPU @ 1.60GHz
    Memory: 3.59 GB / 7.43 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.12.2 - /usr/bin/node
    npm: 10.5.0 - /usr/bin/npm
    pnpm: 9.3.0 - /usr/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.141

Steps to reproduce

当我使用 Ctrl + / 进行注释时,在 CSS 或者 Template 中会出现无法注释的情况

当我把我的 vscode 的配置文件 settings.json 文件清空时(使用默认设置),就不会出现上述问题

这是我的 vscode 的配置文件 settings.json 内容

{
    //#region flake8配置项
    "flake8.args": [
        "--ignore=W191, E266, W504, E501",
        "--max-line-length=248"
    ],
    //#endregion

    //#region git配置项
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    //#endregion

    //#region liveServer插件配置项
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": true,
    //#endregion

    //#region Path Autocomplete 路径提示设置
    "path-autocomplete.extensionOnImport": true, //导入文件时是否携带文件的拓展名
    "path-autocomplete.pathMappings": {
        //配置@的路径提示
        "@": "${folder}/src"
    },
    //#endregion

    //#region vue中使用ref自动追加.value
    "vue.autoInsert.dotValue": true,
    //#endregion

    //#region 忽略拼写检查
    "cSpell.ignoreWords": [
        "endregion",
        "pinia",
        "yezheyu"
    ],
    "cSpell.userWords": [
        "mbconfig",
        "yezheyu"
    ],
    //#endregion

    //#region vscode外观设置
    "window.titleBarStyle": "custom",
    "workbench.editor.enablePreview": false, // 以新标签页方式打开文件,而不是替换
    "workbench.colorTheme": "Monokai",
    //#endregion

    //#region editor设置相关
    "editor.fontSize": 18,
    "editor.lineHeight": 1.6,
    "editor.letterSpacing": 0.3,
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?", // 设置双击选中单词,设置短横线不分隔
    "editor.linkedEditing": true, // HTML结束标签跟随开始标签变化
    "editor.tabCompletion": "on", // tab代码补全
    "editor.quickSuggestions": {
        "other": true,
        // 在注释和字符串中启动IntelliSense
        "comments": true,
        "strings": true
    },
    //#endregion

    //#region 为每种语言设置不同的缩进和formatter
    "editor.formatOnSave": true,
    "editor.tabSize": 4, // 默认值是4, 控制着按下tab键使用几个空格, 注意和prettier.tabWidth区别
    "[python]": {
        "editor.tabSize": 4,
        "editor.defaultFormatter": "eeyore.yapf"
    },
    // "[vue]": {
    //     "editor.tabSize": 2,
    //     "editor.defaultFormatter": "Vue.volar" // 也可以使用esbenp.prettier-vscode
    // },
    //#endregion

    //#region 文件设置相关
    // "files.autoSave": "onFocusChange", // 文件焦点变化时自动保存, 即切换标签时保存
    "files.exclude": {
        // 这些文件将不会显示在工作空间中
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/node_modules": true,
        "**/.venv": true,
        "**/.hg": true,
        "**/.svn": true,
        "**/*.js": {
            "when": "$(basename).ts" // ts编译后生成的js文件将不会显示在工作空中
        }
    },

    // "files.associations": {
    //     "*.vue": "html" // 把vue关联为html文件, 避免快捷键注释失效,但会导致vue中使用ts报错
    // },
    //#endregion

    "thunder-client.defaultHeaders": [],
}

这是所有我已经安装的 vscode 插件

alexcvzz.vscode-sqlite@0.14.1
dbaeumer.vscode-eslint@3.0.10
eeyore.yapf@2023.12.104100706
gruntfuggly.todo-tree@0.0.226
ionutvmi.path-autocomplete@1.25.0
ms-python.debugpy@2024.6.0
ms-python.flake8@2023.10.0
ms-python.isort@2023.10.1
ms-python.python@2024.8.1
ms-python.vscode-pylance@2024.6.1
njpwerner.autodocstring@0.6.1
oderwat.indent-rainbow@8.3.1
rangav.vscode-thunder-client@2.24.11
ritwickdey.liveserver@5.7.9
streetsidesoftware.code-spell-checker@3.0.1
vue.volar@2.0.21
wayou.vscode-todo-highlight@1.0.5

上述问题,我换了台机器安装好这些插件,并使用这个vscode配置也会复现

Link to minimal reproduction

Edit @davidmatter:

When initially typing a style block in with postcss, scss, or stylus language, comments won't work if the block contains only line breaks and tabs. Once any content is added, comments will work normally.

Any additional comments?

No response

yeyuqh commented 2 months ago

我这也是偶尔会出现快捷键无法注释的问题,目前不清楚是怎么触发的。

davidmatter commented 1 month ago

Can't reproduce. Can you export your VSCode profile so I can look into it?

KazariEX commented 1 month ago

When initially typing a style block in with css, scss, or stylus language, comments won't work if the block contains only line breaks and tabs. Once any content is added, comments will work normally.

davidmatter commented 1 month ago

Right, reproducable

KazariEX commented 1 month ago

My mistake, not postcss.