microsoft / vscode

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

Feature request: snippets inside of tagged template literals #46792

Closed hollandThomas closed 6 years ago

hollandThomas commented 6 years ago

I'd like to suggest a feature, if possible. When working with styled-components, you often find yourself writing things like ${props => props.theme.colors.gray.dark}; inside of a tagged template literal kinda like this:

const Wrapper = styled.div`
  color: ${props => props.theme.colors.gray.dark};
`;

For that I made a snippet. Unfortunately one cannot seem to invoke snippets inside of tagged templates or any string for that matter.

Is adding a feature that allows for working with snippets inside of strings/stringish things like tagged template literals possible? Or would that violate the expected behavior for pressing tab with the cursor being inside of a sting?

Thanks for looking into this!

jrieken commented 6 years ago

Please share the snippet and the language the snippet is configured for. Also use F1 > Inspect TM Scopes to see what language is used inside the tagged string

hollandThomas commented 6 years ago

Thanks the fast reply. You are right. I configured the snippet for Babel JavaScript but it needs to be configured for styled-css. For completion and anyone interested, this is the snippet:

"theme": {
    "prefix": "thm",
    "body": [
        "${props => props.theme.${1:property}};"
    ],
    "description": "Styled Components theme selector"
},