Picking and Learning a Good Editor

I think that this lab is an amazing opportunity to play around with different editors, discover their functionality, possibilities and helpfulness.

brackets

I decided to test atom and brackets. Why those? Well, I heard some amazing reviews about atom, and always wanted to try it out. However, I didn’t have enough memory space on my laptop and atom is not a lightweight editor unfortunately. However, lately I updated my SSD card plus our task for this week is to try and test editors and I figured that this is the chance for me to finally try use atom and get more familiar with it. Brackets is a random choice. However, something funny happened. I went to the website to install brackets. http://brackets.io/

I downloaded the package and opened it in Ubuntu Software (which is something like a Play Store, basically a place where you can install things using UI).

1.png

So I clicked on install button.

2.png

And….

3.png

Nothing happened. For some reason it is not downloading.

But I am not a person who easily gaves up. I deleted brackets, and installed it again. Exactly the same thing occured. Since last summer I switch from windows to linux. I wanted to practice to use command line as often as possible as well as editors such as vi. After transfering to linux, I was doing all the updates and installations thouth the command line. So I figured, if I can’t install brackets through UI, I should try installing it the usual way I do it.

So I googled. How to install brackets on Ubuntu through the command line?

I found this blog.

And followed the instructions. To be specific:

  • Open the terminal
  • cd Downloads – thats where I want to install it
  • sudo add-apt-repository ppa:webupd8team/brackets
  • sudo apt-get update
  • sudo apt-get install brackets

Well, and you might as well do some updates for your machine.

  • sudo apt-get update
  • sudo apt-get upgrade
  • sudo dist-upgrade

4

5.png

And it looks like it got installed just fine.

6.png

And here you go! It works! I recommend to restart your device, since for me I couldn’t open Brackets right after the installation.

However, after I restarted…

7

It works!

Atom – https://atom.io/

Above is an official link to install. And here is the link with an amazing instructions with images on how to install atom through the command line on Ubuntu: YES, I am the link!  😀

I have atom installed on my machine, I installed it few weeks ago but didn’t have a chance to try it out yet.

So now I am set and ready to go. I have both atom and brackets installed.

8

The next step is to try open a Brackets in both of the editors and see how they would perform.

9.png

10

No problems so far. Look great. What is interesting about atom is that it shows you the changes that are not committed which I think is cool.

How to change your indent from tabs to spaces, 2-spaces, 4-spaces, etc?

atom_tabs

brackets_tabs.gif

How to open the editor from the command line?

It is very easy to open both of the editors from the command line. I included gifs in order to show how to do it.

atom_open_from_terminal

brackets_open_from_terminal

How to find things?

  • Finding something in an open file (current editor)

brackets_find_in_fileatom_find_in_file

  • Finding something in any file in a project

atom_find_in_all_filesbrackets_find_in_all_files

How to split the screen into multiple panes/editors/views?

atom_split_screenbrackets_split_screen

How to install editor extensions (a.k.a., plugins, packages, etc.) ?

atom_extensionsbrackets_extensions

For now, both of the editors are easy and pleasant to use.

Extensions

So let’s install some extensions. I am going to install them on atom. First question that occurred to me was: What extensions should I download?  There are so many of them…

So as I usually do when I am not sure what to do, I googled. I found really useful blog post which I suggest you to take a look at.

Which ones I installed?

Gives you suggestions for javaScript.

atom_turnjs

atom_turnjs_example

JSLint error reports for  Atom editor.

atom_jslint.gif

atom_jslint_example.gif

I found this plugin REALLY useful for anyone who is using JS. Every time you save your file, it shows you the error IMMEDIATELY. How great is it, huh?

  • Tree-view

To show the project structure. I have it installed already.

Ctrl \ to show/close the structure view.

atom_treeview_example.gif

Highlight text to drag n’ drop it somewhere else in your file.

atom_simple_drag_and_drop.gif

atom_simple_drag_and_drop_example.gif

Makes writing documentation faster by detecting the details of the function below it and auto filling much of the comment.

atom_docblockr.gif

How to use:

Press enter after // or /* or /** to have the result below.

atom_docblockr_example.gif

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s