Visual Studio Code

Last updated 2 months ago

Here are suggestions for using VSC (Visual Studio Code) for developing in CFML.

What do you want to do with VSC?

  1. Install it?

  2. Key Extensions?

  3. Working with the shell/terminal

  4. Git Extensions?

Installing VSC

This IDE has it's own domain. ( https://code.visualstudio.com/ ) with downloads for macOS, Windows and Linux on the home page. :+1:

Visual Studio Code Snapshot

Using The Terminal/Shell

You can approach this different ways. It is pretty nice to have the command prompt running right inside your IDE. Pressing CTRL +` will show and/or hide your terminal. This will let you run Commandbox directly inside your terminal.

Commandbox only

Go to File > Preferences > Settings and search for shell.windows. Hover over the item in DEFAULT SETTINGS and you will see an edit pencil. Click on that and it will copy the values over to USER SETTINGS. (NOTE: You can also set stuff up in WORKSPACE SETTINGS for different projects. Now set the location of commandbox on your system like we did in our system in the example below.

"terminal.integrated.shell.windows": "/path/to/box",

When adding a path, follow the rules for adding platform specific path seperators.

Commandbox and Shells of Choice

Install Shell Launcher and reload the IDE.

  • Shell Launcher Easily launch multiple shell configurations in the terminal.

Now open your user settings like is shown in the Commandbox only section just above. Add the following to your USER SETTINGS.

//Shell launcher // A list of shell configurations for Windows "shellLauncher.shells.windows": [ { "shell": "C:\\Windows\\sysnative\\cmd.exe", "label": "cmd" }, { "shell": "/path/to/box", "label": "Commandbox" } ],

Or loading it as desired

If you have commandbox mapped to a path you can of course just call box like you would from any terminal and it will load right up for you. Just use any terminal in VSC that would load box outside VSC and it will run the same.

Key Extensions

You should also install a few extensions. (These extensions can also be added from the built in Extentions item.)

Git Extensions

Additional Extensions ( of course, choose the ones you want and ignore the others )

  • Git Lens This will take your git IDE to new levels.

P.S. A couple of other nice plugins.

  • TODO Highlight Add TODO, FIXME or other comments to code and find quickly with this extension.

  • Project Manager: save folders as projects and easily switch between projects

  • Hg: integrated Mercurial source control

  • Great Icons Because it is more fun, nuff said!

More information to follow. (Including video guides to show how to get started that may not be as familiar with different parts.)