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

By . Filed in Web Design

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.


Thoriq is a writer for with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.



Comments are closed. Contact Us.