All posts tagged “Sublime”

How to Insert File Path Quickly in Sublime Text [Quicktip]

Sublime Text is a very minimal code editor. It comes without much of a GUI; even the settings are done in text-based fashion. This minimalism helps us to focus more on writing the codes rather being distracted with the code editor’s dressing. But this also comes with one question in mind: How do we insert a file path?

Other code editors, like Coda for example, allow you to insert a file path for images, or stylesheets by simple drag-n-drop — just drop the file onto the working area.

Sublime Text, on the other hand, does not have such a feature. You might have to type the path in – which is no fun. Here’s an alternative that will make inserting file paths easier and more streamlined.

My First Solution

My first solution was using a plugin called SidebarEnhancement. This plugins adds some extra items to the contextual menu of the sidebar including Copy Path. Option, right-click on one of the files in your project, right-click, and select the Copy Path option.

There you have the path of the selected file. And this way is better than having to set down the file path with your hands. Not good enough? There is another better plugin for the job.

A Better Solution

This second plugin is called AutoFileName. You might be familiar with the code auto-completion feature in Sublime Text — this plugin brings a similar auto-complete functionality for file name. You can install this plugin via Package Control.

Assuming that your project has an HTML file, and two folders; one for storing stylesheets and another for images, within the <head> tag of the HTML file, you may want to link a stylesheet. With this plugin installed, you can simply put the cursor in the href, and it will show a list of files and folders that are at the same directory level.

Then, selecting the css will list the files and folders in it.

Looks more efficient and streamlined, right? You don’t have to repeatedly “copy and paste” every time you need to insert a file path. This plugin does the guess work for us.

Inserting Image Path

This is, I think, is the most helpful feature from AutoFileName. When you insert an image, it will identify the image size, the width and the height. Then it will also automatically populate the image width and height attribute with the identified size. Perfect!

Final Thought

These are the two plugins that regularly accompany my daily work. But I now use SidebarEnhancement primarily to manage the projects that are attached in the Sublime Text sidebar. For inserting file path, I use AutoFileName which does the job perfectly. Lastly, I hope you find this quicktip useful, and that it will help increase your productivity.





hongkiat.com

Plugins & Extensions That Give More Power to Sublime Text 2

If coding is what you’re doing daily and nightly probably you have your favorite code editor. But if you’re just starting we’d like to give you all the pros of Sublime Text 2 code editor as well as to share number of plugins and extensions for it.
Template Monster Blog

12 Most-Wanted Sublime Text Tips and Tricks

You probably know by now that we are fans of Sublime Text. It might look a very simple code editor, but it has a lot of hidden features underneath. After exploring it for a while, you might be surprised that you can do quite a number of cool things in SublimeText. We went in and dug around for a bit and here are just some fo the tips and tricks that we think you would like to play with.

Let’s supercharge your coding experience in Sublime Text.

1. Selection

As a web developer, we would frequently do code editing. Below are some handy keyboard shortcuts that allow you do different types of selections in SublimeText.

Command + D

Select a word.

Command + L

Select a line.

Command + A

Select the entire content within the document.

Ctrl + Command + M

Select anything inside the bracket (which is useful when working with CSS or JavaScript)

Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

Command

Hold the Command key and click on the lines that you want to select.

Command + Ctrl + G

Select a code, line, or word first the hit this combo to select the others with the same instances.

Command + D

Hit this key to quickly select the next code, line, or word that has the same instances as you are currently selecting.

See how multi-line selection works below.

2. Sorting CSS

Commonly, we do not mind how CSS properties are sorted, as CSS will give us the desired output in the browser regardless of their position. But putting them in a particular order will make your codes more organized. In SublimeText, you can select CSS properties and hit F5 to sort the properties in alphabetical order.

You can also use a third-party plugin like CSSComb to give you more control over the property sorting rule.

3. Command Palette

You can do many things quickly with Command Palette such as rename new file, set file syntax, and inserting snippets. To show the Command Palette in SublimeText, hit Command + Shift + P, then the command you intend to perform. Here are some examples.

Renaming file

Set file syntax to HTML

Insert code snippet

4. Switching Between Tabs and Projects

We may have many files opened when working on a project. In SublimeText, we can switch through these files (or tabs) quickly with the following shortcuts:

Command + T

Lists tabs that are currently open. Select one to go to the tab.

Command + Shift + ]

This will bring you immediately to the next tab.

Command + Shift + [

While this key will bring you the previous tab.

Command + Ctrl + P

Switch between the projects that are listed on the SublimeText Sidebar.

5. Cross-File Editing

This feature would also be very useful when we are working with multiple files. For example, say that we have several code blocks that are very similar and spread across different files in the project. To change these codes efficiently, you can:

1. Hit Command + Shift + F in Sublime Text. Put the words, sentence, or line of codes that you want to change in the Find field.

Pro Tip: hit Command + E to quickly put the code selected in the Find input field.

2. Specify the file names within the Where input field or add <open files> so that it will only affect files that are currently open.

3. Put the word or code replacement in the Replace input field, and hit the Replace button.

6. File Crawling

I found this feature really helpful when I’m editing CSS. Hit Command + R. A dialog will appear with a list of CSS selectors on the document, as you can see in the screenshot below. You can search and select the selectors that you intend to navigate to.

I found this a more convenient way to search for code block than using the regular Find feature.

7. Spell Checker

I frequently write in code editor, and I also frequently made some mistake in the spelling. If you are like me, you can enable the spell checker in SublimeText in this way.

Go to Preferences > Settings – User in SublimeText, and add the following line.

 "spell_check": false, 

8. Sidebar Enhancement

This plugin, SideBarEnhancements, brings some great enhancements to the SublimeText sidebar. Once installed, right click on the sidebar, and you will find additional menus such as Open in Finder, New File, New Folder, Open With, and Open in Browser.

Tip: Hit F12 key to open the file in the browser.

9. Change SublimeText Theme

We can also change the entire appearance of SublimeText, and one of my favorites is called Soda Theme, which can be installed through Package Control.

If the theme that you intend to install is not available in the Package Control repository, you can do it manually.

1. Download and Unzip the Theme package.
2. Go to Preferences > Browser Packages…
3. Put the theme folder in the Packages folder.
4. Then go to Preferences > Settings – Users, and add the following line to activate the theme.

 "theme": "Soda Light.sublime-theme" 

If you are on Windows you can check this out: Change Sublime Text 2 Theme in 3 Steps.

10. Change SublimeText Icon

Apart from changing the theme, you can also change the icon. There are a bunch of nicely designed SublimeText icons that you can pick up in Dribbble. Here’s how you can change the look of the icon:

1. Download one of the icons from Dribbble. Ensure that the icon also comes in .icns format, otherwise you can convert it first with this tool: iConvert.

2. Run the following command in Terminal.

open /Applications/Sublime\ Text.app/Contents/Resources/

3. Replace the Sublime Text 3.icns or Sublime Text 2.icns with the one you downloaded.

11. Sync Setting

If you are working in multiple computers, you might want to keep and apply the same Settings for SublimeText across these computers. We can set this up with the help of Dropbox (and a small tweak).

First, run the following command in Terminal.

 mkdir $  HOME/Dropbox/sublime-text-3/ mv "$  HOME/Library/Application Support/Sublime Text 3/Packages" "$  HOME/Dropbox/sublime-text-3/" mv "$  HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$  HOME/Dropbox/sublime-text-3/" 

Then run this command in Terminal in every other computer you want synchronized with the Settings that we have put in Dropbox.

 DSTPATH="$  HOME/Library/Application Support/Sublime Text 3" DROPBOX_PATH="$  HOME/Dropbox/sublime-text-3" rm -rf "$  DSTPATH/Installed Packages" rm -rf "$  DSTPATH/Packages" mkdir -p "$  DSTPATH" ln -s "$  DROPBOX_PATH/Packages" "$  DSTPATH/Packages" ln -s "$  DROPBOX_PATH/Installed Packages" "$  DSTPATH/Installed Packages" 

Thanks xMarekaccross for the tip.

12. Clickable URL

ClickableURLs is a tiny SublimeText plugin that would be very useful when you find a bunch of URLs within your codes. Basically, it will make the URLs clickable.

More

I have written about other things you can do with Sublime Text, including:


    




hongkiat.com

How to Compile Sass with Sublime Text

In a previous post from our Sass series , we showed you how to compile Sass into regular CSS format using Command Line. However, since not everyone might enjoy working with Terminal, this is a tip of how you can do the same using Sublime Text instead.

Compiling Sass into CSS in Sublime Text is possible with a plugin called SassBuilder, which you can install through Package Control (see screenshot).

Configuration File

Before you can compile Sass, you need to create a configuration file, which is similar to the config.rb that you can find in a Compass project. To create the file, go to Tools > Sass Builder Config in Sublime Text. Save the file in the same folder where you store your .scss or .sass files, and name it .sassbuilder-config.

You can then configure the output of your compiled styles in this file, and here’s the default configuration:

 { "output_path": "../css", "options": { "cache": true, "debug": true, "line-comments": true, "line-numbers": true, "style": "nested" } } 

SassBuilder will generate the comments and line numbers that tell us where the selectors and the style-rules were defined. These are useful when you are in the development stage, but when you are about to publish the website, you would probably need to remove them. To do that, set the value in line-comment and line-number to false, like so.

 { "output_path": "../css", "options": { "cache": true, "debug": true, "line-comments": false, "line-numbers": false, "style": "compressed" } } 

The style option specifies the style for the compiled CSS – you can choose between Nested, Expanded or Compressed. Sass will automatically compile into CSS upon saving the file. If the process has been completed successfully, you’ll get the following notification (screenshot).

And that’s it, guys. We hope that you have found this little tutorial helpful. If you have any questions, please don’t hesitate to post them in the comments below.


    




hongkiat.com

Quickly Preview Localhost Project with Sublime Text

During developement, we would often go back and forth between the browsers and code editors to view the result of our code. If you are working in Sublime Text, you will find that files will open in the browsers with a file:// protocol.

But If you are developing a PHP-based website, you have to view your site under HTTP protocol, thus file:// will not work in this case. The same is required when you want to test your website in Adobe Edge Inspect otherwise, you can’t preview the site on mobile devices.

If you are using Sublime Text, we would like to give you a quick tip that could streamline your workflow when working on a project. You can quickly preview your website in the browser under a HTTP protocol. Let’s check it out.

SidebarEnhancement

The first thing you need to do is to install SidebarEnhancement. It is a Sublime Text plugin that adds several new functionalities in the SublimeText sidebar. You can install this plugin with Package Control.

But if Package Control does not work for you, you can install it through Git by running the following command line in Terminal.

 cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages git clone https://github.com/titoBouzout/SideBarEnhancements.git 

Once installed, you will find several new options when you right-click on the sidebar. You can view your project in a browser by selecting Open in Browser. This will open the files in the browser with file:// protocol, as mentioned.

To change this so that it will open with an HTTP protocol, right-click on the project folder, and select Projects > Edit Preview URLS. It will open a JSON file named SidebarEnhancements.json in a new tab.

In this file, we will specify several things: the project path, the testing URL, and the production URL. here is an example:

 { "/Users/thoriq/Sites/project": { "url_testing":"http://localhost/project", "url_production":"http://www.project.com" } } 

The first line in the example specifies the project folder path in the computer. url_testing specifies the testing of URL or the development URL. In my case, a testing URL usually starts with localhost.

Lastly, the url_production specifies the production URL, this is the URL that puts the website online and allows it to be accessed through the Internet.

In addition, you can also add multiple projects, like so.

 { // 1st Project "/Users/thoriq/Sites/project": { "url_testing":"http://localhost/project", "url_production":"http://www.project.com" } // 2nd Project "/Users/thoriq/Sites/project2": { "url_testing":"http://localhost/project2", "url_production":"http://www.project2.com" } // 3rd Project "/Users/thoriq/Sites/project2": { "url_testing":"http://localhost/project3", "url_production":"http://www.project3.com" } } 

The Shortcut Keys

There are shortcut keys to make this easier for you: hit F12 to open project files in testing URL, and Alt + F12 to open the project in production URL.

To change keys (in case of conflict in use), go over to Preferences > Package Setting > Side Bar > Key Bindings – Users, and make your changes there. Add the following codes and change the values in the "keys" string.

 [ { "keys": ["F12"], "command": "side_bar_open_in_browser" , "args":{"paths":[], "type":"testing"} }, { "keys": ["alt+F12"], "command": "side_bar_open_in_browser", "args":{"paths":[], "type":"production"} } ] 

For example:

 [ { "keys": ["command+shift+r"], "command": "side_bar_open_in_browser" , "args":{"paths":[], "type":"testing"} }, { "keys": ["command+shift+d"], "command": "side_bar_open_in_browser", "args":{"paths":[], "type":"production"} } ] 

That’s it. Now, you can open your project in a browser under the HTTP protocol quickly using the shortcut keys. Just make sure that your localhost server is running. If somehow you cannot make this work, or have some trouble in applying this tutorial, feel free to pose your question in the comments below.


    




hongkiat.com

Easy Color Picking in Sublime Text

If you have been accustomed to a code editor that comes with GUI buttons, Sublime Text being a plain simple code editor with minimal buttons, may frustrate you. For example, when adding Color, I usually end up running another application – Photoshop or Colorzilla – for just getting color codes.

But wouldn’t our workflow be more streamlined if we were able to pick up colors without having to leave Sublime Text? If you are facing this same problem, we have a tip for you in the form of a plugin.

ColorPicker

Color Picker is a Sublime Text plugin by Weslly Honorato. This plugin is cross-platform; it works in Windows, OS X, and Linux.

Once installed, go to the Command Palette in Sublime Text by hitting the Command + Shift + P or (Ctrl + Shift + P for Windows). Then search for ColorPicker.

Or you can do it faster just by pressing Command + Shift + C. This will open the native color picker from your OS. This screenshot below shows the color picker in OS X.

If you are on Windows and Linux, the UI will be different.

Select the color, and hit the Pick button, and the color will be inserted into Sublime Text in Hex color format, like so.

HEX To RGB Converter

Note that this tool only generates HEX color format. So if you need RGB format, you will need to install one more plugin that helps you convert HEX color format to RGB color format.

Go to Package Control and install HEX to RGB Converter by Vitor Leal. Once installed, select the Hex color number and hit Shift + Cmd + R to get the RGB code.

Color Highlighter

Another plugin that will be very helpful is Color Highlighter. Don’t confuse this with Syntax Highlighter, Color Highlighter will let you preview the color when you selet the color code number. Here is what it looks like.

This plugin supports HEX, RGB, and RGBA color formats.

More

Here are more posts related to Sublime Text we have previously posted:


    




hongkiat.com

Identify Code Error In Sublime Text With Sublime Linter

Writing codes for hours only to find that it returns errors is one of the most distressing thing about a developer’s life. This is made worse when we have no idea what we did wrong. And when things go wrong, developers cope in every way they can (check out Jake’s post for 30 common ways we deal with code error).

However, if you write code with Sublime Text, here is a small tip to minimize this frequent problem and stop you from giving up code.

Lint and Linters

Lint, in programming, is the term referring to an attempt of analyzing potential errors or bugs within the codes. Linter is the tool for Lint(ing). There are literally a bunch of linters for almost any languages, like JS, PHP, Java, and even CSS.

By Linting, not only will you be able to minimize errors and bugs, we can also become a better coder as it serves as a reason for us to follow the standard rules and best pratices in writing code. Luckily, there is a Sublime Text plugin that have packed all these linters in one package, allowing us to lint various codes seamlessly.

Installing SublimeLinter

First, you need to install Package Control for the easiest way to install Sublime Text plugin. If you have installed it, hit Shift + Command + P and search for “Install Package“. This will load the package repository.

Once loaded, search for SublimeLinter, and hit Enter to install.

Adjusting When Linting Happens

The linting process, by default, runs on the background, the process runs immediately as we are writing the codes. For more convenient experience, I suggest changing this behaviour (but if you are fine with the current setting, then skip ahead).

Head over to the Preferences > Package Setting > Sublime Linter > Setting – User, which opens in a new tab.

Then, add the following line to ensure that linting only occurs upon a file save.

 { "sublimelinter": "save-only" } 

Linting CSS

Now, let’s try it out with our codes, starting from CSS. We have the following adjoining class selector without the closing curly bracket.

 .class.anotherclass { border-radius: 5px; 

After saving the file, it turns out that I got 1 caution and 1 warning.

The error message can be found at the status bar, to the left of the line number, marked with a warning sign. In my example, it notified me of the missing curly bracket, and also advised me to avoid using adjoining class selector as it has some issues in Internet Explorer 6.

Linting JavaScript

Next, let’s try this with JavaScript. This time we have the following JavaScript function taken from W3School. I have introduced errors into it by removing the semicolons, something most thinks programmers often forget to do.

 function myFunction() { var x = "" var time = new Date().getHours(); if (time <= 20) { x = "Good day" } document.getElementById("demo").innerHTML = x } 

After saving the file, (ta-da) yes, I am missing a few semicolons.

Final Thought

If you are coding with Sublime Text, I think SublimeLinter is a must-install plugin. Not only does it help cut down on the time you need to find errors in your code, it also helps you to become a better coder on the long run.


    




hongkiat.com

Manage Notes and Lists With Sublime Text

There are a lot of free plugins created by the (awesome!) community to extend the capabilities of Sublime Text, to being more than just a code editor. In this post, I would like to show you a tip that I found really useful.

When building website, most of the times, things may not work as expected. These bugs and errors will pop up and I will make a note to address these errors later on. This will help minimize back and forth between what I am working on and what I need to pay extra attention to.

But like any other coder, I don’t want to open another app just to jot down these errors. Fotunately, there is a plugin that allows us to do so within Sublime Text, called Plain Task.

Plain Task

After installing the plugin, you can create a new file, and save it as .todo format (or .todolist, .tasks, or .taskpaper). This will highlight the new file in yellow, and we can begin taking notes and tasks on the file.

To add Headings or Titles, simply end the line with a colon as shown below. The colon marks the line as the title or note heading.

You can add a new todo list by hitting the Command + Enter in Mac or Ctrl + Enter in Windows. These key combinations will add a checkbox, which are common with todo lists. Hit the keys again to create a new "thing to do".

To check the list off (it’s done!), you can hit Command + D — or in Windows, Ctrl + D. You can also hit Alt + C to mark it as Cancelled.

Adding a note is like writing plain text, simply write what you want to jot down.

Adding Todo Icons

Currently our .todo file is displayed in a plain-white, unknown-type blank paper icon, as shown below.

But we can change this to the one that comes with PlainTask, to give it a more unique identity. First, we need to copy the icon that is stored in the icons folder of the PlainTasks package into the Sublime Text application using this command line.

 cp ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/PlainTasks/icons/TODO.icns /Applications/Sublime\ Text\ 2.app/Contents/Resources/ 

Then run the following command to open the Info.plist in Sublime Text.

 open -a Sublime\ Text\ 2 /Applications/Sublime\ Text\ 2.app/Contents/Info.plist 

And the following lines within the array to register the icon.

 <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleTypeName</key> <string>TODO</string> <key>CFBundleTypeExtensions</key> <array> <string>todo</string> <string>todolist</string> <string>tasks</string> <string>taskpaper</string> </array> <key>CFBundleTypeIconFile</key> <string>TODO</string> </dict> 

Rebuild the Info.plist with the following command line.

 /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -f -r /Applications/Sublime\ Text\ 2.app/ 

And there you have it. Your new .todo file now has a new face.

I would like to thank Ivan Grynove for this tip.

Conclusion

That’s it, now you can take notes and add todo lists without having to install or open additional applications within Sublime Text. We hope that you find this small tip useful. And for further reference, you can head over to its official repository at Github.

More With Sublime Text

For more things you can do with Sublime Text, check out:


    




hongkiat.com

Adding CSS Vendor Prefix Automatically with Sublime Text

There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has their own prefix; Firefox uses -moz-, Internet Explorer uses -ms-, Chrome and Safari use -webkit-, and Opera uses -o- (which has been switched to -webkit- as well).

The problem is, unless you are utilizing Compass, including vendor prefix is tedious. The requirement is also varied for each browser, and whether we should include the prefix (or not) becomes a question worthy of consideration.

If you are using Sublime Text though, here is an easier way.

Installing Node.js

First, we need Node.js installed in our system. The installation package is available for Windows, OSX, and Linux, which you can download here. If you are unsure if you have it or not, run the following command in the Terminal.

 node -v 

If it is already installed, it should return the version, as shown below.

Installing AutoPrefixer

The Autoprefixer is developed by Andrey Sitnik. It is then ported to Sublime Text package by Sindre Sorhus.

I recommend that you install Package Control for easier package installation. You can go to Wbond for the official instructions. After that, you can hit the Command + Shift + P keys and select "Install Package". Then search for Autoprefixer.

Hit enter to install.

Using AutoPrefixer

AutoPrefixer comes with a default setting, as follows

 { "browsers": ["last 2 versions"] } 

But, we can personalize this to meet our own requirement.

Autoprefixer uses the CanIUse.com database for adding the prefixes. CanIUse.com lists CSS3 as well as HTML5, JS and SVG support statistics in the browsers including the use of vendor prefixes. And as we can see from the default setting, Autoprefixer adds prefixes for the last 2 versions as well.

If we take CSS3 Transition as an example, it will add the prefixes for the Webkit and Opera browsers.

And if we set it for 7 versions back, like so.

 { "browsers": ["last 7 versions"] } 

It will also include the -moz- for Firefox

To include the prefix you can hit Command + Shift + P and select Autoprefix CSS, like so.

Now, you can simply write the standard CSS3 syntax, and this plugin will include the prefix for you in a snap.


    


hongkiat.com

New York Art Book Fair 2013: From books just containing commas to sublime photography, our publication picks from the recent event

New York Art Book Fair 2013


This year the New York Art Book Fair sprawled into the courtyard and filled the three floors of MOMA’s PS1 building in Long Island City. The fair, which is one of the largest book fairs in the world, welcomes a wide array of…

Continue Reading…


Cool Hunting