Posted on: 20 December 2017    

Blog written by Stacy Rendall, Principal Spatial Researcher, Interpret Geospatial Solutions

This post is part of a series which describes my development environment from high level technologies down to specific apps - it should be of interest to anyone doing Python or web development. See the first post for a general overview of the technologies that make up this stack.

Installation instructions and configuration/settings for tools introduced in this series can be found in this Bitbucket repository.

Editors

What I like in an editor

Different people have different preferences in editors: some people prefer a fully-featured integrated development environment (IDE), while I tend to like something quicker and less cluttered. Given the amount of time you will spend using an editor it is important that it fits in to your workflow and supports you to work efficiently. I used Sublime Text 2/3-beta for over five years, but there were always a few annoyances around how projects were managed, the convoluted process of installing plugins, and the feeling that you had to put in a lot of effort to get it set up right. As a result, I would often trial new editors and IDEs, which is how I found my new favourite editor - it is made by Microsoft, although (despite the name and icon) it is not actually related to Visual Studio the IDE!

Visual Studio Code

VS Code is cross-platform, free, easy-to-use, feature rich, fast and well designed - it can do a lot, but it doesn't get in your way. It has a raft of handy IDE features that I had never used beforehand, but I would now struggle to live without. Some of the best VS Code features:

  • excellent user interface
  • well set up "out of the box", particularly:
    • great plugin management and integration
    • Git integration - including diff and merge conflict resolution
  • IntelliSense (tooltips which can tell you, for example, the inputs and documentation for a function you are calling)
  • simple and effective project management
  • lots of different syntax-highlighting colour schemes available
  • many of the best features from Sublime Text, including:
    • multiple cursors
    • command palette
    • configuration via JSON files
  • other features and integrations out of the box:
    • markdown preview
    • integrated terminal(s)
    • linting
    • debugger

Stacy blog2

Visual Studio Code showing Git integration, IntelliSense and integrated Cmder terminal

See the Bitbucket repository for installation instructions (via Scoop), configuration settings, some Sublime-like keyboard shortcuts, and instructions for integrating Cmder into VS Code

Other editors of note

If you are doing a lot of HTML/CSS then Adobe Brackets (also free) is well worth a look - it has an amazing set of tools for front-end development, although I have found it a little unstable with larger projects.

If you just want a simple, clean, fast code editor (and nothing else) I would also recommend trying Sublime Text (it can be trialled for free).

Linting

Linting is the process of running a program that checks for common code errors and conformance to defined styles (these can be external styles, such as the Google JavaScript style, or your teams own internally defined style). Linters will pick up some types of code errors and common "gotchas", like mixed indentation in Python, meaning you can fix them before you attempt to run the code. Common styles, on the other hand, mean that everyone in your team is encouraged to write code in the same way, making it quicker and easier to work together on the same code.

There are lots of different linting tools available for different languages, with differences of implementation, standards, ease-of-use and configurability. VS Code supports integration with a range of linters and allows you to see errors/warnings/suggestions inline (kind of like spellcheck in Word).

stacy blog 4b

Linting JavaScript in VS code - warning that a variable has not been defined

See the Bitbucket repository for installation instructions and initial project configuration files for the below

Python: Flake8

The most popular linter for Python is Pylint, but it has a couple of problems: it is hard to configure on a per-project basis, and it doesn't seem to install (easily) on Windows at the moment. Flake8 is an alternative linter that works and supports configuration per project (by placing a .flake8 file, like the one in the Bitbucket repository, into the project directory).

JavaScript: ESLint

There are a variety of JavaScript linting tools, but I haven't tried them extensively. ESLint is the default JavaScript linter that ships with with VS Code: it is easy to set up and configure with different rule sets, so I haven't had to shop around at all! After installing ESLint (instructions here) just place the .eslintrc file from the Bitbucket repository into your project directory.

Summary

This series of blogs has presented a bunch of development tools which I use daily that play together quite nicely. This set of tools will not work for everyone, but I would encourage anyone doing development to think carefully about the programs they use, how they work together, and continuously find ways of doing things better, faster, and more efficiently!

This is the last post of the series - I hope you have found it useful and picked up some handy tools! I welcome any feedback or comments at stacy.rendall@interpret.co.nz

stacy blog stack image2 resized