VS Code Setup Guide

In the past few year, I have used Sublime Text as the text editor of my choice for Front End Web Dev work (and to draft these blog posts). I wanted to try a different text editor (FOMO, next cool thing, need more fun … whatever) and decided to try Visual Studio Code or VS Code. This post is my VS Code setup guide.

VS Code is made by the makers of OneNote (which I adore), and it has good reviews from other dev folks. It is also free and has an extensive extensions market. In addition to the installation, in this guide, I list some of the many extensions to improve productivity from the get go and to try to replicate some features I loved in Sublime Text.

Here is the set of links I followed for setup, configuration and customization.

Installation

  1. Installation Link
  2. On Mac only: setup the command prompt for command line invocation.

Customize the Look and Feel

  1. Nomo Dark icon theme: Icons in your explorer window to identify the files types / folders easily.After installing, enable the extension by going to File > Preferences > File Icon Theme > VSCode Icons. (On OSX it is Code > Preferences > File Icon Theme > VSCode Icons.)
  2. Kary Foundation Theme Light theme: I pretty much use light themes. I like the color scheme and the recommended typography. Out of the box, the fonts and text color in this theme isnt’t that great. You absolutely need need to install the recommended Hasklig font, and then it becomes really good.After installing, enable the theme by going to File > Preferences > Color Theme and select “Kary Foundation Theme – Light”
  3. Hasklig Font: A code font by Adobe Systems with monospaced ligatures, recommended for use with the Kary Foundation Theme. After installing the theme on your OS, enable the font. Then go to File > Preferences > Settings and update your settings with the following:
    {  
      "workbench.iconTheme": "vs-nomo-dark", 
      "workbench.colorTheme": "Kary Foundation - Light", 
      "editor.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",  "editor.fontWeight": "500", 
      "editor.fontWeight": "normal",
      "editor.fontSize": 15,
      "editor.fontLigatures": true,
      "terminal.integrated.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
      "terminal.integrated.fontLigatures": true
    }  

Set up the editor conveniences

  1. Path Intellisense Visual Studio Code: Plugin that autocompletes filenames.
  2. NPM Intellisense Visual Studio Code: Plugin that autocompletes npm modules in import statements.
  3. Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  4. Auto Rename Tag: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  5. Expand Selection To Scope: This extension introduces a command that incrementally expands the selection to the nearest outer scope (delimited by bracket pairs).
  6. Paste and Indent: Paste some code with “correct” indentation.
  7. AB HTML Formatter: This tool is formatting / reindenting HTML code.
  8. Rainbow Brackets: Provides rainbow colors for the round brackets, the square brackets and the squiggly brackets.
  9. Guides:Guides is simply an extension that add various indentation guide lines.
  10. Color Highlight: Highlight web colors in your editor.
  11. Color Picker: Helper with GUI to generate color codes such as CSS color notations.

Set up the development conveniences

  1. ES Lint: ESLint Integrates ESLint into VS Code. You need to have installed ESLint first.
    npm install eslint
    
  2. CSS Auto Prefix: Auto-prefixes certain attributes in CSS.
  3. Style Lint: Modern CSS/SCSS/Less linter.Enable the linter, while disabling the built-in CSS and SCSS linter. Go to File > Preferences > Settings and add the following to settings.json:
    { 
      "stylelint.enable": true,
      "css.validate": false, 
      "scss.validate": false 
    }
    
  4. HTML CSS Support: CSS support for HTML documents.
  5. HTML Snippets: Full HTML tags including HTML5 Snippets.
  6. HTML Boilerplate: A basic HTML5 boilerplate snippet generator.
  7. Gulp Snippets: Gulp JS Snippets for Visual Studio Code.

Projects and versioning

  1. Git Extension Pack: Popular Visual Studio Code extensions for Git. Contains the following extensions:
    1. Git History: View git log, file or line History.
    2. Project Manager: Easily switch between projects.
    3. Git Lens: Provides Git CodeLens information (most recent commit, # of authors), on-demand inline blame annotations, status bar blame
      information, file & blame history explorers, and commands to compare changes.
    4. gitignore: Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.
    5. Open in GitHub / Bitbucket / VisualStudio.com: Jump to a source code line in Github / Bitbucket / VisualStudio.com.

Measuring (for the dataphiles)

  1. Wakatime: Metrics, insights, and time tracking automatically generated from your programming activity.

Debuggers

  1. Debugger for chrome: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
  2. Debugger
    for firefox
    : Debug your web application or browser extension in Firefox

Polymer Specific

These extensions are specific to Polymer – a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable
apps.

  1. Polymer IDE: Provides linting, autocompletion, and more for web components.
  2. Polymer Syntax: Polymer syntax highlighting for Atom & VS Code!
  3. Polymer Snippets: Sublime snippets for Polymer and Web Components

Additional Settings

These are additional changes to the editor settings to make life easier. Go to File > Preferences > Settings and add the following lines to your settings.json file

  1. Change tab size from 4 spaces (default) to 2 spaces.
    {
      "editor.tabSize": 2
    }
    
  2. Enable word-wrap – if you are crazy like me.
    {
      "editor.wordWrap": "on"
    }
    
  3. Enable the minimap to quickly navigate long files.
    {
      "editor.minimap.enabled": true
    }
    
  4. Show white spaces outside words
    {
      "editor.renderWhitespace": "boundary"
    }
    
  5. Enable formatting on typing and pasting.
    {
      "editor.formatOnType": true,
      "editor.formatOnPaste": true
    }
    
  6. Enable copying the current line when Ctrl+C is pressed without any selection. – Enabled by default!
  7. Enable Files Auto-Save
    {
      "files.autoSave": "afterDelay",
      "files.autoSaveDelay": 8000
    }
    
  8. Enable Polymer to analyze the whole package, though it’s slower:
    {
      "polymer-ide.analyzeWholePackage": true
    }
    

The settings.json file now looks like


// Place your settings in this file to overwrite the default settings
{
    "workbench.iconTheme": "vs-nomo-dark",
    "workbench.colorTheme": "Kary Foundation - Light",
    "editor.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontWeight": "500",
    "editor.fontSize": 15,
    "editor.fontLigatures": true,
    "terminal.integrated.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "boundary",
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "terminal.integrated.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 8000,
    "polymer-ide.analyzeWholePackage": true
}


February 2017 Reading Log

Here is my reading log from February 2017. Relatively few books but all were quite amazing. And I got to reread my old popcorn favorite series by David Drake – Northworld Trilogy (which seems to be free on Kindle as of today).

If there is one book I would recommend, it would be The Subtle Art of Not Giving a F*ck book cover
The Subtle Art of Not giving a F*ck and The Art of Possibility (yeah.)

Mark Manson’s book is a sometimes-much-needed kick in the pants about what we care about. An excellent read when nearing burnout, dealing with overwhelm or when you just have too much on your plate. You can say that it is a very good time-management book. Ideally, of course, we would apply what he says (and other folks say) and never reach burnout. My favorite part of the book is the Disappointment Panda. He’s awesome. Read it and tell me what you think.

The next on the list: The Art of Possibility book cover The Art of Possibility by Rosamund and Benjamin Zander. I first heard about this book from Seth Godin in his podcast interview with Tim Ferriss. Seth mentioned the set of books he listens to and rereads – again and again – so they can seep into his subconscious. This is one of those audiobooks which I enjoy listening to, and totally get why Seth Godin recommends it. You should try it too.

February 2017 Reading Log

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
1 2 3 4
5 6 7 8 9 10 11
The Subtle Art of Not Giving a F*ck
Mark Manson
(library book
12
It’s Not About the F-Stop
Jay Maisel
(library ebook)
13 14 15 16 17 18
Northworld
David Drake
(ebook)
19
Venegance, Justice
David Drake
(ebook)
20 21 22 23 24 25
26 27
The Art of Possibility
Rosamund & Benjamin Zander
(audiobook CD)
28
The Undoing Project
Michael Lewis
(library book)

You can find all my previous Reading logs here


Introducing LittleReads – The most awesome book tracking app in the universe

This is a side project I’ve been working on since November 2016. Here is the grand reveal. I’ll blog technical about the making of Littlereads over the next few weeks. Meanwhile, here is the introduction.

LittleReads LogoLittleReads

The most awesome book tracking app in the universe


Superhero couple image

Do you have a child under 6?

Do you read books to your child?

Are you participating in the 1000 books before kindergarten challenge?

Do you want your child to be a super-duper-reader?

Do you want an easy way to track books you read to your child?

Yes? Join us at littlereads.us

Littlereads is modern. LittleReads works on iPhones, Android devices, desktops, laptops,
LittleReads even works offline!
(Told you … it’s awesome! Better than sliced bread even…)

My Story

I have a superpower. I go places.
kids reading imagination image

Utopias, dystopias, future time, past time, alternate time, dungeons with dragons, androids and superworms, new galaxies, universes, multiverses. All are just a book away.

I want to pass this superpower to my daughter. So I read to her.

We go to the library, hang out there, color there, read books there. And bring home a lot of books.

I even signed up for the 1000 books before 6 challenge. I tried the book provided to track read books, but wanted a more convenient digital option. And I have forgotten the books she loved (and I loved to read) when she was 1,2,3…
So I went looking in the wild, for a way to track books. I found a few – but none of them catered to the young ones… you could not track when and how many times you read the same book.

So I decided to scratch my own itch and develop a rash. I mean, an app which is simple, colorful, easy to use, which can track the books I read to her and show me that data in pretty charts. So after about 6 months of development, here is LittleReads.

So please tell me…

What do you think about LittleReads?

Can you use it and tell me what you think? Any bugs, issues? What features you would like to see? Something not working the way you like?

You can email or Tweet @suprada with feedback. Waiting eagerly to hear what you have to say.

Happy reading (and tracking),
Suprada


Share LittleReads with the world:

  • Tweet: Parents, check out #LittleReads - most awesome book tracking app in the universe for your little ones!
  • … or Just forward this email


Side Hustle School Podcast – Cool Tool #6

This week’s cool tool is the Side Hustle School Podcast.

Logo of Side Hustle School podcast

Details

Tool: Side Hustle School Podcast
Cost: Free
Type: Podcast
Works On: On Phones via Podcast App / Browser
Link : https://sidehustleschool.com

What is it about?

Side Hustle School is a daily podcast by Chris Guillebeau. That’s right. An episode a day. The episodes are short- mostly less than 10 minutes. The weekly recaps and extended cuts run slightly longer – still less than 20 minutes.

It features stories of real people with busy lives – full time jobs, families and other commitments – who have income generating side hustles. All these people share the value of wanting to create more opportunity for freedom in their lives – and multiple income streams is a big step in that direction.

Chris provides details – what they did, what were they trying to do, what lessons we can learn from these stories, what steps we can probably take toward our own side hustle. He provides useful working models for everyone who wants a new source of income in a limited amount of time.

Why I like Side Hustle School?

Why am I fascinated by this podcast? It’s inspiring. I’m learning about the various kids of hustles, what kinds I would be interested in, various kids of marketing, learning about the different attitudes I can bring to my side hustle and might I expect from this. The tools out there, these steps I can take and what I can do for 20mins each day and see where the hustle ends up in.

You should definitely listen to a couple of episodes and see if it’s for you. Here are a few recommendations:

Episode 9 – The Craigslist Photographer

Episode 64 – Long-haired men create tribal identity

Episode 26 – These Resume Templates Make $462/month in Passive Income

Episode 83 – Bridesmaid-for-Hire Posts on Craigslist; Earns $20,000/Month


About My Cool Tools

“Cool tools really work. A cool tool can be any book, gadget, software, video, map, hardware, material, or website that is tried and true. “
– From Kevin Kelly’s Cool Tools

Other cool tools here


The nightly review

Over the years of listening to Tim Ferriss Podcast interviews, reading Ryan Holiday, reading Seneca, reading a lot of articles on meditation, productivity and being profoundly influenced by certain philosophies from Stoicism and Buddhism – these have led me to develop a night routine. As a part of this nightly routine (when I’ve not fallen off the wagon), before I go to sleep, I do my “Nightly Review” in my everything-book.

The questions I ask are

What did I do right today?
This can be a highlight reel of my accomplishments of the day, or just a list of tasks I did. Sometimes, it is a short list of keywords, sometimes I wax lyrical. I almost always answer this first – to start on a positive note.

What did I do wrong today?
This can be an emotional landmine or a wake-up call. This is the section where I list/write about tasks I didn’t do, goals I didn’t reach. More importantly, this is the section I take stock of my behavior for the day – especially the unsavory behaviors – was I mean? gossipy? was I distracted? was I angry? frustrated and vengeful? This is the log of my human foibles, to try to recognize them and better myself tomorrow.

What is left undone?
What needs to be done tomorrow? What should have been done today but didn’t get done? What was started today but not finished today. A launch-board for tomorrow.

Did I choose courage over comfort today?
This is a Brene Brown question which has made a big difference in what I tend to look for in my day. A way to push past my natural inhibitions and reservations. To be more generous, to step out of my comfort zone. I try to have at-least one occasion every day where I choose courage – so I have an answer when I face this question at the end of the day.

I also engage in an evening meditation, just before going to bed. This takes the form of a Marcus-style philosophical diary (not for publication!), during which I revisit the events of the day, asking myself the three famous questions posed by Epictetus: What did I do wrong? What did I do (right)? What duty’s left undone?
– Professor Massimo Pigliucci in this New York Times article