{
// Each configuration will be compiled into a custom syntax definition.
// The keys are the names of the configurations,
// and the values are objects specifying syntax options.
"configurations": {
"Default": {},
"React": {
"file_extensions": [ "js", "jsx" ],
"flow_types": true,
"jsx": true,
"custom_templates": {
"styled_components": true,
"tags": {
"css": "scope:source.js.css",
"createGlobalStyle": "scope:source.css", // v4 and above
"injectGlobal": "scope:source.css", // before v4
}
}
},
"TypeScript": {
"scope": "source.ts",
"file_extensions": [ "ts" ],
"typescript": true,
"custom_templates": {
"styled_components": true,
"tags": {
"css": "scope:source.js.css",
"createGlobalStyle": "scope:source.css", // v4 and above
"injectGlobal": "scope:source.css", // before v4
}
}
},
"TypeScript (JSX)": {
"scope": "source.tsx",
"file_extensions": [ "tsx" ],
"typescript": true,
"jsx": true,
"custom_templates": {
"styled_components": true,
"tags": {
"css": "scope:source.js.css",
"createGlobalStyle": "scope:source.css", // v4 and above
"injectGlobal": "scope:source.css", // before v4
}
}
},
},
// These options will be used for all of your configurations, unless you override them.
"defaults": {
"custom_template_tags": false,
"flow_types": false,
"jsx": false,
},
// A special configuration that will be used when other syntaxes embed the `source.js` scope.
// This exists to prevent infinite embedding loops in certain situations.
"embed_configuration": {
"name": "JS Custom (Embedded)",
"scope": "source.js",
"hidden": true,
"file_extensions": [],
"custom_template_tags": false,
"custom_templates": false,
},
// Whenever you change one or more configurations, automatically rebuild those configurations.
"auto_build": true,
// Whenever you run the close_tag command in these scopes, run jsx_close_tag instead.
// Set to `false` to disable.
"jsx_close_tag": "source.js, source.jsx, source.ts, source.tsx",
// When you remove a configuration, reassign all views from that syntax to this one.
// Set to `false` to disable.
"reassign_when_deleting": "scope:source.js",
}
Configuration name
No response
Description
When using generics with styled component, the element name is not styled, e.g.
Sublime Text build number
4121
Example Code
JS Custom Preferences
Configuration name
No response
Description
When using generics with styled component, the element name is not styled, e.g.
Without the generics:
Notice the color of
span
keyword.