VS Code Tips & Tricks

We would be adding a file header extension that would automatically add the RazeWare copyright license text to the head of any new file created. For this, we would be installing “psioniq File Header” extension. Go ahead and install it.

Next, create a new file. Open up the command palette and search for “file header” and select “Header Insert”. This adds the default file header to the file. That’s not what we want so let’s customize it.

Open up the workspace’s settings.json file. Paste the following code:

...
"psi-header.config": {
  "forceToTop": true,
  "license": "Custom"
},
"psi-header.license-text": [
  "Copyright (c) <<year>> Razeware LLC",
  "",
  " Permission is hereby granted, free of charge, to any person obtaining a copy",
  " of this software and associated documentation files (the \"Software\"), to deal",
  " in the Software without restriction, including without limitation the rights",
  " to use, copy, modify, merge, publish, distribute, sublicense, and/or sell",
  " copies of the Software, and to permit persons to whom the Software is",
  " furnished to do so, subject to the following conditions:",
  "",
  " The above copyright notice and this permission notice shall be included in",
  " all copies or substantial portions of the Software.",
  "",
  " Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,",
  " distribute, sublicense, create a derivative work, and/or sell copies of the",
  " Software in any work that is designed, intended, or marketed for pedagogical or",
  " instructional purposes related to programming, coding, application development,",
  " or information technology.  Permission for such use, copying, modification,",
  " merger, publication, distribution, sublicensing, creation of derivative works,",
  " or sale is expressly withheld.",
  "",
  " THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR",
  " IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,",
  " FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE",
  " AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER",
  " LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,",
  " OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN",
  " THE SOFTWARE."
],
"psi-header.templates": [
  {
    "language": "*",
    "template": [
      "Created By: <<author>> on <<filecreated('dddd, MMMM Do YYYY, h:mm:ss a')>>",
      "",
      "<<licensetext>>"
    ]
  }
],
"psi-header.changes-tracking": {
  "autoHeader": "autoSave"
}
...

These are some settings for the extension we just installed. First is the psi-header.config object. We set forceToTop to true which adds the header to the top of the file when you run the command. The default adds the header to the cursor position.

We also set the license to Custom since we would be providing our custom license. Next is the license text which is just an array where each element represents a line in license text. Variable are passed inside double angle brackets.

The extension provides variables that access system values and we can also define our custom variables. In this case, year is defined by the extension and this gets the current year.

The psi-header.templates is where we define the template that would be shown as the file header content. We set the language to global template which is denoted by an astetrix. Then we pass in the lines to show as a string array.

We use the author variable which gets the logged in user’s name and we use the fileCreated() system function to get the file creation date and time.

Next, we passed the licensetext variable we created earlier to display it in there. Finally, we set autoHeader to autoSave. This automatically adds the file header whenever a new file is created and saves it immediately.

Save the file and let’s create a new file in the widgets folder. You can see the file header is added and the variables display their expected values. Next is the macros extension. This extension simply lets you execute multiple commands with just one shortcut.

Go ahead and install it. Next, open up your workspace settings and add this:

...
"macros": {
  "openSettings": [
    "workbench.action.toggleSidebarVisibility"
    "workbench.action.openSettingsJson",
    "workbench.action.openSettings",
    "workbench.action.moveEditorToNextGroup",
  ]
}
...

You added the macros object with one command: the openSettings command. This command executes multiple commands. The first command simply toggles the sidebar’s visibility. After that, it opens up the settings in JSON view. Then, it opens up the ui settings. Finally, it moves the ui settings into a new editor group.

So this sequence would result in hiding the sidebar and opening the settings for both the ui and JSON view side by side. Next, we need to add the keybinding to run this macros.

Open up the command palette and search for shortcut. Select “Open Keyboard Shortcut (JSON)”. Paste the following code:

...
{
  "key": "ctrl+shift+/",
  "command": "macros.openSettings"
}

This assigns the ctrl+shift+/ keys to execute the macros.openSettings command. Notice the command name match the macros you created previously. Save this file and close all editors. Press Ctrl + Shift + / to execute the openSettings command.

Your sidebar is hidden and the settings views are open for both the ui view and the JSON view.