JSX
Language Definitions for JSX files.
Details
Installs
- Total 225K
- Win 85K
- Mac 99K
- Linux 41K
| May 28 | May 27 | May 26 | May 25 | May 24 | May 23 | May 22 | May 21 | May 20 | May 19 | May 18 | May 17 | May 16 | May 15 | May 14 | May 13 | May 12 | May 11 | May 10 | May 9 | May 8 | May 7 | May 6 | May 5 | May 4 | May 3 | May 2 | May 1 | Apr 30 | Apr 29 | Apr 28 | Apr 27 | Apr 26 | Apr 25 | Apr 24 | Apr 23 | Apr 22 | Apr 21 | Apr 20 | Apr 19 | Apr 18 | Apr 17 | Apr 16 | Apr 15 | Apr 14 | Apr 13 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | 2 | 2 | 3 | 6 | 1 | 3 | 5 | 4 | 1 | 5 | 14 | 7 | 4 | 1 | 6 | 3 | 3 | 3 | 9 | 6 | 3 | 3 | 8 | 6 | 5 | 6 | 4 | 8 | 2 | 2 | 3 | 0 | 6 | 3 | 4 | 4 | 2 | 2 | 7 | 9 | 6 | 2 | 3 | 5 | 7 | 8 |
| Mac | 4 | 3 | 2 | 3 | 5 | 3 | 3 | 1 | 2 | 1 | 4 | 3 | 3 | 4 | 0 | 1 | 2 | 3 | 7 | 2 | 3 | 0 | 1 | 2 | 8 | 5 | 5 | 2 | 0 | 1 | 4 | 3 | 4 | 3 | 3 | 0 | 0 | 0 | 5 | 4 | 6 | 2 | 0 | 4 | 6 | 5 |
| Linux | 0 | 1 | 3 | 2 | 3 | 1 | 6 | 1 | 3 | 4 | 0 | 5 | 0 | 0 | 2 | 4 | 3 | 4 | 2 | 4 | 4 | 5 | 5 | 2 | 4 | 6 | 3 | 0 | 0 | 4 | 5 | 2 | 2 | 3 | 1 | 0 | 1 | 2 | 3 | 5 | 1 | 0 | 0 | 4 | 4 | 5 |
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