five hours of real coding in Visual Studio Code

I tried to code for real in Visual Studio Code for the first time. This means not just dealing with my first impressions, but actually trying to get something done. I spent five hours coding today. The project I was working on uses Maven, Selenium and JUnit 5.

I tried to *only* use VS Code for the five hours of coding I did today. Learning any new tool is frustrating. I didn’t complete the development task I wanted to. But I made a decent amount of progress. And more importantly, I have a better understanding of the VS Code environment.

What I re-learned

I learned these when I was playing last time. But this time, I used them a bunch.

  • Shift Command/Windows P – Lets you type in the name of what you want to do. Useful when you don’t know the keyboard shortcuts or location of anything! I used it a lot for organize imports!
  • F12 – drill down into a class

What I learned for the first time

  • F2 – renames a method
  • The left explorer view has a “Maven Projects” section. This provides a visual way to run Maven clean/install/etc. it also provides a visual way to run effective pom. Or at least it did until I disabled the Maven integration. See the “challenges” section for why.

What I liked

  • Running a junit test is easy. Click “run test” over the class name or method name. This causes the test to run and a green (or red) status to appear in the bottom left line with how it went.
  • A green check or red x also appears next to each test method which you can click to see the test result details.
  • Extract to method is easy. Just highlight the code and click the lightbulb.
  • The git integration is good. It is clear on how to pull/push/commit/stash
  • Typing code was relatively easy.

“Challenges”

  • F2 does not rename a class completely. It does rename the “public class” line. But it doesn’t rename the file. There was a github issue logged about this in August. It was closed because it was going to be resolved “soon”, but still seems to be a problem.
  • JUnit 5 tests in classes that end with *IT.java run normally but report as if they were skipped. This means integration is partial. If you open the test class, the green check or red x are correct. And the test explorer recognizes integration tests as tests. But the bottom bar status and test report show as skipped. I had to temporarily rename my test to *Test.java and name it back before committing for this to be usable. I reported this as an issue in the vscode-java-test project
  • There doesn’t appear to be an easy way to make the editor (the part where you type code) full screen. You can choose the command “Maximize editor group and hide sidebar”, but the problems/terminal/etc group is still at the bottom along with some visual clutter on the right. This means you actually have to drag stuff around. In Eclipse, you just double click the “title” and get full screen. More importantly, in Eclipse you double click again to get your original view back. This was requested back in 2016 so I doubt it will be added.
  • Printing something in JUnit doesn’t play well with the Maven integration. Seriously, even if you remember to switch the output tab to “test output”, nothing gets output. I quickly learned that I wasn’t the only one with this problem. It was also logged as a defect this month and sounds like it is being worked on. In the meantime, I disabled the Maven plugin. This isn’t terribly inconvenient because of the Terminal tab. I can still run a Maven build right from my editor.
  • You have to create packages and classes “manually.” This is annoying from deeply nested packages. It is also annoying to have to type the package declaration when creating a new class. This is because VS Code has the concept of folders/files vs packages/classes

What I had to fall back to Eclipse for

There were two tasks where I decided to use Eclipse rather than VS Code:

  1. I needed to paste a very long string. Eclipse adds the line breaks and string concatenation to make this elegant. VS Code does not. I could have spent 15 minutes doing it by hand, but I let Eclipse do it for me.
  2. Eclipse is really good at showing all the differences visually between two Strings in an assertion. (See #1 for my long string.) I could have read the text assertion to see the differences. But again, Eclipse is just so good at this.

creating a new VS code gradle project

I need to create a really simple Gradle project from scratch for my Oracle Code One hands on lab. I also need need to gain more experience with Visual Studio Code since we are using it soon for FIRST robotics. Seems like a good opportunity to combine my tasks here!

First, I re-read my first impressions of VS Code blog post. That reminded me of the keyboard shortcut to get context sensitive options. Ok. now I’m ready to get started.

(I intentionally didn’t use an archetype to get more experience using the editor)

Installing Gradle extension

I installed the Gradle Language Support plugin. Not sure if I needed it, but the syntax highlighting is nice. I don’t see a wizard option to create a Gradle project. This means I have to create an empty project

Creating a new project

I created an empty folder on my filesystem. Then I added that folder to VS Code. This created an empty project with the name I wanted.

Create the build file

I tried click “New File” on the editor. That created an untitled file that I couldn’t figure out how to rename. I could figure out how to delete it so I did that.

Then I used the keyboard shortcut to open help and choose “File: New”. Great that prompts me for a name. (I then realized that I could have just right clicked to have the new file option.)

I then typed a small gradle build file

apply plugin: 'java'</div>
repositories {
<div>  mavenCentral()</div>
<div>}</div>
<div>dependencies {</div>
<div>  compile group: 'org.apache.commons', name: 'commons-lang3', version: '3.8'</div>
<div>}
Create directory structure
I then created the src/main/java and src/test/java folders. I was able to right click to create the folders so this was easy enough.
Create Java packages
I couldn’t find an easy way to create packages/classes, so I created a bunch of folders and a file with the extension .java. This did work and the IDE let me type in my class.
However, when i did the same for my unit test, I was not able to open the empty file. At this point, I gave up and went back to Eclipse. I need to poke at this when I have more time.
Also, it appears the FIRST robotics plugin overrides the behavior of the default gradle run.
Editing a project
I created my first project in Eclipse. The second was a copy of the first with some renames and minor behavior changes. I copied the first project on disk. Then I opened that folder and made all the edits in VS Code. That was easy; even autocomplete worked as expected. My only problem with the second project was running the gradle build and I think that’s the FIRST robotics plugin.
Other observations
  • Since I created my folder/project inside a git repo on my machine, VS Code was smart enough to detect this. It was also helpful for seeing what I forgot to add to the .gitignore fil.
  • I feel like I got dropped into someone else’s home. I was able to do everything I needed. But not in an efficient way.

 

 

first impressions of VS Code (visual studio code)

FIRST Robotics is using VS (Visual Studio) Code as the default IDE next year so I’ve developed a sudden interest in learning it :).

My overall impressions

It is much faster to get started with VS (Visual Studio) Code than Eclipse. And for the simplified use cases for FIRST robotics this makes sense.

Initial install

I installed it about two months ago. That was easy. I went to the website and downloaded. I didn’t have time to do anything then so my only experience was when I double clicked a .java file when preparing for my QCon Java 11 presentation. It’s a nice editor so cool that it opened out of the box. Not so cool that it changed my defaults for opening files without telling me.

Also nice that VS Code prompts with a suggestion to install the Java extension pack when I opened the Java file.

Upgrading

Since I didn’t do anything, the first order of business was to upgrade to the latest version. VS Code makes this easy. One  a Mac, you go to code > check for updates. It downloads quietly in the background. Then you go back to Code and choose restart to download.

Like Eclipse, the release notes automatically open. However, since I’m completely new to the tool, everything is new to me so I didn’t read it.

Plugins

The FIRST website suggests some plugins. To start with, I installed:

  • Java extension pack – includes the plugin for Maven
  • C++
  • WPILib – this is a custom download (vs being part of marketplace at this time).

I like that it uses a Marketplace like Eclipse. I also like that you just click “reload” to have the downloaded plugins take effect (rather than having to restart the whole IDE). I also like that the extensions menu has an install from VSIX option. Really easy to install a plugin that you downloaded from the internet.

I’ll install more plugins after getting the lay of the land.

Documentation

The VS Code getting started is good. I like that it includes the keyboard shortcuts for opening the command palette.

  • shift+command+P = mac
  • shift+ctrl+P = windows

It was harder to find the windows keyboard shortcuts than expected. The website help “knows” I’m on a Mac so tells me about the Mac ones. But I’m going to be helping students on multiple operating systems. (It was clear in the FIRST robotics docs, but I would have liked this to be clear on the Microsoft website as well)

Creating a first project

I used the WPI wizard to create a new project. It was easy to use and fast. The file structure is standard for a Gradle project so it felt familiar. I opened the Robot.java file and tried to make a change. Then VS Code started “downloading the internet.” This is also normal for Gradle. I was just expecting it to happen on file creation or first build rather than when I pressed ctrl+space for autocomplete.

I like that you can use the command palette to run commands without having to use the mouse or memorize a lot of keyboard shortcuts.

Playing a little

Many of the keyboard shortcuts are standard so autocomplete and closing tabs works as expected. If a file has warnings it (and the package name) are in green. Similarly, errors are in red. I imagine this is customizable if someone is red/green colorblind. I’m surprised the defaults are ones where this is a problem.

How to open multiple projects

I immediately wanted to compare two projects in the same workspace. This is easy. You go to file > add folder to workspace. This creates a “multi root” project.