IT Nota

How to Open Visual Studio Code from command line macOS

When you use Visual Studio Code on Windows, one handy feature is you can always call it from the command line by typing “code .” (without the quotes) in the folder where you want to work on.

But when you try that on macOS Terminal, this is what you get:

zsh: command not found: code

Not to worry, the same feature can be had on macOS but it’s just not installed by default. In order to do so, we need to do a one-time setup from Visual Studio Code.

  1. Launch Visual Studio Code.
  2. Press Cmd ⌘ + Shift ⇧ + P to open the Command Palette.

  3. Type in shell command and select the Shell command: Install ‘code’ command in PATH to install it.

    Visual Studio Code Command Palette - Shell Command code

  4. A screen will pop up stating:

    Code will now prompt with 'osascript' for Administrator privileges to install the shell command.

    Just click OK and authorize it.

Now, the “code .” command works the same way in macOS Terminal as it is on Windows Command Prompt.

If you use VSCodium, you don’t need to do any kinds of setup, it works right away.

Further Reading

How to Use Visual Code as Default Editor in Git
How to Enable Font Ligatures in Visual Studio Code
How to Reassign Shortcut Key for Column Selection in Visual Studio Code
How to Setup Visual Studio Code for Hugo Static Site Generator

Download

Visual Studio Code

How to Setup Visual Studio Code for Hugo Static Site Generator

Based on a few questions on how to setup an environment to edit content using Hugo, here’s a few simple steps to follow if you want a quick and easy way to do it. Keep in mind, the beauty of using Hugo is that you are free to use any text editor you like.

This is not the only way to do it but this will get you there fast if you don’t have anything setup yet.

Assumptions

  1. Hugo is already installed, if not please check out the steps on how to install Hugo. For Windows OS, here’s a simple way to install Hugo.

  2. Git for Windows is also installed and setup. This is an optional step but it’s highly recommended if you want to track your edit history.

Steps

  1. Download and install Visual Studio Code. Once done, launch the editor.

  2. Download the following Visual Studio Code extensions to help you [Markdown Shortcuts, Better TOML, Git History]. While this step is optional, it will help to speed up your workflow in creating/editing your static site.

    Visual Studio Code Extensions for Hugo

  3. Once you created your Hugo workspace, open the folder from Visual Studio Code.

That’s about it and you’re ready to create your Hugo static site.

When you’re ready to publish the site, check out the post below if you’re thinking about hosting it on an IIS server.

Further Reading

How to Install Hugo on Windows 10
How to Deploy Hugo Static Website to IIS Using Git
How to Setup Naked Domain to Resolve in Cloudflare Pages
How to Open Visual Studio Code from command line macOS

Downloads

Visual Studio Code
Git
Hugo

How to Reassign Shortcut Key for Column Selection in Visual Studio Code

If you use column selection often in Visual Studio Code, you may find the default shortcut keys combination is a bit too much. By default, to make a column selection or multiple lines in the same horizontal cursor position, you need to press CTRL-SHIFT-ALT and either UP or DOWN arrow depending on the direction of your selections.

Fortunately, you can always assign your own shortcut keys for virtually any functions in this powerful code editor.

So here are the steps to do so.

  1. From the top menu, select File -> Preferences -> Keyboard Shortcuts (or press a combination of CTRL-K CTRL-S) to open the Keyboard Shortcuts windows.

    Visual Studio Code Preferences

  2. Within Keyboard Shorcuts window, look for the following:

     
cursorColumnSelectDown
cursorColumnSelectUp
cursorColumnSelectPageDown
cursorColumnSelectPageUp

  3. Right-click and select Change Keybinding (CTRL-K CTRL-K) and press the key combination you want to use and press ENTER to save it or ESCAPE to cancel. In this example, I use a keyboard combination SHIFT-ALT-ARROW. Repeat this step for each operation.

  4. Once completed, you should see something similar to the screenshot below in your Keyboard Shortcuts window.

    Visual Studio Code Keyboard Shortcuts

That’s it.

If you want to see the configuration in JSON format, you can click on the active link keybindings.json on the top of the Keyboard Shortcuts window (For advanced customizations open and edit keybindings.json), then you’ll see the JavaScript Object Notation that looks similar to the following:

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "shift+alt+down",
        "command": "cursorColumnSelectDown",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+alt+down",
        "command": "-cursorColumnSelectDown",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+alt+up",
        "command": "cursorColumnSelectUp",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+alt+up",
        "command": "-cursorColumnSelectUp",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+alt+pagedown",
        "command": "cursorColumnSelectPageDown",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+alt+pagedown",
        "command": "-cursorColumnSelectPageDown",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+alt+pageup",
        "command": "cursorColumnSelectPageUp",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+alt+pageup",
        "command": "-cursorColumnSelectPageUp",
        "when": "editorTextFocus"
    }
]

As indicated on the top banner of Keyboard Shortcuts window, as an advanced user, can always go straight to the keybindings.json and modify the keyboard shortcuts in the json file directly.

Related Articles

How to Make Visual Studio Code Colorize Classic ASP Code
How to Reassign Column Selection Shortcut Keys in Sublime Text
How to Open Visual Studio Code from command line macOS
How to Add Comma to Each Line Using Visual Studio Code or Sublime Text

Further Reading

Key Bindings for Visual Studio Code

Download

Visual Studio Code

How to Make Visual Studio Code Colorize Classic ASP Code

If you still have to do development with Classic ASP or VBScript and you want to use Visual Studio Code, you’ll soon find out that even though the code editor was built by Microsoft, there’s no language colorization support for ASP code by default. Fortunately, adding the feature can be done easily using Extensions. So here are the steps to do so:

  1. Launch Visual Studio Code and click on Go and select Go to File… or just press CTRL-P.

    Visual Studio Code Goto File

  2. On the dialog box, type in the following: ext install classic asp and press [ENTER].

    Another way to do it, you can just click on the Extensions icon (it should be the last one on the left-hand side (or press CTRL+SHIFT+X) and type in classic asp in the search box.

    Visual Studio Code Ext Install Classic ASP

  3. Select Classic ASP by Ilya Verbitskiy and click on the Install button as shown below:

    Visual Studio Code Extensions Marketplace for Classic ASP

  4. Once installed, we still have to associate the asp file extension to the newly ASP colorizer so we don’t have to manually select ASP as the language every time we open an ASP file. As it is now, Visual Studio Code still has no way to detect it as an ASP page so it will treat it as an HTML file.

    From the File menu, open Preferences and select Settings (CTRL + ,).

    Visual Studio Code Preferences Settings

  5. In Search settings box, type in “file associations” and you can either click on the Add Item button and populate the Item and Value (option 1), or you can click on link Edit in settings.json (option 2). In the older version of Visual Studio Code, only option 2 was available, but now if you only have a few entries, option 1 would be easier to do.

    Visual Studio Code Settings File Associations

  6. If you chose option 1, after adding the items, if you clicked on Edit in settings.json you should see the following:

    "files.associations": {
  "*.asp": "asp",
  "*.vbs": "asp",  // optional
  "*.inc": "asp"   // optional
}

    Visual Studio Code file associations User Settings

    If you chose option 2 though, you have to add those in yourself.

  7. Save the file (CTRL-S) and close it.

That’s all there is to it, now you every time you open an asp file (or vbs script for that matter), the selected Language Mode will be set to ASP and any classic ASP code will be colorized accordingly.

This is not limited to ASP only, you can always look for any language of your choice by going to Visual Studio Marketplace.

Further Reading

Adding Language Colorization
How to Reassign Shortcut Key for Column Selection in Visual Studio Code

Download

Visual Studio Code
Classic ASP (Classic ASP Language Support) – Ilya Verbitskiy

How to Use Your Favorite Text Editor in Git

After installing Git and initially configuring it, you can further configure it to use your favorite text editor as the default. What you need to do is set the value of core.editor to the program file of your editor and add a flag -w at the end. The -w basically is to tell Git to wait until all operations within the text editor is done before Git can continue to do its thing afterwards.

Windows

git config --global core.editor '"C:\Program Files\Sublime Text 4\sublime_text.exe" -w'

Pay attention to the placement of single quote (‘) and double quotes (“). You want to enclose the whole path of your editor within the quotes, then wrap the whole argument with the flag with the other.

You can use single quote or double quotes interchangeably as long as they’re consistent
(i.e., "'C:\Program Files\Sublime Text 4\sublime_text.exe' -w" works the same way as in the example above).

macOS / Linux

git config --global core.editor "subl -n -w"

Now, if you want to see if the text editor is set correctly, just type in this command:

git config --global --list

And you should see the core.editor value listed to look like this:
Git config --global --list command

Sublime Text is used as an example just because it’s available on Windows, OSX, and Linux. You can certainly substitute the path or program name with whatever text editor you have.

Using Visual Studio Code

Update 9/27/2021: If you use Visual Studio Code as your main editor, the setup is even more simple and this is actually is the more recommended setup now since this post was published (Visual Studio Code can be downloaded from the link at the bottom of this post).

You just need to type the following:

git config --global core.editor "code -w"

If you use macOS, before this configuration can work, you need to setup Visual Studio Code so it can be called from the command line. Then the Git setup to use it is the same on both Windows and macOS.

Further Reading

How to Open Visual Studio Code from command line macOS
How to Enable Font Ligatures in Visual Studio Code
How to Install Git
Basic Configuration in Git

Download

Visual Studio Code
Git

Recent Posts

Tags

.NET .NET Core AdSense ASP.NET Cdonts Dll Classic ASP Code Editor ETL FSharp Genesis Framework Git Google HP Asset Manager HTML5 Hugo IIS Information Security Internet Internet Information Services iOS JAMStack Linux macOS Microsoft Microsoft SQL Server MVC PHP PowerShell Python Simple Mail Transfer Protocol Smtp Server SQL SQL Server SSIS SSMS SSRS Sublime Text Visual Studio Visual Studio Code VPN Windows Windows 8 Windows 10 Windows 2012 Windows Server