JSX
Language Definitions for JSX files.
Details
Installs
- Total 211K
- Win 78K
- Mac 95K
- Linux 38K
Apr 11 | Apr 10 | Apr 9 | Apr 8 | Apr 7 | Apr 6 | Apr 5 | Apr 4 | Apr 3 | Apr 2 | Apr 1 | Mar 31 | Mar 30 | Mar 29 | Mar 28 | Mar 27 | Mar 26 | Mar 25 | Mar 24 | Mar 23 | Mar 22 | Mar 21 | Mar 20 | Mar 19 | Mar 18 | Mar 17 | Mar 16 | Mar 15 | Mar 14 | Mar 13 | Mar 12 | Mar 11 | Mar 10 | Mar 9 | Mar 8 | Mar 7 | Mar 6 | Mar 5 | Mar 4 | Mar 3 | Mar 2 | Mar 1 | Feb 28 | Feb 27 | Feb 26 | Feb 25 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 6 | 23 | 20 | 28 | 27 | 36 | 24 | 18 | 19 | 29 | 27 | 24 | 20 | 23 | 23 | 14 | 35 | 29 | 31 | 25 | 28 | 17 | 13 | 28 | 21 | 29 | 23 | 23 | 22 | 17 | 26 | 25 | 34 | 27 | 27 | 21 | 26 | 19 | 26 | 22 | 19 | 25 | 21 | 19 | 26 | 25 |
Mac | 4 | 10 | 16 | 18 | 25 | 20 | 13 | 9 | 8 | 19 | 12 | 27 | 22 | 22 | 9 | 12 | 17 | 28 | 25 | 21 | 17 | 11 | 6 | 16 | 27 | 26 | 27 | 21 | 12 | 12 | 20 | 13 | 24 | 17 | 13 | 11 | 18 | 15 | 13 | 17 | 19 | 13 | 5 | 6 | 14 | 30 |
Linux | 3 | 9 | 13 | 7 | 7 | 7 | 9 | 10 | 9 | 8 | 10 | 10 | 7 | 11 | 8 | 8 | 7 | 11 | 16 | 13 | 9 | 10 | 10 | 12 | 13 | 10 | 12 | 7 | 7 | 13 | 12 | 12 | 11 | 12 | 7 | 7 | 11 | 10 | 12 | 19 | 19 | 14 | 9 | 3 | 10 | 12 |
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