Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

sublime_packages backups For Front-End Developer

Injected plug-in list

  • Package Control
  • SideBarEnhancements
  • Doc​Blockr
  • 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.

Develop React 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. 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"
    }
  ]
}

About

✍️ SublimeText Pageages Backups For Front-End Developer

Topics

Resources

Releases

No releases published

Packages

No packages published

Languages