microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.97k stars 28.77k forks source link

Toggle line comment doesn't work for multiple lines in CSS #184666

Open vanowm opened 1 year ago

vanowm commented 1 year ago

Type: Bug

Toggle line comment in CSS creates a single comment block when multiple lines are selected. This creates an issue, aka corrupts the code, if the selected lines already contain comment(s).

Highlight 2 lines:

  /* flex-grow: 1; */
  /* justify-self: center; */

Press CTRL + /

The result is currupted CSS:

  flex-grow: 1; */
  /* justify-self: center; 

A possible fix is to process each line individually like it does in javascript.

VS Code version: Code 1.79.0 (b380da4ef1ee00e224a15c1d4d9793e27c2b6302, 2023-06-07T14:26:35.552Z) OS version: Windows_NT x64 10.0.19045 Modes:

System Info |Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz (16 x 3600)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|63.67GB (22.43GB free)| |Process Argv|--verbose| |Screen Reader|no| |VM|50%|
Extensions (89) Extension|Author (truncated)|Version ---|---|--- better-comments|aar|3.0.2 vscode-userscript|adp|1.3.2 Bookmarks|ale|13.3.1 tsl-problem-matcher|amo|0.6.2 autolispext|Aut|1.6.2 spellright|ban|3.0.116 vscode-log-viewer|ber|0.12.2 vscode-intelephense-client|bme|1.9.5 git-exclude|bou|0.3.1 phpserver|bra|3.0.2 insert-unicode|bru|0.14.0 turbo-console-log|Cha|2.9.3 regex|chr|0.4.0 doxdocgen|csc|1.4.0 autoit|Dam|1.0.11 copy-directory-path|dan|1.0.3 vscode-eslint|dba|2.4.0 xml|Dot|2.5.1 gitlens|eam|13.6.0 EditorConfig|Edi|0.16.4 vscode-great-icons|emm|2.1.93 prettier-vscode|esb|9.13.0 vscode-macros|EXC|1.4.1 vscode-highlight|fab|1.7.3 vscode-firefox-debug|fir|2.9.8 auto-rename-tag|for|0.1.10 remotehub|Git|0.58.0 vscode-pull-request-github|Git|0.66.0 vscode-test-explorer|hbe|2.21.1 customize-ui|ioc|0.1.65 monkey-patch|ioc|0.1.23 reg|ion|1.1.0 better-cpp-syntax|jef|1.17.2 vscode-peacock|joh|4.2.2 minifyall|jos|2.10.0 node-module-intellisense|lei|1.5.0 Lisp|mat|0.1.12 render-crlf|med|1.6.1 vscode-language-babel|mgm|0.0.39 git-graph|mhu|1.30.0 vscode-filesize|mkx|3.1.0 vscode-apache|mrm|1.2.0 vscode-edge-devtools|ms-|2.1.1 isort|ms-|2022.8.0 python|ms-|2023.10.0 vscode-pylance|ms-|2023.6.10 remote-containers|ms-|0.292.0 remote-ssh|ms-|0.102.0 remote-ssh-edit|ms-|0.86.0 vscode-remote-extensionpack|ms-|0.24.0 azure-repos|ms-|0.34.0 cmake-tools|ms-|1.14.33 cpptools|ms-|1.15.4 cpptools-extension-pack|ms-|1.3.0 hexeditor|ms-|1.9.11 live-server|ms-|0.4.8 remote-explorer|ms-|0.4.0 remote-repositories|ms-|0.36.0 remote-server|ms-|1.2.1 test-adapter-converter|ms-|0.1.8 debugger-for-edge|msj|1.0.15 color-highlight|nau|2.5.0 mytestextension-profile-setting|nob|0.0.1 vscode-auto-scroll|pej|1.1.0 vscode-versionlens|pfl|1.5.0 parse-tree|pok|0.26.4 vscode-phpunit|rec|3.1.2 tmlanguage-syntax-highlighter|Red|2.2.1 vscode-xml|red|0.25.0 format-html-in-php|rif|1.7.0 color-manager|roy|0.7.5 rust-analyzer|rus|0.3.1541 multi-command|ryu|1.6.0 vbsvscode|Ser|1.2.1 swapdiff|sha|0.2.0 comment-divider|sta|0.4.0 code-spell-checker|str|2.20.4 tabnine-vscode|Tab|3.6.53 tauri-vscode|tau|0.2.6 cmake|twx|0.0.17 vscode-ltex|val|13.1.0 intellicode-api-usage-examples|Vis|0.2.7 vscodeintellicode|Vis|1.2.30 vscode-wakatime|Wak|24.0.11 vscode-backup|Wes|0.0.6 php-debug|xde|1.32.1 local-history|xyz|1.8.1 json-color-token|yec|1.3.2 html-css-class-completion|Zig|1.20.0 (2 theme extensions excluded)
hediet commented 1 year ago

The command implementation is simple: Just add or remove /* and */ around the selected lines. If the selected lines contain more /* or */, it wont work.

oIQTI3qMQ7

vanowm commented 1 year ago

Why can't it work just like javascript where each line wrapped individually?

vanowm commented 1 year ago

As of now, when multiple lines are commented out as a block, devtools don't show them at all, while when each line wrapped individually, it shows each line as unchecked, which allows for manipulation.