My Visual Studio Code setup

A few months ago I have been blogging about My Atom setup.
I have always kept an eye on the progress of Visual Studio Code though, having it installed, checking new features and extensions.

Last month, after quite some dissapointments with Atom (like broken expand/collapse, split screen issues due to minimap), I decided to give VS Code a better chance, and code with it on my current projects.

During the first couple of days I had to get used to doing some things differently (like search results on the sidebar), customize user preferences here and there, as well as find suitable extensions.

Well, I got to admit that the result was totally worth the effort, as I have been feeling a lot more productive while coding on VS Code. And it’s not just the blazing fast performance of the editor, there are little features everywhere that contribute to the overall great experience. I will try to list as many of them as I can think of.

Here is my VS Code setup:

Theme

Color Theme: One Dark Pro
File Icon Theme: Material Icon Theme

Keyboard Shortcuts

I am using the official Atom Keymap extension.
VS Code team has done a great job providing extensions for both Atom and Sublime so that developers can get productive without having to learn yet another new set of shortcuts.

Packages

The Essential

EditorConfig for VS Code

Editorconfig helps developers to maintain consistent coding styles between different editors and platforms.

Open in GitHub

Provides commands to quickly open the current file on GitHub (History / Blame / File views).
You may also want to check Git Lens for in-editor views.

Docker

Everything you need if you are working with Docker on your repos.

JavaScript

ESLint

Integrates ESLint into VS Code.

jshint

Integrates JSHint into VS Code.

Debugger for Chrome

Debug your JS code in the Google Chrome browser, using breakpoints, watches and more.

Document This

An extension that helps you autogenerate and write JS code documentation.

Python

Python

An awesome Python extension providing linting (using Pylint, pep8 or other linters), intellisense, debugging support and more.

Ruby

Ruby

A Ruby extension that provides linting, debugging support and more.

CSS

StyleLint

Lint CSS files using stylelint.

Other

Sort lines

A simple extension for sorting lines with multiple options.

Settings (User Preferences)

Initially I was thinking about listing my own settings, however since they are highly opinionated, I will advise you to go through preferences/settings and customize them according to your needs. They are intuitively separated into sections, there is documentation and a quick search.

Things I love on VS Code

  • It’s fast, amazingly fast! Scrolling through code, typing, intellisense, quick looking for files, expanding/collapsing code, file explorer actions. There isn’t a single task that makes it feel slow (even though it’s an Electron app, ie not native).
  • Search is also fast, you just need to configure it to exclude git ignored files.
  • It remembers everything while restarting the editor. Opened files, collapsed sections, even search excluded paths.
  • As you have noticed, I didn’t have to install a large number of extensions to get basic support for preferred languages.
  • I don’t need a mini-map, there’s the default Enhanced Scrollbar that’s marking code changes, search result occurrences, cursor position, errors. The Enhanced Scrollbar has an absolute height, so that means on long files you don’t have to scroll down to figure out if there are marked search results.
  • Markdown support is included. Markdown Preview (side-by-side or different tab). While on side-by-side preview mode, editor/preview panes are autoscrolling to reveal the selected content on either one of them!
  • Enabling/disabling extensions per workspace.
  • JavaScript jump to definition, smart intellisense based on actual code, path autocomplete on requires.
  • Built-in JSON file lint support.

VS Code has something for everyone

If you enjoy using an integrated terminal or source control within your editor, VS Code does that. I prefer to keep the best apps for each task, so for example I am working with iTerm2 and GitHub Desktop.

Apart from the JS, Python, Ruby related extensions that I have listed, there is also support for Java, PHP and other programming languages.

And similarly to Atom, you can find almost every extension you may need on the Marketplace.

Ruby on Rails, React, Redux, Webpack 2 boilerplate app

GitHub repo: giannisp/rails-react-boilerplate

This is a pure Ruby on Rails / React / Redux / Webpack 2 boilerplate app that I have built and open-sourced. Highlights include using the newly released Webpack 2, as well as making the frontend part independent of the Asset Pipeline.

Features

  • Ruby on Rails 5.x
  • React 15.4.x
  • Webpack 2.x
  • Babel 6.x
  • ESLint support
  • SASS and StyleLint support
  • Hashed filenames for production assets
  • Separate app and vendor JS bundles
  • Postgres compatibility
  • Using Rails default gems and NPM packages only

Exit Asset Pipeline, Enter Webpack

Why Webpack?

Webpack is a module bundler. It can bundle all JS files for usage in the browser, but can also transform / bundle / package any resource or frontend asset.

JavaScript community moves forward at a rapid pace, new frameworks and modules are being released every day. The NPM ecosystem is huge, and Webpack makes it available in the simplest way possible.

Webpack can support every modern JS app, using ES6 or CommonJS modules, or both, create a single or multiple bundles, and in general can be customized to accomplish any application requirement.

The frontend assets on this app are placed on a more accessible directory, at /front/js and front/css, rather than app/assets/javascripts and app/assets/stylesheets.

At any point, migration to a different backend (for example NodeJS) can be seamless since Webpack is running as a stand-alone bundler. There’s absolutely no dependence to the Asset Pipeline or any other framework-specific module.

My Atom setup

I have switched to using Atom as my main code editor about 2 years ago and never looked back. Atom is open source, cross-platform - built on top of Electron, and can be highly customized.

Here is my Atom setup:

Theme

UI Theme: One Dark
Syntax Theme: One Dark

This is the default theme on fresh Atom installations.
In the past I have been using Atom Dark, and it was quite hard to get used to something new, however One Dark is a lot more pleasing to the eye.

Packages

The Essential

editorconfig
apm install editorconfig

Editorconfig helps developers to maintain consistent coding styles between different editors and platforms. You can also generate a new .editorconfig file using the Command Palette.
Hint: Disable Atom’s default “whitespace” package to avoid possible conflicts.

docblockr
apm install docblockr

A powerful package that helps you writing code documentation.
It can generate complete doc blocks, and makes it extremely fast to tab your way through filling-in the variable types and descriptions.
Hint: make sure you check the Settings as it provides some neat customization options.

highlight-selected
apm install highlight-selected

Highlight the current selected word occurrences. Extremely useful for quickly checking variables, functions etc.

file-icons
apm install file-icons

Display file type specific icons everywhere (treeview, tabs, finder etc).
Makes it a lot easier to quickly identifying opened files.

linter
apm install linter

Linter is the base package that provides linting functionality for various file types via plugins. Should be the developer’s first choice.

linter-eslint
apm install linter-eslint

Lint JavaScript using eslint
My favorite JS linter at the moment for NodeJS and React projects.
Hint: Check “Disable when no ESLint config file is found” on Settings.

linter-jshint
apm install linter-jshint

Lint Javascript using JSHint
Still need it for some older projects that were setup with it.
Hint: Check “Disable when no jshintrc file in path” on Settings.

linter-jsonlint
apm install linter-jsonlint

Lint JSON files using jsonlint.

linter-php
apm install linter-php

Lint PHP files using the php binary.

linter-pylint
apm install linter-pylint

Lint Python files using pylint.

linter-ruby
apm install linter-ruby

Lint Ruby files using ruby binary.

linter-xmllint
apm install linter-xmllint

Lint XML files using xmllint.

minimap
apm install minimap

Minimap provides a mini-preview of the full source code on every tab, and comes with a variety of useful plugins.

minimap-cursorline
apm install minimap-cursorline

Display the location of the cursor position.
Hint: you can customize the color via your stylesheet.

minimap-find-and-replace
apm install minimap-find-and-replace

Display the search matches.

minimap-git-diff
apm install minimap-git-diff

Display git diffs, possibly one of the most useful plugins along with the next one.

minimap-highlight-selected
apm install minimap-highlight-selected

Display the current selected word occurrences.

For JavaScript development

js-hyperclick
apm install hyperclick js-hyperclick

It lets you jump to where variables are defined, or even required files.
Hint: there are plugins for other languages based on the hyperclick base package.

autocomplete-paths apm install autocomplete-paths

Provides autocomplete functionality for relative paths and files. Not just for JS of course, but extremely useful on your imports/requires.

Tools

atom-beautify apm install atom-beautify

It can beautify a great variety of files, however I mainly use it to prettify JSON files.

sort-lines
apm install sort-lines

Sort selected lines, or get unique lines. Nice to have.

Other syntax support

atom-jade
apm install atom-jade

Adds Jade template language support.

Competition (VS Code)

You might be wondering why Atom and not VS Code. Especially when VS Code seems a lot faster (have you checked memory consumption though?).

Well at least for my needs, the above packages make me more productive. Some of them are not available on VS Code at all yet, or their respective ones are just not that powerful.

VS Code has some really cool features, like JS debugging with breakpoints that I am using sometimes. The integrated git and terminal support may also appeal a lot users, however I prefer to be using specific apps (like iTerm 2 and GitHub Desktop or SourceTree) that just do a lot more.

Powered by

This post is dedicated to the technologies and code that are powering up the site.

The site is hosted on GitHub Pages.
GitHub Pages is designed to host a static site directly from a GitHub repository.

Jekyll, a Ruby gem, is the library that does all the magic, generating the static content pages and blogs posts.
The two-columns responsive theme that is currently running is a customized version of the excellent Hyde theme.

Here’s how you can easily get started:

  • Start a new repository on GitHub (check how it should be named and branch details)
  • Create a new RVM or rbenv environment using Ruby >=2.x.
  • Init a new local git repository
  • Start a new Gemfile including at least github-pages (example).
  • gem install bundler
  • bundle install

Now you can select a preferred theme, like Hyde, and place it inside the repo. GitHub Pages is currently using Jekyll 3.x, so you may need to customize the _config.yml for compatibility (example).

Running and viewing the site locally:

  • Do jekyll serve
  • Visit http://localhost:4000 on your browser

After customizing the look and feel, and adding some content, you should be ready to publish it!
Simply push to the appropriate branch on the remote GitHub repository.

You can also use a custom domain with GitHub Pages, which is really cool and easy to accomplish.

The full source code of this site is available at giannisp/giannisp.github.io.

Hello World!

Hello World! I am Ioannis.

This post marks the beginning of my new personal site and blog!

I will be posting about coding-related stuff and tools that are part of my daily routine and I enjoy working with. Also you can expect hints and tips that are coming from my remote-working life.

You can follow the blog by subscribing on the Atom feed.