Intellisense autocomplete issue in latest build

ekfuhrmann commented 5 years ago

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 $.

inellisense-break

danielpost commented 5 years ago

I'm having the exact same issue—unfortunately had to disable the extension until this is fixed.

cabans commented 5 years ago

Same issue here, seems only works first time and before that, all is double $.

FYI, I'm on MacOS Mojave.

leoland commented 5 years ago

Running into this as well...

ekfuhrmann commented 5 years ago

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).

AlexandruDinulescu commented 5 years ago

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.

ahenriksen-inferno commented 5 years ago

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.

danielpost commented 5 years ago

@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!

ahenriksen-inferno commented 5 years ago

@danielpost You’re welcome and thank you for making it even better!

ekfuhrmann commented 5 years ago

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.

ahenriksen-inferno commented 5 years ago

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 !

ahenriksen-inferno commented 5 years ago

@ekfuhrmann there seems to be two of those vscode-styled-component plugins... here's the other one that I found that looks more recent.

ekfuhrmann commented 5 years ago

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!

ahenriksen-inferno commented 4 years ago

Hey! It's nice to see this project alive again and getting updates! @octref @mrmlnc

mrmlnc commented 4 years ago

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?

ahenriksen-inferno commented 4 years ago

@mrmlnc yes it is:

SCSS Intellisense Autocomplete Issue

mrmlnc commented 4 years ago

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:

ezgif com-video-to-gif

ekfuhrmann commented 4 years ago

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.

yzx9 commented 4 years ago

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.

ekfuhrmann commented 4 years ago

@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.