JSX
Language Definitions for JSX files.
Details
Installs
- Total 228K
- Win 87K
- Mac 100K
- Linux 41K
Oct 8 | Oct 7 | Oct 6 | Oct 5 | Oct 4 | Oct 3 | Oct 2 | Oct 1 | Sep 30 | Sep 29 | Sep 28 | Sep 27 | Sep 26 | Sep 25 | Sep 24 | Sep 23 | Sep 22 | Sep 21 | Sep 20 | Sep 19 | Sep 18 | Sep 17 | Sep 16 | Sep 15 | Sep 14 | Sep 13 | Sep 12 | Sep 11 | Sep 10 | Sep 9 | Sep 8 | Sep 7 | Sep 6 | Sep 5 | Sep 4 | Sep 3 | Sep 2 | Sep 1 | Aug 31 | Aug 30 | Aug 29 | Aug 28 | Aug 27 | Aug 26 | Aug 25 | Aug 24 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 6 | 1 | 4 | 3 | 1 | 0 | 0 | 1 | 0 | 2 | 0 | 1 | 1 | 2 | 2 | 0 | 3 | 0 | 1 | 2 | 7 | 3 | 2 | 0 | 0 | 1 | 5 | 2 | 4 | 2 | 2 | 1 | 3 | 3 | 2 | 2 | 1 | 4 | 2 | 4 | 2 | 4 | 1 | 0 | 2 |
Mac | 3 | 1 | 3 | 2 | 1 | 4 | 2 | 0 | 0 | 2 | 2 | 1 | 0 | 3 | 1 | 1 | 1 | 0 | 2 | 2 | 3 | 1 | 0 | 0 | 1 | 2 | 4 | 1 | 2 | 0 | 0 | 1 | 1 | 2 | 1 | 2 | 2 | 1 | 2 | 5 | 1 | 2 | 1 | 1 | 1 | 4 |
Linux | 2 | 9 | 0 | 1 | 5 | 2 | 2 | 1 | 1 | 1 | 1 | 0 | 0 | 1 | 3 | 1 | 2 | 2 | 0 | 1 | 1 | 1 | 0 | 1 | 2 | 1 | 2 | 1 | 0 | 0 | 0 | 0 | 0 | 1 | 2 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 1 | 1 | 3 | 0 |
Readme
- Source
- raw.githubusercontent.com
JSX-SublimeText
Language Definitions for JSX files.
Emmet Support
You will need to add a keyboard shortcut to tab complete in JSX files.
open up Preferences > Key Bindings - user
and add this entry:
{
"keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
{
"operand": "source.js.jsx",
"operator": "equal",
"match_all": true,
"key": "selector"
},
{
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}
]
},
{
"keys": ["tab"], "command": "next_field", "context": [
{
"key": "has_next_field",
"operator": "equal",
"operand": true
}
]
}
Scope Naming
https://www.sublimetext.com/docs/3/scope_naming.html
JSX-SublimeText chooses to have a slim scope surface area because over naming scopes increases specificity and make it hard on color schemes.
There are 5 main areas of scope: Keywords/Support, Entities, Constants, Strings & Comments.
Keywords/Support
JSX-SublimeText opts to keep all javascript reserved words under one scope so as to distinguish between the js lanugage and the authors code.
All built-in objects and functions are placed under support.class.js
and support.function.js
Entities
The entity scopes are generally assigned to the names of data structures, types and other uniquely-identifiable constructs in code and markup.
JSX-SublimeText only makes two entity assignments. First to the actual jsx/xml sections (entity.name.tag
) and second to flow/ts type declarations (entity.name.type
).
Issues & Problems
The line between specific/general syntax highlighting seems to be a bit of personal one. Due to my personal preference of less hilighting JSX-SublimeText is simpler than other JS/JSX syntaxes. If you find a part of the syntax is breaking your color scheme or you don't like a choice please feel free to open an issue. I'm more than happy to be told I'm wrong or convinced of a better way.
Reference
// Keywords
keyword.control.js // js reserved words
support.class.js // built-in objects
support.function.js // built-in functions
// Entities
entity.name.tag.jsx // JSX
entity.name.type // types
// Constants
constant.character.escape // escaped characters
constant.language.js // true|false|null|Infinity|NaN|undefined
constant.numeric.js // numbers
constant.character.entity.html // html character entities
// Strings
string.quoted.js
string.regexp.js
// Comments
comment.block.js // block.comments
comment.block.jsx // jsx comments
comment.line.js // line comments