Choosing Editor and Sublime Text Set Up (2015 Sept. update)

The programming Editor is a Software Engineer’s best friend (quote from Brian Hsu!!) A software engineer spends most of his time in Editor to write codes (excluding the time we spend on Google and Stack Overflow, of course). So what Editor should you choose for your software engineer life?

 

Well … there is no real answer for that. You choose whatever you like and make the best use of it. Each Editor exists for a reason. If you can have the highest productivity using a certain Editor, then go for it!

In my previous company, everyone used Eclipse because it’s good for Java development. Now I am learning to become a full stack developer (if you don’t know my story yet, you can read it here). Most people I know use Sublime Text. I believe some people also use Atom. Again, there are tons of editors for you to choose from, you just need to find one and make the best use of it.

 

Because Hack Reactor uses Sublime Text and my friends also recommend Sublime Text, I chose Sublime Text as my editor in web development. Sublime Text 2 is the current stable version, but if you are going to become a software engineer, then you should use the beta version of Sublime Text 3. Try something new (move fast and break things!) every time you get a chance.

 

To set up Sublime Text for best productivity, I did these things:

  • Enable Sublime to Open in Terminal
  • Install SublimeLinter for Javascript, CSS, and HTML
  • Solve Tab Space Issue
  • Enable Auto Save
  • Set Git Commit Editor
  • Enhance Sidebar Functions

 

Enable Sublime to Open in Terminal

In your .bash_profile, add this line of code

export PATH=$PATH:/Applications/Sublime\ Text\.app/Contents/SharedSupport/bin

Save your file and restart your Terminal. Now you should be able to type

subl ~/Documents

and Sublime Text will open with all the documents folders on the side bar.

 

 

Install SublimeLinter for Javascript, CSS, and HTML

Linter in Sublime helps to check your code when you write. It checks syntax errors and major problems in your files. SublimeLinter is a framework that allows you to use lots of linters. What I have is SublimeLinter-jshint and SublimeLinter-csslint. You can simply follow the instructions from SublimeLinter website or you can watch this Youtube video for installing these linters. I believe these linters also check HTML, so I haven’t installed linter specifically for HTML yet. I will update this post if I face HTML linter issues.

 

Solve Tab Space Issue

In Hack Reactor week 1, we learned about best coding practices. The tab might cause problems because some people set tab space to 4, while some set tab space to 2 (or even other numbers). If you use tab, then you will wish to translate tab into space directly. Here is how I set my tab_size to 2 and translate tab size. In your Sublime Text- Preference- Setting-User, add:

 "tab_size": 2,
 "translate_tabs_to_spaces": true

 

Enable Auto Save 

Each time you want to test your file, you need to save it and run it in a browser. What if you forget to save it? Then you need to come back to Sublime Text and save it. Each time you forget, you probably need 2 seconds to go back, save it, and re-run it in the browser. Here is the chart telling you, “How Long can you work on making a routine task more efficient before you’re spending more time than you save?” If you need to do this task 10 times per day, the accumulated time you waste each year is remarkable. Here is what you can do. In your Sublime Text- Preference- Setting-User, add:

 

save_on_focus_lost": true

So every time you move your mouse cursor from the file to other files (or other programs), Sublime Text would save your file immediately. You can easily switch to browser with all the lines immediately updated.

 

Set Git Commit Editor 

You can easily use Sublime Text as your editor every time you commit. Originally, I did it by editing my .gitconfig file

[core]
	editor = subl -n -w

Later, I found that you can type the following line in your terminal to achieve the same result:

git config --global core.editor "subl -n -w"

 

Enhance Sidebar Functions (2/9 update)

This is what I learned from a Hack Reactor senior, Rob. Original Sublime Text doesn’t give you many functions in sidebar. If you need to open a file, move a file, create a folder, etc, it would take you several seconds to do so with the Finder (or File Manager). With Sidebarenhancement, your life can be easier. Here is how:

Before:

Screen-Shot-2015-01-17-at-9-10-03-AM

Source: Rob http://roberting.azurewebsites.net/cool-sublime-plugins/

 

After:

Screen-Shot-2015-01-17-at-9-10-25-AM

Source: Rob http://roberting.azurewebsites.net/cool-sublime-plugins/

 

Consistant for version control (4/17 update)

To enable

 ensure_newline_at_eof_on_save

and

 trim_trailing_white_space_on_save

can save you and your teammate lots of time when collaborating in version control. You don’t need to worry about white space or new line that causing conflicts.

 Speed up go to anywhere (4/17 update)

You can speed up your goto anywhere by adding binary_file_patterns:

 "binary_file_patterns": ["node_modules/*", "bower_components/*"]

Highlight current line (9/21 update)

By doing this, you can have a entire line highlighted. It’s easier to find your current line and also retrieve the line when switching from tabs.

"highlight_line": true

This is how I set up my Sublime Text 3. I’m happy with my current setting, but still looking for ways to help me code better. If you know any Sublime setting that helps you be more productive, please share with me. I am eager to know!

 

P.S. Here is my whole sublime setting json:

 
"binary_file_patterns":
[
"node_modules/*",
"bower_components/*"
],
"font_size": 16,
"save_on_focus_lost": true,
"scroll_past_end": true,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true,
"highlight_line": true

Leave a Reply

Your email address will not be published. Required fields are marked *