https://github.com/nicejade/sublime_packages
✍️ SublimeText Pageages Backups For Front-End Developer
https://github.com/nicejade/sublime_packages
front-end sublime-text-3
Last synced: about 1 year ago
JSON representation
✍️ SublimeText Pageages Backups For Front-End Developer
- Host: GitHub
- URL: https://github.com/nicejade/sublime_packages
- Owner: nicejade
- Created: 2016-12-09T04:15:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-11T14:32:59.000Z (over 8 years ago)
- Last Synced: 2025-04-09T17:10:59.448Z (about 1 year ago)
- Topics: front-end, sublime-text-3
- Language: Python
- Homepage: https://jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/
- Size: 5.31 MB
- Stars: 37
- Watchers: 5
- Forks: 36
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](http://jeffjade.com/2015/12/15/2015-04-17-toss-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](http://jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/).
## **Develop [React](https://reactjs.org/) Using Sublime**
### Setting as the default syntax
- Find `Babel` & install it through `Package 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](https://github.com/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"
}
]
}
```