vscode-scss
vscode-scss copied to clipboard
mrmlnc
Intellisense autocomplete issue in latest build
Originally posted here, but it seems like with the latest build of VScode (1.33.0), the autocomplete doesn't output correctly.
Steps to Reproduce:
- Place a Sass variable within the CSS
- Change the Sass variable name without removing the
$prefix - Upon selecting the intellisense suggestion, it will autocomplete with an additional
$.
I'm having the exact same issue—unfortunately had to disable the extension until this is fixed.
Same issue here, seems only works first time and before that, all is double $.
FYI, I'm on MacOS Mojave.
As a temporary fix, I disabled this plugin which has resulted in the expected behavior. For those of you who rely on this plugin for other features, I have no helpful advice, but in my experience I haven't lost anything that native VScode doesn't now cover (including variable intellisense selection).
The problem with this is that while it works for variables defined in the same file, if you do not have them, then you wont get intellisense for the name of the variables.
I had a similar issue where it would add an extra $ for all of the variables. It didn't matter if it was the initial completion or any thereafter. And, it didn't matter whether the variable was in the same file or not. Since the developer hasn't replied in a while, I was able to resolve it by changing line 126 in "EXTENSION_DIRECTORY/mrmlnc.vscode-scss-0.6.2/out/providers/completion.js" from:
label: variable.name,
to:
label: variable.name.replace('$', ''),
I then reloaded VSCode and it seems to work fine now.
@inferno-adam Great tip, thanks! To make it a bit more resilient, I would recommend using this line instead:
label: variable.name.replace('$$', '$'),
This way correct variable names won't lose the dollar sign unintentionally. Thanks for the find!
@danielpost You’re welcome and thank you for making it even better!
Since this still has not been fixed and the owner seems to have abandoned the repo, this plugin provides the same syntax highlight for styled components while getting rid of the conflicting language services.
Since this still has not been fixed and the owner seems to have abandoned the repo, this plugin provides the same syntax highlight for styled components while getting rid of the conflicting language services.
Thank you @ekfuhrmann !
@ekfuhrmann there seems to be two of those vscode-styled-component plugins... here's the other one that I found that looks more recent.
Great, it's a shame that by far-and-away the most popular plugin for this is no longer supported, but at least there are other options!
Hey! It's nice to see this project alive again and getting updates! @octref @mrmlnc
The problem present in the latest version of the plugin? Right now I cannot reproduce this issue. Any suggestions how to I can reproduce the problem?
Unfortunately, I can't reproduce the problem. Maybe you can share a project that always reproduces the problem? Also, can you share your set of installed extensions?
// _a.scss
$color: red;
// _b.scss
$color: blue;
// test.scss
@import "b";
$green: green;
$red: red;
$color: green;
// Write here
My attempt:
Hey @mrmlnc, sorry for the delay in getting back to you.
So I disabled every plugin aside for yours, and sure enough you are right it works. I went through the list and identified the sole plugin causing a conflict with your intellisense.
Auto Comment Blocks, at least for me, causes the issue addressed in the various comments in this thread. I have no clue why or how this causes issues, but perhaps the other people commenting here can confirm whether or not they too have this plugin installed.
Seems I got the same issue here. not in scss file, but in Vue SFC file with <script lang="scss">.
When I typo '$' for intellisense and selecting the suggestion, I got double $, like this: border: $$border;,
It can work well in scss files.
@nsznsznjsz Try disabling all addons aside for vscode-scss and see if you get the doubling $ behavior. In my case, it was Auto Comment Blocks causing issues, which may be the case for you as well. It seems like this issue is due to a conflicting plugin, and addressing it will be easier if @mrmlnc knows which plugin(s) is causing the issue.
I can also reproduce when only two extensions. PS. The another extension is Vetur. Because vue file support needed.
same here, duplicate $ with vetur. working on a vue project so i need to have vetur active.
