Skip to content

Visual Studio Code and node.js

March 28, 2017

In the old days, we did everything in Eclipse.  Java, HTML, XML, EJBs, CCS, javascript.  Then came Grails, and we used GGTS (and Intellij for the rich).  Now we are developing js and for node. The node plugin for eclipse is almost pointless, and offers no code completion for example.  For a long time we used notepad++ to do all our node development. It offers much better, but not perfect, code completion, and you can easily  start/stop node as a macro.  Some features were missing, such as the ability to create and name a file in the project directory (you had to either do this outside of notepad++, or create a new file, hit save as, then tediously navigate to your project directory again.

In search of a better IDE for node development, we are going to try “Visual Studio Code”.  We are not sure why MS is developing free tools for open source platforms, but cant complain.  We only hope they don’t drop developing it if there is no money in it.

Here is the list of steps to setup the environment we use:

  1. Download visual studio code from here
  2. Click on the extensions icon on the left, and add the following plugins:
    1. ESlint
    2. There are probably more, but we haven’t find anything else worth installing yet.
  3. Get rid of the activity bar. Right click on it and select “Hide activity bar”.  It would be more useful if this bar had things like “Save”.
  4. Install and configure eslint.  Sadly, the plugin doesn’t do this for you, and the instructions it gives are incorrect. It also failed to find my exising eslint installation and configuration files, I had to start again.
    1. open a cmd prompt and navigate to your node project directory.
    2. type: “npm install eslint –save-dev. This gives warnings “no repository field”, which can be ignored.
    3. type: “node_modules\.bin\eslint –init”
    4. Follow the instructions using the up/down arrows and enter key.
    5. You will also have to create a project package file if you have not already.

Visual Studio Code is not perfect.

  1. There is no save icon, you have to tediously open the file menu if you are a mouse oriented user.
  2. The autosave option is great, but, unlike intellij, there is no local history feature to get back that file you just accidently saved with the wrong edits.  This makes autosave very dangerous.  Sadly, the windows file history (which can save every 15 minutes) only works with an external drive. It would be fantastic if it could work with an internal drive instead, just to save local changes.
  3. It doesn’t support SVN. I am sure that git is great for distributed projects with push/pull, but you cant beat SVN for simplicity and convenience of many components in one place.
  4. It doesn’t really have the concept of a project.  However, you can open your node folder, which is similar.
  5. Getting the eslint plugin is non trivial.  Eclipse + node plugin is much better in this regard.
  6. Settings have to be handed edited. With notepad++, its all UI based, checkboxes, dropdowns etc.  The problem is if you want to change something, you have to read the manual. e.g. by default “hotExit” is enabled.  This is a disaster for me as I have two machines, one at home and one in the office.  All my files are on oneDrive, so I can simply carry on where I left off when I go to/from work. But with hotExit, it doesnt ask me to save any edited files when you exit VSC.  The setting is as follows “files.hotExit”: “onExit”. The problem is, there is no comment or hint at how to switch this off,  Even google cant help.

 

Conclusion.

Each edit has different strengths and weaknesses.  All are flawed.  The ultimate IDE would have the simplicity and power of notepad++ editor, the code completion VCS, and the auto-save with local history of intellij and everything else from eclipse (multi-project handling, UI, rich plugins, painless jslint integration etc)

Advertisements

From → dev

Leave a Comment

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

%d bloggers like this: