{"componentChunkName":"component---src-templates-tag-js","path":"/tags/code-editor/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":2,"edges":[{"node":{"fields":{"slug":"/engineering/beginners-guide-for-sublime-text-3-part-2/"},"html":"

In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks you have to perform, and make your worktime really fun. I will start with some of the most basic features that come with fresh installation of Sublime. There are lots of good tutorials on Sublime shortcuts and plugins on the internet, but I feel there should be more about these fundamental features. I have seen many people who are familiar with the plugins but not with these cool built-in features. In this article we will be introducing \"Snippets\", \"Project\" and \"Macros\".

\n

Here we go:

\n

Snippets

\n

\"snippet-demo\"

\n

Back when i introduced Sublime editor to my friends,\"Snippets\" was among the first few features which really intrigued them. To give a quick peek what a snippet looks like:

\n

This is definitely the feature you will use the most! To start using snippets, you can either create your own snippets according to your needs or download some ready-made snippets created by others to fulfill some generic coding needs. Like the one I demonstrated, it is pre-made from a plugin called Html Page Snippets, and command docjq will create a boiler template for a Html page that contains bootstrap and jQuery.

\n

\"new-snippet\"

\n

To create your own snippet, go to \"Tools\" => \"New Snippet\", an interface to create your own snippet will pop up, it would look something like this:

\n\n
Hello, ${1:this} is a ${2:snippet}.
\n

Note: The dollar sign \"$\" allows you to use tab key to jump between, so set it wisely!

\n\n

Now save it, but keep in mind putting it in the correct location is important!

\n

If you can not find it, go to \"Sublime\" - > \"Preferences\" -> \"Browse Packages\", and create a folder called \"User\" if there isn't one already, and save it there.

\n

\"browse-package\"

\n

Project

\n

Using \"Project\" feature to organize your projects is super easy and handy. It saves a lot of time that you'd normally waste finding different folders and then dragging and dropping to your Sublime each time. Additionally, it saves your previous location so you can just pick up where you left off. Let's see a quick demo:

\n

Saving and using your projects is very straightforward.

\n\n

That's it! You're done! Super easy right?

\n

Macros

\n

\"without-macro\"

\n

Do you always feel frustrated by repeating the same tedious task again & again? Hmm... at least that's how I feel when I need to covert a vertical line of data into an array. Tasks like these are pretty common when you need to copy a line of data from spreadsheets. Using shortcuts, the best way I can come up with to accomplish this would be like so:

\n

It takes about 8 shortcuts to finish each process, that's including the first paste action and then adding a space character after each comma. Imagine having to do this for each line of a table, and for every single spreadsheet you have to work on. It would be hundreds of shortcuts you need to press and each time you are just repeating the exact same sequence of keys.

\n

\"start-macro\"

\n

Well you might think there must be a better way! You bet there is! \"Macros\" are designed to handle this kind of nasty situation and save you from all that boring work. Here I made a very quick and easy example, it converts a vertical line of data into an array:

\n

Magic! Lots of time and lives will be saved by this little gadget. So now, how to make your very own macros. First of all I would recommend trying out your set of operations several times to make sure it will get recorded correctly. When you are ready, open a new window/tab in Sublime, clear your mind, take several deep breaths, and here we go.

\n\n

Usually you would have something copied in your clipboard, so it could start with a \"Paste\" command. Now it's your time to shine, do a clean and precise set of operations to format the data.

\n\n

You can find it under the same \"Tools\" menu. Just use it to make sure it did what you want, sometimes even though you recorded it properly, the macro doesn't recognize the operations correctly. For this reason it's important to make sure everything is correct and smooth, and if it's not, try find some alternatives for your operations.

\n\n

Similar to other Sublime tools, it will be saved with an extension called \".sublime-macro\", after it gets saved you will be able to find it in your Macro User List.

\n

To Be Continued ..

\n

I hope you had fun and learned something new about Sublime. Next time we will cover some really good packages/plugins that you should consider using to make your life and work even simpler.\nHappy coding!!!

\n","frontmatter":{"date":"November 10, 2015","updated_date":null,"title":"Beginner's Guide for Sublime Text 3 Plugins","tags":["SublimeText","CodeEditor"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp","srcSet":"/static/296e569fc8dd1576c6df798847aaf8ad/61e93/Beginner-Guide-Sublime-Text.webp 200w,\n/static/296e569fc8dd1576c6df798847aaf8ad/1f5c5/Beginner-Guide-Sublime-Text.webp 400w,\n/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/beginners-guide-for-sublime-text/"},"html":"

Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it is just plain fun. The goal of this blog is to help you set-up the basic extensions that are required while working with Sublime: Package Control, a professional, sharp looking theme pack, and a core feature of Sublime, \"Goto Everywhere\". I am using a Mac, but the concept also works well in Windows, check the corresponding shortcut online, and it should be an easy and smooth process.

\n

Before marching forward, make sure Sublime Text Editor 3 is properly installed, if you haven't installed it yet, you can download it here.

\n

1. Package Control

\n

Still with me? Awesome! Let's get started. First of all, the most amazing thing about Sublime is the diverse collection of packages you can install. The packages vary from big ones such as Git and SublimetoCodeIntel to small handy widgets like color picker and path auto fill. Keep checking and digging for the most useful packages for yourself is a very important part for your daily coding with Sublime. Therefore, first things first, let's install the Package Control.

\n

Installation Guide is here

\n

Press

\n
ctrl + `(Normally the one under Esc)
\n

Then paste the code from above link into your console, it could be confusing to paste a big graph of code into your sublime python console, but it does work, so Let's do it.

\n

Now try pressing

\n
Cmd + Shift + p
\n

Then type \"Install Package\", you should see it now:

\n

\"install-package\"

\n

2. Theme

\n

Prior to installing any functional package, let's make sublime even prettier, let's search for a theme!

\n
    \n
  1. Install Package from above
    2. \n
  2. Then type \"Theme\"
    3. \n
\n

You should see a big list of themes right now, you can first search on the internet to have some previews of the themes, pick a good color scheme that you like and then search for it here. What I would suggest is the one I am using it, is called \"Theme - itg.flat\"

\n

After installing your preferred theme, the font and color scheme for sublime may have already been updated. But it doesn't quiet look like what you have seen from elsewhere does it? It's because you also need to update the UI preferences for sublime, for itg.flat it will give you a more flat look after the update.

\n

Navigate to:

\n

\"user-preference\"

\n

What this file does is actually overwrite the settings in the default-setting JSON file, if you mess up with this user file, just delete them to recover back to the original settings. So feel free to play around with it, from here you can define the settings from your theme provider's guidance, here I will post mine as a sample

\n
{\n  "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",\n  "font_size": 14,\n  "highlight_line": true,\n  "highlight_modified_tabs": true,\n  "theme": "itg.flat.dark.sublime-theme"\n}
\n

Please note JSON format is significant to Sublime Settings, when you are not sure about it, check it with an online JSON validator. Now with this step done, you will have a delightful working environment to write your code in:

\n

\"sample-code\"

\n

3. Goto Everywhere

\n

One of the most awesome features provided by sublime is called \"Goto Everywhere\", to me it is more like a \"Find Everything\". Once you get used to it, it will boost your productivity incredibly by saving enormous amount of time on finding stuff. Here is a brief list of its most common usage purpose:

\n\n

To trigger this feature, press key combination:

\n
Cmd + p
\n

Then for different purpose you just press different buttons to trigger the function,

\n\n

So far I have briefly covered the essential features sublime provides.In the next blog of this series I will explain how to make your work even easier by utilizing sublime Project, Snippet and Macro.\nUntil then, Adios!!!

\n","frontmatter":{"date":"September 15, 2015","updated_date":null,"title":"Beginner's Guide for Sublime Text 3","tags":["SublimeText","CodeEditor"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp","srcSet":"/static/296e569fc8dd1576c6df798847aaf8ad/61e93/Beginner-Guide-Sublime-Text.webp 200w,\n/static/296e569fc8dd1576c6df798847aaf8ad/1f5c5/Beginner-Guide-Sublime-Text.webp 400w,\n/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]}},"pageContext":{"tag":"CodeEditor"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}