Настройка sublime text 3 для веб-разработки и html верстки: ставим эффективные плагины

Commands

find_use

Just place your cursor on a class name, hit the F5 key (personal shortcut) and that’s it.

It will show you the different namespace that match your class, pick up one and you’re done.

PHP Companion will sort your uses statement in alphabetical order. This can be
configured to sort by line length with the user setting.

expand_fqcn

This command expands the class under the cursor to its FQCN (Fully Qualified Class Name).
You have two keys for this command F6 and shift+F6 (personal shortcut) that respectively expand
with and without the leading namespace separator .

import_namespace

Just hit the F4 key (personal shortcut), it will add the namespace definition based on the absolute
filename of the current file. I use a simple trick to determine where the
namespace begun, actually the namespace will start at the first CamelCased
folder.

If a namespace is already declared, the command will shout how crazy you are in
the status bar.

Warning: This feature requires a filename so the command won’t work in an unsaved buffer.

goto_definition_scope

Hit shift+F12 (personal shortcut) to search for a method definition based on the current scope. It will fallback to
the “goto_definition” command if a match was not found.

insert_php_constructor_property

Hit F7 (personal shortcut) to insert both a constructor argument and its according property. The property will be by default but you can change it with the setting.

implement

Place your cursor on a class, abstract class or an interface name and hit the F3 key (personal shortcut). Matching interfaces or classes will be shown. Select one and then import all or one of the methods from that interface or class.

See setting.

Using the External Libraries

(check each license in project pages)

  • “getImageInfo” to get width and height for images from “bfg-pages”. See: http://code.google.com/p/bfg-pages/
  • “desktop” to be able to open files with system handlers. See: http://pypi.python.org/pypi/desktop
  • “send2trash” to be able to send to the trash instead of deleting for ever!. See: http://pypi.python.org/pypi/Send2Trash
  • “hurry.filesize” to be able to format file sizes. See: http://pypi.python.org/pypi/hurry.filesize/
  • “Edit.py” ST2/3 Edit Abstraction. See: http://www.sublimetext.com/forum/viewtopic.php?f=6&t=12551

Installation

Using Sublime Package Control

:whitecheck_mark: _recommended
If you are using Sublime Package Control, you can easily install the bundle via the menu item.

Using Git

:robot: Alternatively you can install the bundle and keep up to date by cloning the repo directly into your directory in the Sublime Text application settings area.

Go to your Sublime Text directory and clone the repository using the command below:

Download Manually

:arrowdown: _not recommended – you won’t get updates! :rotating_light:
— Download the files using the GitHub .zip download option
— Unzip the files and rename the folder to ‘GDL’
— Copy the folder to your Sublime Text directory i.e.
— Windows
— OS X:

Settings

PackageSync provides the following user configurable settings:

  • prompt_for_location
    Decides if the user is asked for providing location to back up to or restore from.
    If set as true, user is prompted every time for a path upon back up or restore operation.
    If set as false, the location specified in settings is used. If no location has been specified in settings, by default user’s desktop is used for backup.

  • zip_backup_path
    The zip file path to use for backing up or restoring package list & user settings.

  • folder_backup_path
    The folder path to use for backing up or restoring package list & user settings.

  • list_backup_path
    The file path to use for backing up or restoring only the package list.

  • ignore_files
    The list of files to ignore when backing up.
    It supports wildcarded file names as well. Supported wildcard entries are ‘*’, ‘?’, » & ». For further details, please see the fnmatch documentation.

  • sync_package_sync_settings
    Toggle to determine whether to synchronize user setting for this package ().

  • include_files
    The list of files to include when backing up.
    Note: ignore_files holds higher priority as compared to include_files. So a file matching both the settings would essentially be ignored, as governed by ignore_files.
    It supports wildcarded file names as well. Supported wildcard entries are ‘*’, ‘?’, » & ». For further details, please see the fnmatch documentation.

  • ignore_dirs
    Directories to ignore when backing up.
    By default, all directories created by other packages are included. Only the directories specified in this list are ignored while syncing.

  • preserve_packages
    Decides if the existing packages are to be preserved while restoring from a backup.
    If set as false, existing packages & their settings are removed during restore operation. Only the packages included in the backup are restored.
    If set as true, PackageSync keeps the existing packages intact. Packages not included in the backup therefore remain unharmed even after restore operation. However, user-settings are overwritten if the backup contains user-settings for the same package.

  • online_sync_enabled
    Toggle to determine if online syncing is enabled or not.
    Turning this toggle ON/OFF requires Online Sync Folder to be setup first.

  • online_sync_folder
    Folder to use for syncing the backup with online syncing services.
    This should be the path to a folder inside the Google Drive, Dropbox or SkyDrive sync folder. Any other online syncing application can be used as well.

  • online_sync_interval
    The frequency (in seconds) at which PackageSync should poll to see if there are any changes in the local folder or in the online sync folder.
    PackageSync will keep your settings up to date across machines by checking regularly at this interval. If you face any performance issues you can increase this time via the settings and a restart of Sublime Text.

  • debug
    Whether or not PackageSync should log to the console. Enable this if you’re having issues and want to see PackageSync’s activity.

Inspiring Generosity, Gittip Style

by wbond
at 3:00pm
on Friday, August 9th, 2013

As part of the new site launch and the expanded package detail pages, I
wanted to start an experiment with making supporting package developers
even easier. Now granted, the part I’m playing in the process is rather
small since I am just providing links for each author. The real work that
makes this possible is Gittip, founded
by Chad Whitacre.

I was excited a few weeks ago to see the attention Gittip received when
John Resig announced the Khan Academy has started giving their developers
$5 a week to say thank you to the open source developers who make their
work possible.

My hope is that through exposing the work of the over 1,000 developers
who maintain various packages for Sublime Text, we can encourage each other
to say “thank you!”

In case you’ve never checked it out, Gittip offers weekly donation amounts
as small as $0.25. This may seen inconsequential, however if only 100 users
tip $0.25 a week, the developer can recieve $25. Considering there are
tens of thousands of users of some of the more popular packages, it should
be possible for these small donations to make a big impact and encourage
future open source work.

In closing I wanted to highlight some of the work a few contributors to
Package Control have been doing over the past months. These developers have
spent their time reviewing and giving feedback to fellow package developers
as they merge pull requests into the default channel:

Features

Backup/Restore

This allows you to backup the installed packages list & the user settings for each package. This backup can then be restored to any other device using PackageSync.

  • Backup/Restore via a Zip file (Recommended) — Backs up the installed packages list & their settings into a zip file. The zip file is the best portable format for offline syncing.
  • Backup/Restore via folder — Works the same way as the zip file, with the only difference that the contents are placed in a folder instead of an archived zip file.
  • Backup/Restore only Package List — Backs up only the installed packages list to a file. User settings for packages are ignored in this option.

Do note that this Backup/Restore operation only syncs your packages list and your user settings offline. But the actual installation of missing/new packages requires a working Internet connection.

Also, while restoring from PackageSync backup, please ensure that all files are closed. Files in open state would interrupt the restore operation, resulting in unforeseen errors.

Sync Online

This allows you to sync the packages & user settings in real time across different devices. For this, the installed packages list & user settings are be saved to & synced via a folder monitored by Dropbox, Google Drive or SkyDrive etc.

  • First Machine
    Turn on PackageSync’s online syncing module by setting the sync folder via “PackageSync: Sync Online — Define Online Sync Folder” from the command palette or Tools menu. In the ensuing input panel, give the complete path to any directory on your computer inside your Dropbox or Google Drive sync folder.

  • Second Machine (or after a fresh installation of Sublime Text)
    On your second machine please wait until all the backup files are available and then simply set the sync folder and PackageSync will automatically pull all available files from that folder. The following message dialog should appear which you just have to confirm.

Restart Sublime Text & Package Control will check for missing packages and install them automatically. From now on everything should work very smoothly.

[BONUS] Custom Statistics

Statistics of current file are represented in status-bar, based on , which is by default — as you can see it’s just a string containing special directives (see table bellow) and regular chars.

Directive Description
Amount of pending tasks
Amount of completed tasks
Amount of cancelled tasks
Sum of completed and cancelled tasks
Sum of all tasks
Ratio of to
Percent as pseudo graphics (absents if less than 10%)
Date of lastly completed task
Return tasks which matched by regex ; e.g.  — amounts of tasks with ; or {{@a

So you can customise it as you like, by adding to , e.g.

{
    "stats_format": "☐$o $d ✘$c",

    // if you want the statistics do not include the archived tasks:
    "stats_ignore_archive": true
}

Additional settings for progress bar

{
    "bar_full": "■",   // any char
    "bar_empty": "☐", // any char

    // if you want to avoid Unicode when copy stats — you can define replacements
    // e.g. to convert ■■■■■■☐☐☐☐ to 
    "replace_stats_chars": , ,  "], ]
}

Features

  • Familiar syntax: as a web-developer, you already know how to use Emmet. Abbreviation syntax is similar to CSS Selectors with shortcuts for id, class, custom attributes, element nesting and so on.
  • Dynamic snippets: unlike default editor snippets, Emmet abbreviations are dynamic and parsed as-you-type. No need to predefine them for each project, just type to convert any word into a tag.
  • CSS properties shortcuts: Emmet provides special syntax for CSS properties with embedded values. For example, will be exampled to .
  • Available for most popular syntaxes: use single abbreviation to produce code for most popular syntaxes like HAML, Pug, JSX, SCSS, SASS etc.

Usage

The first time you run one of the commands, it will ask you for your GitHub username and password in order to create a GitHub API access token, which gets saved in the Sublime GitHub user settings file. Your username and password are not stored anywhere, but if you would rather generate the access token yourself, see the “Generating Your Own Access Token” section below.

The following commands are available in the Command Palette:

  • GitHub: Switch Accounts

    Switch to another GitHub account (see Adding Additional Accounts below)

  • GitHub: Private Gist from Selection

    Create a private gist from the currently selected text (or, if nothing is selected,
    the contents of the active editor.

  • GitHub: Public Gist from Selection

    Create a public gist from the currently selected text (or, if nothing is selected,
    the contents of the active editor.

  • GitHub: Copy Gist to Clipboard

    Displays a quick select panel listing all of your gists, and selecting one will
    copy the contents of that gist to your clipboard.

  • GitHub: Copy Starred Gist to Clipboard

    Displays a quick select panel listing only your starred gists, and selecting one will
    copy the contents of that gist to your clipboard.

  • GitHub: Open Gist in Editor

    Displays a quick select panel listing all of your gists, and selecting one will
    open a new editor tab with the contents of that gist.

  • GitHub: Open Starred Gist in Editor

    Displays a quick select panel listing only your starred gists, and selecting one will
    open a new editor tab with the contents of that gist.

  • GitHub: Open Gist in Browser

    Displays a quick select panel listing all of your gists, and selecting one will
    open that gist in your default web browser.

  • GitHub: Open Starred Gist in Browser

    Displays a quick select panel listing only your starred gists, and selecting one will
    open that gist in your default web browser.

  • GitHub: Update Gist

    Update the gist open in the current editor.

The following commands require the Git plugin, available through the Package Manager. After installing, restart Sublime Text.

Note: These commands use the currently checked out branch to generate GitHub URLs. Each command also has a corresponding version, such as GitHub: Blame (master), that always uses the master branch, regardless of which branch is checked out locally. All commands except GitHub: Edit have a corresponding “permalink” version too, like GitHub: Blame (permalink), that uses the most recent commit on the current branch (more info).

  • GitHub: Open Remote URL in Browser

    Open the current file’s location in the repository in the browser. If you have any lines selected, they will be highlighted in the browser. The default protocol is ‘https’. The default remote used is » (no remote). If you want to change either of those set them in your GitHub.sublime-settings file for your specific account.

  • GitHub: Copy Remote URL to Clipboard

    Put the url of the current file’s location in the repository into the clipboard. If you have any lines selected, they will be included in the URL and highlighted when opened in a browser.

  • GitHub: Blame

    Open the GitHub blame view of the current file in the browser. If you have any lines selected, they will be highlighted in the browser.

  • GitHub: History

    Open the GitHub commit history view of the current file in the browser.

  • GitHub: View

    Alias for GitHub: Open Remote URL in Browser

  • GitHub: Edit

    Open the current file for editing on GitHub. I’m not sure why you’d want to do that, but it was easy enough to add.

Installing

With the Package Control plugin: The easiest way to install CodeFormatter is through Package Control, which can be found at this site: http://wbond.net/sublime_packages/package_control

Once you install Package Control, restart Sublime Text and bring up the Command Palette ( on OS X, on Linux/Windows). Select “Package Control: Install Package”, wait while Package Control fetches the latest package list, then select CodeFormatter when the list appears. The advantage of using this method is that Package Control will automatically keep CodeFormatter up to date with the latest version.

Without Git: Download the latest source from GitHub and copy the CodeFormatter folder to your Sublime Text “Packages” directory.

With Git: Clone the repository in your Sublime Text “Packages” directory:

git clone https://github.com/akalongman/sublimetext-codeformatter.git CodeFormatter

The “Packages” directory is located at:

  • OS X:

    ST2: ~/Library/Application Support/Sublime Text 2/Packages/
    ST3: ~/Library/Application Support/Sublime Text 3/Packages/
    
  • Linux:

    ST2: ~/.config/sublime-text-2/Packages/
    ST3: ~/.config/sublime-text-3/Packages/
    
  • Windows:

    ST2: %APPDATA%/Sublime Text 2/Packages/
    ST3: %APPDATA%/Sublime Text 3/Packages/
    

Configuration

The plugin will load its settings from (found in Preferences > Package Settings > Tern),
and recognized the following settings:

(boolean, defaults to false)
Whether to show argument hints (May impact responsiveness on slow machines or big projects).

(status, panel, tooltip, defaults to tooltip when available, otherwise status)status — When status is enabled, the status bar be used to display argument hints for the function call that the cursor is inside, and documentation. Unfortunately, the status bar is tiny and Sublime Text 2 provides no saner way to show these hints.panel — When panel is enabled, a new panel window opens to show arguments and documentation.tooltip — (only available on SublimeText build 3070+) When tooltip is enabled, a tooltip below the cursor is used.

(boolean, default to false)
Auto complete function arguments (similar to eclipse).
e.g. will show completion for which completes to
. The first argument will be selected.
Use to select the next argument.

Completions for smaller number arguments are supported.
e.g. in the extreme case, has 7 arguments, most of which are optional.
will show completions for , , … , .
Typing 3 (i.e. ) will select the completion which completes to .

(list of strings) The command to execute to start a
Tern server. The default is
.
If your node installation lives somewhere that’s not in the default
path, or your Tern checkout is not where the module expects it to be,
you’ll want to manually set this option.

(list of strings) An extra set of arguments to pass
to the Tern server. For example to suppress the
creation of files.

Tern uses files to configure loading libraries and
plugins for a project. See the for details.

(boolean, default to false)
If true, Prevents Sublime Text from adding its word completions to the completion list after all plugins have been processed. This consists of any word in the current document that is longer than 3 characters.

Automatically Showing Completions

Add to your
array in the Sublime Text preferences (found in Sublime Text > Preferences > Settings — User) to
automatically show completions after a dot is typed following an
object name.

Example:

"auto_complete_triggers"  {"selector" "text.html", "characters" "<"}, {"selector" "source.js", "characters" "."} 

If you don’t have already an item named , just add it after the last one (after adding a comma) like so:

Ensure that your preference is set to . It’s enabled by default.

Resetting Statistics

by wbond
at 9:30pm
on Wednesday, July 31st, 2013

Some users may have noticed a brief outage on the default channel server.
Just now I took the channel offline to corrent a long-running glitch in
package install statistics.

Due to a bug in the script that handled usage submissions from Package
Control, all operations including upgrades and removals were being counted
as installs. This manifested itself more severly for packages that have
had lots of versions. Each time a new version of the package was released
and users upgraded, installs and unique installs were incorrectly being
increased.

From early in the project I decided to maintain a full history of every
usage submission in case information needed to be reconstructed. The brief
outage that users experienced was a full wipe of all install statistics
and a regeneration of them from the master usage table. Over 35 million
submissions were processed and tallied up into new, much more accurate
statistics.

The unfortunately downside of this is that many package developers will see
a dip in their install numbers. With the upcoming release of Package
Control 2.0 and the new website, the source code for recording and
displaying all of this information will be open source. Hopefully this will
present the opportunity for other developers to both help improve, but also
review the codebase to help catch such mistakes sooner.

Other Commands

Add Channel
Adds another channel that lists repositories. This is uncommon,
but allows users to create a custom channel of repositories to share.
Create Package File
For package developers. Takes a package folder and generates a
.sublime-package file that can be uploaded onto the web and
referenced in the packages.json file for a repository.
Create Binary Package File
For package developers. Creates a .sublime-package file that does not include
the source .py files, but instead the .pyc bytecode
files. This is useful to distribute commercial packages. Be sure
to check the resulting .sublime-package file to ensure that
at least one .py file is included so that Sublime Text will
load the package.
Disable Package
Disables a package, which causes any Python scripts to be unloaded,
and other files such as .sublime-keymap files to be
unloaded also.
Discover Packages
Opens up a web browser to Browse.
Enable Package
Re-enables a package that has been disabled.
Upgrade/Overwrite All Packages
This will upgrade ALL packages, including ones
that were not installed via Package Control. If you are developing
a custom copy of a package, you may not want to use this command.
Upgrade Package
Show a list of packages that are available for upgrade and let the
user pick which they would like to update.
Install Local Dependency
Show a quick panel of folders in the Packages/ that are not
currently installed as dependencies, but have a
.sublime-dependency file. Once a dependency is selected, a
loader will be installed, allowing the dependency to be used for
development, without having to submit it to the default channel
first.
Package Control Settings – Default
Open the default settings file, which can be used as a reference
for changing the User settings. Any changes to this file will
be lost whenever Package Control is automatically or manually
upgraded.
Package Control Settings – User
Opens the user’s settings for Package Control. Any settings changes
should be saved here so they are not overwritten when a new version
of Package Control is released.

Generating Your Own Access Token

If you feel uncomfortable giving your GitHub username and password to the plugin, you can generate a GitHub API access token yourself. Just open up a Terminal window/shell (on OS X, Linux or Cygwin), and run:

curl -u username -d '{"scopes":, "note": "sublime-github"}' https://api.github.com/authorizations

where is your GitHub username. You’ll be prompt for your password first. Then you’ll get back a response that includes a 40-digit “token” value (e.g. ). Go to Sublime Text 2 -> Preferences -> Package Settings -> GitHub -> Settings — User, and insert the token there. It should look like:

{
    "github_token": "6423ba8429a152ff4a7279d1e8f4674029d3ef87"
}

Restart Sublime.

That’s it!

Emmet Sublime Text 3

Это плагин раньше назывался Zen Coding. Он позволяет писать сокращенные коды HTML и CSS. Например, набрав следующее:

#page>div.logo+ul#navigation>li*5>a{Item $}

И нажав клавишу tab, вы получите:

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

После установки Emmet с помощью Sublime Text Package Control перезапустите Sublime Text. Чтобы Emmet работал, необходимо установить синтаксис для документа. Иначе он работать не будет:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

И нажмите tab. Вы получите:

<nav id="menuSystem" class="navMenu isOpen">
  <div id="hotelLogo">
    <div class="navMenuIcon logoIcon"></div>
    <div id="arrowPointer"></div>
    <ul id="navMenuMain">
      <li class="navMenuItem navMenuItem001">
        <div class="navMenuIcon">Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li class="navMenuItem navMenuItem002">
        <div class="navMenuIcon">Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

Чтобы изучить все доступные сокращения, уйдет много времени. Это позволит писать HTML-код намного быстрее.

Roadmap and wish list

  • Better Markdown syntax highlighting, including Multimarkdown and Pandoc extras like footnotes, tables, and citations.
  • Create commands for Pandoc conversion from R Markdown to other formats? (or maybe just use actual Pandoc packages for that).

Manual patch for LaTeXTools

If you want to use the LaTeXTools plugin, you need to patch three files to make the standard LaTeXTools build system knit and typest the file. Make these three changes (huge thanks to Heberto del Rio for this!):

Important: Copying and pasting code from GitHub can do unexpected things to indentation (replacing tabs with spaces) and can temporarily break LaTeXTools. Make sure the indentation is correct after pasting.

File 1:

Add to the list of accepted LaTeX file types, like so:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>fileTypes</key>
    <array>
        <string>tex</string>
        <string>Rnw</string>
    </array>

Instructions for Sublime Text 3: In ST3, default packages are hidden deep within ST itself and are difficult to access, let alone edit. However, you can still get to relatively easily if you install the PackageResourceViewer plugin. After installing it, run the “PackageResourceViewer: Open Resource:” command through the command pallete (command/ctrl + shift + p) and navigate to LaTeX.tmLanguage. After making changes, ST will save a copy of the file in a more accessible location (), overriding the default built-in file.

File 2:

Find this:

if self.tex_ext.upper() != ".TEX":
    sublime.error_message("%s is not a TeX source file: cannot compile." % (os.path.basename(view.file_name()),))
    return

And replace with this:

if (self.tex_ext.upper() != ".TEX") and (self.tex_ext.upper() != ".RNW"):
    sublime.error_message("%s is not a TeX or Rnw source file: cannot compile." % (os.path.basename(view.file_name()),))
    return

Then find this:

# We should now be able to construct the builder object
self.builder = builder_class(self.file_name, self.output, builder_settings, platform_settings)

And replace with this:

if self.tex_ext.upper() == ".RNW":
    # Run Rscript -e "library(knitr); knit('" + self.file_name + "')"
    os.system("Rscript -e \"library(knitr); knit('"+ self.file_name +"')\"")
    self.file_name = self.tex_base + ".tex"
    self.tex_ext = ".tex"

# We should now be able to construct the builder object
self.builder = builder_class(self.file_name, self.output, builder_settings, platform_settings)

(If you want to use instead of , change the command accordingly.)

File 3:

Find this:

if texExt.upper() != ".TEX":
    sublime.error_message("%s is not a TeX source file: cannot jump." % (os.path.basename(view.fileName()),))
    return

And replace with this:

if (texExt.upper() != ".TEX") and (texExt.upper() != ".RNW"):
    sublime.error_message("%s is not a TeX or Rnw source file: cannot jump." % (os.path.basename(view.fileName()),))
    return

File 4:

Find this:

if texExt.upper() != ".TEX":
    sublime.error_message("%s is not a TeX source file: cannot view." % (os.path.basename(view.fileName()),))
    return

And replace with this:

if (texExt.upper() != ".TEX") and (texExt.upper() != ".RNW"):
    sublime.error_message("%s is not a TeX or Rnw source file: cannot view." % (os.path.basename(view.fileName()),))
    return

If you want to be able to use multiple files and to find your bib file, you’ll also need to change the following files:

File 5:

Find this:

mroot = re.match(r"%\s*!TEX\s+root *= *(.*(tex|TEX))\s*$",line)

And replace with this:

mroot = re.match(r"%\s*!TEX\s+root *= *(.*(tex|rnw))\s*$",line, flags=re.IGNORECASE)

F12 key

(Please note that from version 2.122104 this package no longer provides the key, you need to manually add it to your sublime-keymap file (see next section))

F12 key allows you to open the current file in browser.

allows you to set the url of your local server, opened via F12

allows you to set the url of your production server, opened via ALT+F12

With absolute paths

  • Right click any file on sidebar and select: “Project -> Edit Projects Preview URLs”
  • Edit this file, and add your paths and URLs with the following structure:

    {
    “S:/www/domain.tld”:{
    “url_testing”:“http://testing”,
    “url_production”:“http://domain.tld”
    },
    “C:/Users/luna/some/domain2.tld”:{
    “url_testing”:“http://testing1”,
    “url_production”:“http://productiontld2”
    }
    }

With relative paths

Imagine we have a project with the following structure

Project/ < - root project folder
Project/libs/
Project/public/ < - the folder we want to load as "http://localhost/"
Project/private/
Project/experimental/ < - other folder we may run as experimental/test in another url "http://experimental/"

Then we create configuration file:

with content:

{
    "public/":{
        "url_testing":"http://localhost/",
        "url_production":"http://domain.tld/"
    },
    "experimental/":{
        "url_testing":"http://experimental/",
        "url_production":"http://domain.tld/"
    },
    "":{
        "url_testing":"http://the_url_for_the_project_root/",
        "url_production":"http://the_url_for_the_project_root/"
    }
}

You can create config files anywhere.

F12 key conflict

On Sublime Text 3 key is bound to command by default. This package was conflicting with that key, this no longers happens. You need to manually add the keys now: Go to and add any of the following:

,
            "command": "side_bar_open_in_browser" ,
            "args":{"paths":[], "type":"testing", "browser":""}
        },
        { "keys": ,
            "command": "side_bar_open_in_browser",
            "args":{"paths":[], "type":"production", "browser":""}
        },
        {
            "keys": ,
            "command": "side_bar_new_file2"
        },
        {
            "keys": ,
            "command": "side_bar_rename"
        },
    ]

Installation

Package Control

The preferred method of installation is via Sublime Package Control.

  1. Install Sublime Package Control
  2. From inside Sublime Text, open Package Control’s Command Pallet: CTRL SHIFT P (Windows, Linux) or CMD SHIFT P (Mac).
  3. Type , select command and hit Return. A list of available packages will be displayed.
  4. Type , select the package and hit Return. The package will be downloaded to the appropriate directory.

Manual Installation

  1. Download or clone this repository to a directory in the Sublime Text Packages directory for your platform:

    • Mac:
    • Windows:
    • Linux:
  2. Restart Sublime Text to complete installation.

The features listed above should now be available.

Case Conversion

Позволяет переключаться между snake_case, camelCase, PascalCase и т. д. После установки плагина с помощью Package Control (введите «pic» для быстрого доступа к Install Package), попробуйте:

До: navMenu

Нажмите: ;;c, затем ;;c

После: nav_menu

Обратите внимание, что это не будет работать должным образом, если вы попытаетесь преобразовать целую строку. До:

До: <nav id=»menu_system» class=»nav_menu isOpen»>

Нажмите: ;;c, затем ;;c (для camelCase)

После: navIDMenuSystemClassNavMenuIsOpen

Если вы являетесь веб-разработчиком, использующим  Package Control Sublime Text 3, советую попробовать перечисленные в этой статье плагины! Если они вам не понравятся, всегда можно удалить их с помощью Package Control: Remove Package.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector