第一項工具,打註解時有快鍵JC+ tab,在render中要打註解的話,必須要像{/* A JSX comment */}的格式,但是每次都要這樣打很麻煩,所以在sublime上方工具列中
Preferences
→ Browse Packages
→ Put snippet in User
folder.render() {
return (
<div>
<!-- This doesn't work! -->
</div>
)
}
{/* A JSX comment */}
{/*
Multi
line
comment
*/}
jsx-comment.sublime-snippet檔案內容為:<snippet><content><![CDATA[{/* ${1:JSX Comment} */}]]></content><!-- Hit `jc` in any JS document to get a JSX comment --><tabTrigger>jc</tabTrigger><scope>source.js</scope></snippet>
第二項工具,在render中可以使用Emmet+React JSX自動補齊的功能,在Sublime上方工具列中,Preference->Key Bindings -> user default中把下面程式碼貼上,之後就可以使用Emmet的功能只在render中,例如:
ul>li*6、div.ABC、div#ABC、h1...等等加tab就可以自動補齊的功能
ul>li*6、div.ABC、div#ABC、h1...等等加tab就可以自動補齊的功能
{ | |
"keys": ["tab"], | |
"command": "expand_abbreviation_by_tab", | |
// put comma-separated syntax selectors for which | |
// you want to expandEmmet abbreviations into "operand" key | |
// instead of SCOPE_SELECTOR. | |
// Examples: source.js, text.html - source | |
"context": [ | |
{ | |
"operand": "meta.group.braces.round.js, text.html", | |
"operator": "equal", | |
"match_all": true, | |
"key": "selector" | |
}, | |
// run only if there's no selected text | |
{ | |
"match_all": true, | |
"key": "selection_empty" | |
}, | |
// don't work if there are active tabstops | |
{ | |
"operator": "equal", | |
"operand": false, | |
"match_all": true, | |
"key": "has_next_field" | |
}, | |
// don't work if completion popup is visible and you | |
// want to insert completion with Tab. If you want to | |
// expand Emmet with Tab even if popup is visible -- | |
// remove this section | |
{ | |
"operand": false, | |
"operator": "equal", | |
"match_all": true, | |
"key": "auto_complete_visible" | |
}, | |
{ | |
"match_all": true, | |
"key": "is_abbreviation" | |
} | |
] | |
} |