VS Code

From NoskeWiki
Jump to navigation Jump to search

About

Visual Studio Code (VS Code - code.visualstudio.com) is a powerful, open-source code editor developed by Microsoft. It is widely used by developers for its versatility, performance, and extensive feature set.


Keyboard Shortcuts

VS Codes default keyboard shortcuts.

The ones I'm using most:

  • Search:
    • [cmd]+[p] - Search for file.
    • [cmd]+[shift]+[p] - Search commands.
    • [ctrl]+[g] - Go to line #.
  • Misc:
    • [opt]+[cmd]+[f] - Find/replace (pretty standard).
    • [ctrl]+[10] - I custom set this up to format my imports.
    • [ctrl]+[j] - Sort selected lines.
    • [ctrl]+[~] - Open terminal.
    • [shift+[cmd]+[f] - Format file -> or prompt you to install a formatter for that file type.
  • My custom ones (you can setup your own):
    • [F1] - Terminals Run - opens Terminals Manager terminal set.
    • [F9] - Sort Lines Ascending.
    • [F10] - TypeScript: Sort Inputs.


Child Pages

Related/Child Pages:



Extensions

Here are some extensions I've used:

  • Code Formatting: (type "[shift]+[opt]+[f]" to pick one for each filetype)
    • Black Formatter - Auto formatting for python files.
    • Prettier - Auto formatting for javascript/typescript/markdown and yml files.
  • Novel Syntax Highlighting:
    • Rainbow CSV - Highlight columns in comma (.csv), tab (.tsv), semicolon and pipe - separated files in different colors.
    • Better Comments - More human-friendly comments in your code. With this extension, you will be able to categorise your annotations into: Alerts, Queries, TODOs.
  • Tool Related:
    • Docker - Makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. 28M downloads!
    • GitHub Pull Requests and Issues - Allows you to review and manage GitHub pull requests and issues in VS Code.
    • Tiltfile - An improved editing experience for Tiltfile authors.
  • Code Related:
    • Python - Rich support for the Python language (for all actively supported versions of the language: >=3.7), including features such as IntelliSense (Pylance), linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more. 104M downloads!

And some I may want to try:

  • Git Graph - View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want. Recommended by Elliott
  • Draw.io Integration - Looks neat if you like Draw.io.


Some of the extensions I've tried.

Tips & Tricks

Open Multiple Workspaces and Make Each a Different Color

You can open multiple workspaces at once by having multiple windows... but you may want to make them different colors so you don't confuse them.

Open multiple workspaces:

  • Open a folder.
  • Save a workspace.
  • Click File > New Window.
  • ... create another workspace.
  • In the second window click:
    • File/Code > Settings... > Settings.
    • Then in the Settings scroll to Workbench > Appearance > Color Scheme and select something new.
Assigning unique color to this workspace.


Snippets

The snippet feature is cool! I just type p[TAB] (yup the tab key) and it will input a snippet (in this case `// prettier-ignore`). And pretty fancy is that if you type l[TAB] (similar to Snippet’s default suggestion), it will start a `console.log` but automagically let you type into multiple places at once... like this:

Snippet in action.


To enable this you have to click [shift]+[apple]+[p] then type “Snippets: Configure User Snippets”… and I called mine “NoskeSnippets.code-snippets” and here’s what I have currently:

/**
 * GLOBAL SNIPPET FILES (NoskeWnippets.code-snippets)
 *
 * These are some global snippets for VS Code.
 *
 * Each snippet is defined under a snippet name and has a scope, prefix, body and 
 * description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
 * is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
 * used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
 * $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
 * Placeholders with the same ids are connected.
 *
 * Example:
 *   "Print to console": {
 * 	  "scope": "javascript,typescript",
 * 	  "prefix": "log",
 * 	  "body": [
 *   		"console.log('$1');",
 *   		"$2"
 * 	  ],
 * 	  "description": "Log output to console"
 *   }
 */
{
	// TYPESCRIPT:

	"Console Log": {
		"scope": "javascript,typescript,typescriptreact",
		"prefix": "l",
		"body": "console.log(\"$1: \", $1); // DO NOT SUBMIT",
		"description": "Insert console.log statement"
	},
	"Prettier Ignore": {
		"scope": "javascript,typescript,typescriptreact",
		"prefix": "p",
		"body": "// prettier-ignore",
		"description": "Insert // prettier-ignore"
	},

	// PYTHON:

	"Print Log": {
		"scope": "python",
		"prefix": "p",
		"body": "print('$1: ', $1)  # DO NOT SUBMIT",
		"description": "Insert print statement"
	}
}


Videos

  • 25 VS Code Productivity Tips and Speed Hacks - Great tips... for instance: VS Code CLI, Release the Mouse, Command Palette Ctrl+P, Run Commands, Quokka, Find Symbols with @, Find symbols with #, Move Around Quickly, Multiline Editing (alt click), Auto Rename Tag, Delete or move a line, Highlight & Comment Lines, JS Doc Extension, Better Comments, Integrated Terminal, Tasks, Git Source Control, Git Lens Extension, Remote Repositories, Remote SSH & Containers, Custom Snippets, Community Snippets, Auto-create directories, Paste as JSON, Rename Symbol

More Detail

Key Features

  • Intelligent Code Completion - VS Code offers IntelliSense, providing smart completions based on variable types, function definitions, and imported modules.
  • Debugging Tools - Integrated debugging tools support with breakpoints, call stacks, and an interactive console.
  • Extensions - A vast marketplace of extensions enhances functionality, including additional languages, themes, debuggers, and more.
  • Git Integration - Built-in support for committing, pulling, and pushing code to and from Git repositories.
  • Customizable Workspace - Workspaces can be customized with different themes, keyboard shortcuts, and preferences tailored to specific projects.
  • Multiple Language Support - Supports a wide array of programming languages natively and through extensions.
  • Built-in Terminal - Includes an integrated terminal for running shell commands within the editor.
  • Remote Development - Supports remote development, allowing use of a container, remote machine, or WSL as a development environment.
  • Source Code Control Integration - Apart from Git, supports other source control systems through extensions.
  • Tasks and Snippets - Automates common tasks and provides code snippets for faster coding.
  • GitHub Copilot - A popular paid AI-powered code completion tool developed by GitHub in collaboration with OpenAI, that integrates into VS Code. Incredible autocomplete.

Integration with Modern Development Tools

VS Code has many integrations, here are just a few ones.

Tilt Integration
For Kubernetes development, integrates with Tilt for developing and deploying containerized applications.
Docker Integration
The Docker extension simplifies building, managing, and deploying containerized applications.
Minikube Integration
Integrates with Minikube for local Kubernetes development, facilitating Kubernetes cluster management and application development.

My Settings

Here are my user settings and project settings for my own reference:

{
  "workbench.colorTheme": "Visual Studio Dark",
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "githubIssues.queries": [
    {
      "label": "My Issues",
      "query": "default"
    },
    {
      "label": "Created Issues",
      "query": "author:${user} state:open repo:${owner}/${repository} sort:created-desc"
    },
    {
      "label": "Recent Issues",
      "query": "state:open repo:${owner}/${repository} sort:updated-desc"
    }
  ],
  "git.autofetch": true,
  "editor.minimap.renderCharacters": false,
  "workbench.iconTheme": "Monokai Classic Icons",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "files.autoSave": "afterDelay",
  "git.enableSmartCommit": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.tabSize": 2,
  "diffEditor.ignoreTrimWhitespace": false,
  "chatgpt.apiKey": "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",
  "chatgpt.timeoutLength": 60,
  "better-comments.highlightPlainText": true,
  "better-comments.tags": [
    {
      "tag": "SUBMIT",
      "color": "#FF0000",
      "strikethrough": true,
      "underline": true,
      "backgroundColor": "transparent",
      "bold": true,
      "italic": false
    },
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "#",
      "color": "#98C379",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
  ]
}


{
	"folders": [
		{
			"path": "../repo"
		}
	],
	"settings": {
		"editor.formatOnSave": true,
		"[typescript]": {
		  "editor.defaultFormatter": "esbenp.prettier-vscode",
			"editor.tabSize": 2			
		},
		"[typescriptreact]": {
		  "editor.defaultFormatter": "esbenp.prettier-vscode",
			"editor.tabSize": 2
		}
	}
}


See Also

  • GitHub - A web-based code hosting platform that is often used in VS Code projects.
  • GitHub Copilot - An AI-powered code completion tool developed by GitHub in collaboration with OpenAI.

Links