Category Archives: Sublime

Sublime and SFTP

Sublime Text

Sublime

Ever wanted to directly edit your files on your remote server. This can be done with Sublime and the SFTP plugin. Follow the steps below to setup your SFTP client with Sublime.

First install Sublime, you can find it here. After installation startup sublime and install the package manager. Follow the instructions that you can find here.

Okay, now we have sublime and its package manager installed. Next install the SFTP sublime plugin. Start the package manager in Sublime; type Cmd + Shift + P. Type Install Package and then type SFTP.

Now we have to create an account on the remote server. Setting up an account on your FTP server is not part of this post.

Create a new server setup by choosing File -> SFTP/FTP -> Setup server.

Change the correct items in the example shown and save this file

{
// The tab key will cycle through the settings when first created
// Visit http://wbond.net/sublime_packages/sftp/settings for help

// sftp, ftp or ftps
"type": "sftp",

"sync_down_on_open": true,
"sync_same_age": true,

"host": "example.com",
"user": "username",
//"password": "password",
//"port": "22",

"remote_path": "/example/path/",
//"file_permissions": "664",
//"dir_permissions": "775",

//"extra_list_connections": 0,

"connect_timeout": 30,
//"keepalive": 120,
//"ftp_passive_mode": true,
//"ftp_obey_passive_host": false,
//"ssh_key_file": "~/.ssh/id_rsa",
//"sftp_flags": ["-F", "/path/to/ssh_config"],

//"preserve_modification_times": false,
//"remote_time_offset_in_hours": 0,
//"remote_encoding": "utf-8",
//"remote_locale": "C",
//"allow_config_upload": false,
}

Now you can browse your server. Goto File -> SFTP/FTP -> Browse server. Choose the server you want to browse. If everything is correctly setup a list of files will appear. You can now edit these files as were they local files.

Share

Sublime 3 and the Emmet plugin

After installing Sublime 3 and the package control center you should also install the incredible Emmet plugin.

This plugin helps you write HTML / CSS code lightning fast.
emmetio

For example:
Create a new document in Sublime and save it as index.hml. Inside the sublime editor type

html:5<press tab>

The following HTML document will be generated:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

After you press tab  a default HTML 5 template will be generated. The cursor is positioned at the <title>  tag; this is the most likely item you are going to change. Type your title and move the cursor after the <body>  tag. The type:

ul>li*2>a.link-${$}<press tab>

After you press tab the following HTML will be generated:

<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>

Explanation of the shortcode:
Create an ul  and with that 2 li  items. Within theli  ahref  is generated with a class link followed by a sequence number. The {$}  inserts the sequence number as text.

Share

Install sublime text 2 package control

Install sublime text 2 package control to easily download and install plugins for the sublime text editor. First open up the console window: view -> show console.

Then past the following command into the console and press enter:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

For Sublime Text 3

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

 

 

Restart sublime and show the command pallet with Ctrl+ Shift + P. Type “package contol” and select “install package”. A list of installable packages will show up. Choose your packages for installation.

If you are behind a proxy you should add it to your Sublime settings. Goto Preferences -> Settings User and add the following line (add a ‘,’ to the line above if needed):

"http_proxy": "http://username:password@your.proxy.tld:port"
Share