code -h
Visual Studio Code 1.25.1

Usage: code [options] [paths...]

To read from stdin, append '-' (e.g. 'ps aux | grep code | code -')

Options:
  -d, --diff <file> <file>           Compare two files with each other.
  -a, --add <dir>                    Add folder(s) to the last active window.
  -g, --goto <file:line[:character]> Open a file at the path on the specified line and character position.
  -n, --new-window                   Force to open a new window.
  -r, --reuse-window                 Force to open a file or folder in an already opened window.
  -w, --wait                         Wait for the files to be closed before returning.
  --locale <locale>                  The locale to use (e.g. en-US or zh-TW).
  --user-data-dir <dir>              Specifies the directory that user data is kept in. Can be used to open multiple distinct instances of Code.
  -v, --version                      Print version.
  -h, --help                         Print usage.

 var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue 1!'
  }
})

 var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue 2!'
  }
})

code --diff app1.js app2.js

1. Create a project with git initialized.
2. Make some changes
3. Commit the changes

git init
code .

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Scotch!'
  }
})

• A helpful Context Menu: - When you click on the menu icon ... within the Git Panel, this is what you see.

1. https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code
2. https://scotch.io/tutorials/debugging-node-code-in-vs-code
3. https://scotch.io/@chenster/debugging-php-in-visual-studio-code205

function name() {
  return "scotch"
}

function age() {
  return 8
}

function nameAndAge() {
  return {
    name: name(),
    age: age(),
  }
}
console.log(name())
console.log(age())
console.log(nameAndAge())

• Peek Definition - this allows you to see the definition of a function/variable, without navigating to the it, even if it's in a different file. It works with multiple languages, though sometimes you need to install the relevant plugins. To access it, right click in the line console.log(nameAndAge()), and click on peek definition in the context menu. . VS Code will find the function, and give you an overlayed editor to peek on what's going on. You can also select Go To Definition, and you will be taken directly to where the function/variable is defined.
• Find All References - This works pretty similar to Peek Definition. Right click on the function nameAndAge, and select Find All References. On the right of the overlayed editor, you will see a list of all the places the function has been referenced. This is useful in giving you an overview of how much a piece of code affects your whole codebase.
• Rename Symbol - Also found in the context Menu, this allows you to rename a function or variable, and it will be changed everywhere it is referenced in the codebase.
• Refactor - Currently, this works mainly for TypeScript and JavaScript, but it allows you to refactor code. e.g move a function into a file. In our example, if you right click on the nameAndAge function and click on refactor, one option will be Move To New File, and when you click on that, the function is removed, and put into a new file called nameAndAge.js

function nameAndAge() {
  return {
    name: name(),
    age: age(),
  };
}

• Intellisense - Intellisense usually allows you to list members of a struct, class or object, and even get required parameters for functions, that makes writing code faster and less error prone. This is supported by default for JavaScript and TypeScript, but you may have to install language specific plugins to support the language you are using. You can also hover over anything:- variables, functions and see a pop up telling you more about them. Below is a hover over the log function in console
• NPM Scripts - This sounds like it should be a feature in its own, but I'll just put it here. NPM Scripts are usually commands that we put in the scripts section of the file package.json.

"scripts": {
    "start": "node index.js"
  }

• Outline - Outline was released recently, and I can't believe how much I use it. It essentially gives you an overview of your code, and navigates to sections you click on.

• Linters
  • ESLint - This enables us lint JavaScript ES code based on eslint rules we provide.
  • TSLint - This enables us link Typescript code based on tslint rules we provide
  • Prettier - Prettier is a common code formatter with growing popularity and enables linting of JavaScript, Typescript and CSS.
• Language Support :- Visual Studio Code has syntax support for most common languages, but to get full language feature and tools, you will find yourself downloading language plugins. Since I write mostly JavaScript and Golang I have the vscode-go tools installed. You can see a list of language plugins here
• Git - There are many plugins that add more support for Git, but the most common one is Git Lense. Here's an example feature: Whenever you click on a line of code, it shows you who edited it, and a little more info about it. You can read more in the GitLense Documentation
• Settings - The most common settings plugin is called Settings Sync, and allows you to sync your VS Code installations on different devices.
• Docker - Developing with Docker can sometimes mean running complex docker commands, and monitoring things. Installing this Docker Extensions adds some helpful docker tools, such as generating docker files, docker files intellisense, and even monitoring. Here's an example of my running containers in VS Code right now. Also comes with a useful context menu. If you are familiar with docker, you'll find this plugin quite helpful.
• NPM - I've already explained the inbuilt npm tools above. Here are a few plugins that make my npm work easier.
  • Version Lense - Easily manage versions of your npm packages.
  • Import Cost - Easily see the bytes every package import brings in your codebase.
• Markdown All in One - this allows you to edit markdown as though you were writing a word document, and many other features. Useful if you write a lot of markdown.
• Frameworks - I work mainly with VueJS and Golang, but there are a couple of plugins that support the various javascript frameworks.
  • Vetur - This gives support for VueJS
  • Angular Essentials - For Angular Developers.
  • React developers, please leave a comment, I'll edit the article ;-).