Skip to content

Visual Studio Code and node.js

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)

Grails 3.2 and eclipse Neon 4.6

Intellij is the only IDE which officially supports Grails 3.x.  It costs an iphone a year just to edit your petstore project.

So what are the other options.  The excellent, and in my opinion, superior GGTS  is sadly no longer developed, and stopped support at Grails 2.5.

But you can edit and run grails 3.2 in eclipse Neon.  You don’t get the wizards, but this can be done on the command line.

Install

  1. Install java 1.8 JDK (aka SE)
  2. Install Grails
    1. download from here 
    2. unzip e.g. to c:\dev
    3. set GRAILS_HOME=C:\dev\grails-3.2.6
    4. add %GRAILS_HOME%\bin to PATH.
    5. see guide
  3. Install Eclipse
    1. Download the latest eclipse from here. I chose the J2EE edition.
    2. Unzip it somewhere handy (e.g. c:\dev\eclipse)
    3. make a short cut of the c:\dev\eclipse\eclipse.exe and
    4. run it.
  4. install Groovy in eclipse
    1. Help->Install new Software -> Add..
    2. Set location to: http://dist.springsource.org/snapshot/GRECLIPSE/e4.6/
    3. Note, if you have a version of eclipse newer than Neon, which is 4.6, update the URL above to match the eclipse version
    4. Select:
      1. Groovy Compiler 2.4 feature
      2. Groovy Eclipse feature
    5. hit Next, accept terms, wait till installed, restart eclipse, bla bla etc.
  5. Install gradle support.  In theory, neon is supposed to have the eclipse buildship plugin installed, but mine didn’t.
    1. Help->Install new Software -> Add..
    2. Set location to: http://download.eclipse.org/buildship/updates/e46/releases/2.x
    3. select “buildship: Eclipse plug-ins for gradle”
    4. Hit Next, accept, wait, restart, bla bla

Now you should be ready to import a grails project.

Make one via the command line, e.g.

grails create-app bottom

Import he project into eclipse.

  1. In eclipse: File->Import->Gradle->Existing Gradle Project
  2. Select root of the grails app folder (bottom in this case)
  3. Chose “Grade Wrapper”.  No idea what this is, but seems to work.  It creats a bunch of files in your project root dir.

 

Run the project.

At the bottom window in eclipse you should see “Gradle Tasks”

gradle1

Under this, you should see your project, and several subdirectories.

One of them is “application”.  under this is “bootRun”.

Double click this. it should work (if nothing is running on port 8080)

See Ted Vinke’s article for more info.