vscode-styled-components
vscode-styled-components copied to clipboard
styled-components
Auto-completion affects non-styled syntax which resulting in semicolon suffix in Object.
Description
When I typing inside original style, it triggers vscode-styled-components auto-completion with semicolon suffix.
Screenshot
Expected behavior
Don't bother original style syntax.
Build environment (please complete the following information):
- OS: 11.2.2 (20D80)
- VSCode Version: 1.56.2
- Extension Version 1.6.3
This issue also seems to happen when autocompleting React component props.
GIF
Does it have any config to disable this feature? (I haven't found it)
I don't want to disable this extension but this problem bother me. 🥺😰
Is someone able to knock up a small test case? Im unable to reproduce this issue :/ When i try to use style i don't get the auto complete in those situations.
I think it may be fixable without having to disable it but for that i need a tiny test case
@jasonwilliams I tried to find a way to reproduce it, but I don't know how...
However, I found it was caused by 'extension.insertColonOrSemiColon' command. Source code at https://github.com/styled-components/vscode-styled-components/blob/4c059a3f203aea2cb62508608df03bcd12fd4a84/src/insertColonCommand.ts#L27
I can reproduce this issue in any object.
@jasonwilliams the following typeScript code reproduces the issue:
interface exampleType {
color?: string;
randomOther?: string;
}
let example: exampleType = {
// press CTRL+SPACE and select "color" to reproduce the issue
// note the issue doesn't occur when autoCompleting randomOther
};
it seems like any object key that is also a css property causes a problem
Hmm I think we should just get rid of this feature and hope the typescript css/sass service can provide it instead. @RJWadley id accept a PR which just removes this command. I don’t think there’s any good way to know when we’re in a good place to enable it on/off