sublime_packages backups For Front-End Developer
Injected plug-in list
- Package Control
- SideBarEnhancements
- DocBlockr
- TrailingSpaces
- SyncedSideBar
- Sublime Terminal
- Emmet
- HTML-CSS-JS Prettify
- Bracket Highlighter
For more nice advice, see How to gracefully use Sublime Text.
Preferences.sublime-settings
If you do some of the targeted settings, she(Sublime) will be better to provide you with services, such as this(PS: You can quickly open the settings, through the shortcut keys: Command + ,
windows: Ctrl + ,
):
{
"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS",
"node_modules"
],
"font_size": 18,
"ignored_packages":
[
"Vintage"
],
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"draw_minimap_border": true,
"bold_folder_labels": true,
"auto_find_in_selection": true,
"highlight_line": true
}
Preferences.Key Bindings
[
{ "keys": ["command+\\"], "command": "toggle_side_bar" },
{ "keys": ["command+shift+x"], "command": "toggle_comment", "args": { "block": true } },
{ "keys": ["command+alt+p"], "command": "prompt_select_workspace" },
{ "keys": ["command+shift+d"], "command": "delete_trailing_spaces"}
]
Command Description
- toggle_side_bar: Quick Quick side bar.
- toggle_comment: Quick Quick comment.
- prompt_select_workspace: Restore Quick Switch Project shortcut.
- delete_trailing_spaces: Delete trailing spaces.
- paste_from_history: You can create key bindings composed of multiple keys.
Additional instructions
You can create key bindings composed of multiple keys. Like this:
{ "keys": ["ctrl+k", "ctrl+v"], "command": "paste_from_history" }
When you use this combination configuration, you have to press Ctrl + K
first, then release K
(or not), and finally press V
.
Of course, if you are using Windows, you should replace the command
with ctrl
, For more nice advice, see How to gracefully use Sublime Text.
React Using Sublime
DevelopSetting as the default syntax
- Find
Babel
& install it throughPackage Control
. - Select
View
from the menu, - Then
Syntax
->Open all with current extension as...
->Babel
->JavaScript (Babel)
.
!
‼️ : You should not skip this option ——Open all with current extension as...
, good luck.
Setting a Color Scheme
Babel
comes bundled with Next
and Monokai
from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences
->
Color Scheme
->
Babel
For more information, See babel-sublime](https://github.com/babel/babel-sublime) please.
Emmet
compatible jsx
Open preferences
-> Key bindings
- Users
,Copy the code below to []
inside:
{
"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": "source.js",
"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"
}
]
}