You are here:Home»KB»Programming»My Visual Studio Code Notes
Sunday, 03 November 2024 15:26

My Visual Studio Code Notes

Written by

These are my notes on setting up VSCode for my programming platform for now and the future. This software is always being imporved and is used by so many developers and with a vast array of extensions I cannot see this changing any time soon.

  • Overview
    • Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favourite platform - Linux, macOS, and Windows.
    • A standalone source code editor that runs on Windows, macOS, and Linux. The top pick for JavaScript and web developers, with extensions to support just about any programming language.
    • Microsoft Visual Studio Code is a free, powerful, lightweight code editor for Windows, macOS and Linux. Based on open source, it is highly customizable with over 25,000 extensions, for every developer and every programming language.
    • Although VSCode is classed as a text editor, it is now more like an IDE but requires you to install extension for functionality you need.
  • All the names for Visual Studio Code
    • Visual Studio Code
    • VSCode
    • VS Code
  • Features of note
    • Integrates with Docker Desktop
    • Copilot built in
    • 25,000+ extensions
    • VSCode can be installed in the cloud
  • Misc
    • When on any GitHub repo, if you press the period "." then it will change the page to an online VSCode editor.
    • You can install extensions globally or in a workspace.
    • Command key on the Mac = Ctrl key on the PC
  • Visual Studio vs Visual Studio Code
    • Visual Studio 2022 Community Edition – Download Latest Free Version
      • Try our free, fully-featured, and extensible IDE for creating modern developer apps for Windows, Android, & iOS. Download Community for free today!
      • The download is a Stub-Installer, not a full offline package.
    • Visual Studio Code vs Visual Studio - YouTube
      • Deciding on Visual Studio or Visual Studio Code is not just a personal decision but based on the best option for the operating system and application type you are building.
      • There is a community editions or Visual Studio.
      • VSCode is a text editor which can be extended by plugins.
    • Visual Studio Ide vs Code: What's the difference between visual studio and vs code? - DEV Community
      • Visual Studio is a full IDE (integrated development environment) primarily used for .NET development. Debugger, refactor-er, compile, create packages, and more. The full version that supports .NET and .NET Core is not cross-platform. It is only on Windows. It also is used for other languages, but primarily for .NET C#/F#/etc development for and on Windows machines/servers. Working with .NET 4.x, WCF, WebAPI, building DLLs? Use Visual Studio probably. I do not use Visual Studio, but I am not a Windows/.NET dev.
      • Visual Studio Code is a text editor with lots of optional plugins -- it is more akin to Atom, SublimeText, and BBEdit. It has some features of Visual Studio, like syntax highlighting, some code sense, and other neat features. It is cross-platform and can be used for writing pretty any language. I use it on Mac and Linux for PHP, Python, HTML5, JavaScript, NodeJS, and more.

Official Websites

Glossary

  • The terms Folder, Root Folder, Project Folder and Workspace are all interchangeable and just mean the root folder of your project. It does not mean you can only have one folder with only files in it.
  • Use the term Workspace when referring to folder your project is in, most people will understand what you mean.
  • Workspaces / Folder / Root Folder
    • Workspaces in Visual Studio Code - Official Docs
      • You may see the terms "folder" and "workspace" used interchangeably in VS Code documentation, issues, and community discussions.
      • Think of a workspace as the root of a project that has extra VS Code knowledge and capabilities.
      • Single-folder workspaces: You don't have to do anything for a folder to become a VS Code workspace other than open the folder with VS Code. Once you open a folder, VS Code automatically keeps track of configuration, such as your open files or editor layout. When you reopen that folder in VS Code, the editor will be as you left it previously.
      • A "workspace" is just your project's single root folder.
    • How to Create a New Workspace in Visual Studio Code - YouTube | Codex Creator
      • File --> Add Folder to Workspace
  • Multi-root Workspaces
    • Multi-root Workspaces in Visual Studio Code
      • You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
      • Unless you are explicitly creating a multi-root workspace, a "workspace" is just your project's single root folder.
      • A Visual Studio Code (VS Code) workspace is a collection of one or more folders that are opened in a VS Code window. This concept allows developers to manage settings, tasks, and configurations specific to their projects. Workspaces can be single-folder or multi-root, depending on the development workflow.
      • Single-folder Workspaces: In a single-folder workspace, you simply open a folder in VS Code, and it automatically tracks configurations such as open files and editor layout. This setup is straightforward and ideal for most projects. You can also add folder-specific configurations like workspace-specific settings, task definitions, and debugging launch files.
      • Multi-root Workspaces: Multi-root workspaces allow you to work with multiple distinct folders in the same workspace. This is useful when working on related projects simultaneously. You can create a multi-root workspace by opening a .code-workspace JSON file that lists all the folders in the workspace.
  • Command Palette
    • Search content, issue commands and do other things.
    • Very powerful
  • IntelliSense
    • Code completion with code explanations in a modal
  • Linting
    • Tells you of bugs or errors while you type your code
    • These errors can be highlighted by using a squiggly line under the faulty code.
  • Language Server Protocol (LSP)
    • VSCode `Language Packs` use this protocol as their standard.
    • Official page for Language Server Protocol
      • Language Server Protocol documentation and specification page.
      • The Language Server Protocol (LSP) defines the protocol used between an editor or IDE and a language server that provides language features like auto complete, go to definition, find all references etc. The goal of the Language Server Index Format (LSIF, pronounced like "else if") is to support rich code navigation in development tools or a Web UI without needing a local copy of the source code.

Settings

  • The settings file is located
    c:\Users\<yourusername>\AppDataRoaming\Code\User\settings.json
    • Settings will not appear in this file if they are default.
  • Profiles
    • These can have different settings and extensions for different scenarios

Tutorials

Extensions you can use

This is a list of the plugins I use. The list was correct when I started and should be a god list for other people who do no now where to start. You don't need to install them all, just the ones that will be useful to you.

  • Extensions Packs
    • These sometimes are almost like their own piece of software.
    • PHP
      • All-in-One PHP support - IntelliSense, Debug, Formatter, Code Lenses, Code Fixes, Linting, Refactoring, PHPUnit Tests, Web Server, and more.
      • PHP Tools for VS Code is a full development integration for the PHP language. The features are provided respecting conventions, stability, simple use, and performance. Please see the product page for more details on devsense.com.
      • This package extends VS Code with fast code completion, advanced editor features, code fixes, code lenses, code generators, debugger, built-in development web server, test explorer, tests debugger, and workspace-wide code analysis.
      • Free and Paid version.
    • PHP Tools for Visual Studio and VS Code by DEVSENSE - PHP Tools turns Visual Studio and VS Code into a powerful PHP development environment. Edit, analyze, refactor, test & debug code in PHP.
  • Styling VSCode (Not Themes)
    • vscode-icons - Improved file icons for Visual Studio Code
    • vscode-styled-components
      • Syntax highlighting and IntelliSense for styled-components.
      • Not sure what this is for but it is popular.
    • Apc Customize UI++
      • Advanced VSCode user interface customizations. Very experimental.
    • Vibrancy Continued
      • Vibrancy Effect for Visual Studio Code.
      • This gives a glass look and feel to the editor., a semi-transparent effect.
      • This may cause an error message "Your Code Installation appears to be corrupt. Please reinstall". This is caused because the VSCode CSS is being altered.
      • Set the your theme back to the system default which is "Dark+"
    • Peacock
      • Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
      • If you frequently have multiple VS Code instances open and struggle to tell them apart, Peacock might be worth taking a closer look at, the extension subtly changes the color theme of your workspace.
      • But it’s not only when working on multiple projects at once where Peacock shines. It also comes in handy when using VS Live Share or VS Code’s Remote features and you quickly want to identify your editor.
  • Programming Languages
    • Python
      • Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.
    • Language Server for Java by Apache NetBeans
      • Apache NetBeans Language Server Extension for Visual Studio Code
      • This is Apache NetBeans Language Server extension for VS Code. Use it to get all the goodies of NetBeans via the VS Code user interface! Runs on JDK11 and all newer versions.
      • Apache NetBeans Extension for Visual Studio Code | apache.org - VSNetBeans, the Apache NetBeans Extension for Visual Studio Code, is created as a promotional tool by the Apache NetBeans community for VS Code users.
    • json
      • This extension adds json support for Visual Studio Code.
    • YAML
  • Data
    • Sort JSON objects
      • Sorts the keys within JSON objects
    • Excel Viewer
      • Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web.
  • Database
    • SQLite Viewer
      • A quick and easy SQLite viewer for VS Code, inspired by DB Browser for SQLite and Airtable.
  • System Integration
    • Docker
      • This Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.
  • File Integration
    • Draw.io Integration
      • This unofficial extension integrates Draw.io into VS Code.
      • View UML Diagrams.
      • When you create a new file, it needs to have the .drawio file extension to be recognised as a suitable Draw.io project.
      • You can export these diagrams easily.
    • Excel Viewer
      • Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web.
    • SVG Previewer
      • Show SVG preview to the side panel
    • SVG
      • SVG Coding, Minify, Pretty, Preview All-In-One
      • A Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.
      • I have not seen this used yet, but it seems to be popular.
    • Image preview
      • Shows image preview in the gutter and on hover
  • File Handling
    • File Utils
      • A convenient way of creating, duplicating, moving, renaming and deleting files and directories.
    • FileOps
      • VS Code extension to import, group, bookmark, quick switch files, text transformations & keyboard shortcuts.
      • Look at the animation for better idea of the functionality.
    • advanced-new-file - Visual Studio Marketplace
      • Create files anywhere in your workspace from the keyboard
    • Duplicate action
      • Ability to duplicate files and directories in VS Code.
  • Media
    • Color Picker
      •  Helper with GUI to generate color codes such as CSS color notations.
    • Color Info
      • Provides quick information about css colors
    • Color Manager
      • color picker and color palette
      • Not sure if this is needed
  • AI Code Autocomplete / AI Testing
    • GitHub Copilot
      • GitHub Copilot is an AI pair programmer tool that helps you write code faster and smarter.
      • The service is not free.
    • Tabnine
      • AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more
      • Tabnine is the AI code assistant that accelerates and simplifies software development while keeping your code private, secure, and compliant. It provides accurate, highly personalized results for generating code, writing unit tests, creating documentation, explaining legacy code, fixing code, and mu
      • This is an alternative to Github Copilot.
    • Pieces
      • AI assisted code snippet manager.
      • An on-device storage agent and AI coding assistant integrated throughout your entire toolchain that helps developers capture, enrich, and reuse useful code, as well as debug, add comments, and solve complex problems through a contextual understanding of your unique workflow.
      • Pieces for Developers - Long term memory for developer workflows - Pieces is your AI companion that captures live context from browsers to IDEs and collaboration tools, manages snippets and supports multiple LLMs.
    • IntelliCode
      • The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
      • This is an AI assistant for Python, TypeScript, JavaScript and Java and IntelliCode is an AI boosted upgrade to the built-in IntelliSense code completion feature of VSCode. It uses AI to provide more accurate suggestions for code completion. It does this by analysing a developers code context to make these better suggestions.
      • It is not as powerful as GitHub Copilot but it is free.
    • Qodo Gen: AI Coding Assistant
      • AI Coding Assistant (Codium VS Code) - Code, Test and Review with Confidence, supporting Python, Javascript, Typescript, Java, PHP, Go, and more
      • Qodo Gen (formerly Codiumate) (formerly Codium) is a quality-first generative AI coding platform that offers busy developers a comprehensive AI code assistant for generating code, writing unit tests, and creating documentation. With Qodo Gen, developers can leverage the power of AI directly within their IDE and Git.
      • Will generate tests fr your code.
  • IntelliSense
    • VSCode might have in-built IntelliSense for PHP
    • PHP Intelephense
      • PHP code intelligence for Visual Studio Code
    • Path Intellisense
      • Visual Studio Code plugin that autocompletes filenames
    • npm Intellisense
      • Visual Studio Code plugin that autocompletes npm modules in import statements
    • :emojisense:
      • Adds suggestions and autocomplete for emoji
    • IntelliSense for CSS class names in HTML
      • CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
      • A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
  • Code Insertion (Manual)
    • IntelliCode API Usage Examples
      • See relevant code examples from GitHub for over 100K different APIs right in your editor.
    • Regex Snippets
      • Easily Insert Popular Regex Codes Without Memorising Anything!
      • A VS Code Extension with a list of 50+ hand picked Regex Code Snippets to make lives of many Developers much easier.
  • Code Correction (Linting)
    • ESLint
      • Integrates ESLint JavaScript into VS Code.
      • This is a linter for Javascript and Typescript
    • HTMLHint
      • VS Code integration for HTMLHint.
      • A Static Code Analysis Tool for HTML
      • a linter for HTML.
    • Stylelint
      • Official Stylelint extension for Visual Studio Code
      • Linter for CSS, LessCSS
      • ForrestKnight says the inbuilt CSS linter of VSCode is good enough for him but could be good for others
    • Code Spell Checker
      • A basic spell checker that works well with code and documents.
      • The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
    • phpcs (PHP CodeSniffer)
      • This linter plugin for Visual Studio Code provides an interface to phpcs. It will be used with files that have the “PHP” language mode.
    • markdownlint
      • Markdown linting and style checking for Visual Studio Code
    • Error Lens
      • Improve highlighting of errors, warnings and other language diagnostics.
      • i.e. it will highlight your code errors and what the errors are.
      • ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.
    • Gremlins Tracker
      • Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. Inspired by Sublime Gremlins.
      • I don't know if this is needed now because this might be part of modern linters.
  • Code Comments
    • Better Comments
      • Improve your code commenting by annotating with alert, informational, TODOs, and more!
      • The Better Comments extension will help you create more human-friendly comments in your code.
    • Document This
      • Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.
      • This is a Visual Studio Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.
    • Doxygen Documentation Generator
      • This VS Code Extensions provides Doxygen Documentation generation on the fly by starting a Doxygen comment block and pressing enter.
      • C and C++
    • TODO Highlight
      • highlight TODOs, FIXMEs, and any keywords, annotations...
      • Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.
    • Todo Tree
      • Show TODO, FIXME, etc. comment tags in a tree view.
      • This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
    • PHP DocBlocker
      • A simple, dependency free PHP specific DocBlocking package
  • Code Display / Information
    • Indent-Rainbow
      • Makes indentation easier to read
    • Bracket Pair Color DLW
      • A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Color DLW” setting added in VS Code v1.60.
      • Do I need this?
    • Bracket Pair Colorization Toggler
      • Quickly toggle 'Bracket Pair Colorization' setting with a simple command
      • Same as 'Bracket Pair Color DLW'
    • [Deprecated] Bracket Pair Colorizer 2
      • A customizable extension for colorizing matching brackets
      • This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.
      • I'm glad so many people found it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
    • Rainbow CSV - Visual Studio Marketplace
      • Highlights columns in comma (.csv), tab (.tsv), semicolon and pipe with different colors for easy of reading.
    • Auto-Open Markdown Preview
      • Open Markdown preview automatically when opening a Markdown file
      • This is old
    • Markdown All in One
      • All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
      • Note: VS Code has basic Markdown support out-of-the-box (e.g, Markdown preview), please see the official documentation for more information.
    • Markdown Preview Enhanced
      • Markdown Preview Enhanced ported to vscode
    • CSS Stacking Contexts
      • Highlights stacking contexts in CSS and ineffective z-index declarations.
      • This extension makes Stacking Contexts visible in CSS and SCSS, allowing you to write z-index declarations using small values with confidence.
      • What No One Told You About Z-Index, Philip Walton, Engineer @ Google
        • The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.
        • The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.
    • Version Lens
      • Shows the latest version for each package using code lens.
      • This extension shows version information when opening a package or project file in vscode.
      • It abides by semver rules and uses the Node Semver package to compare and sort versions.
      • Many languages supported.
    • Word Count
      • Markdown Word Count Example - a status bar contribution that reports out the number of works in a Markdown document as you interact with it.
      • It's pretty simple open up a Markdown file and the status bar will have an auto-updating wordcount in it.
    • Color Highlight
      • Highlight web colors in your editor.
      • This extension styles css/web colors found in your document.
    • DotENV
      • Support for dotenv file syntax
      • Enables syntax highlighting in your .env files.
  • Code Formatting
    • Prettier
      • Code formatter using Prettier
      • "editor.formatOnSave": true executes this extension on save formatting your code automatically.
    • Paste and Indent
      • This extension adds limited support for pasting and indenting code. Much like SublimeText's paste_and_indent.
      • This plugin will try and match the code you are pasting in with the current indentation level of your code.
    • Format HTML in PHP
      • Provides formatting for the HTML code in PHP files using JSbeautify - Works well paired with a PHP formatting extension.
      • This provides functionality that Prettier does not do. Things improve so this feature might get added but in the meantime.
  • Text Manipulation
    • Text Pastry
      • Extend the power of multiple selections in VS Code. Modify selections, insert numeric sequences, incremental numbers, generate uuids, date ranges, insert continuously from a word list and more.
    • change-case
      • Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
    • Permute Lines
      • Lets you reverse or shuffle lines of code or filter for unique lines.
    • Sort lines
      • Sorts lines of text.
      • Many options.
    • Auto Rename Tag
      • Auto rename paired HTML/XML tag
      • This will change the start and end tag instead of just the one you edit, so basically you are editing the pair in one go.
      • VSCode setting Editor: Linked Editing only works for HTML files.
    • Multiple cursor case preserve
      • Preserves case when editing with multiple cursors.
      • Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection case in these situations. It recognises CAPS, Uppercase and lowercase. Works for typing or pasting.
    • Indent 4-to-2
      • Convert indentation from tab or 4 spaces into 2 spaces.
  • Git Integration
    • GitLens
      • Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
      • Enhance your workflows with powerful Git functionality like in-editor blame annotations, hovers, CodeLens, and more—all fully customizable within VS Code. Try GitLens Pro's advanced workflows that accelerate PR reviews, provide rich interactive Git actions, and enhance collaboration for you and your team.
    • Git History
      • View git log, file history, compare branches or commit.
    • Git Graph
      • View a Git Graph of your repository, and perform Git actions from the graph. Configurable to look the way you want!
    • GitHub Pull Requests
      • Pull Request and Issue Provider for GitHub.
      • This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.
  • Productivity 
    • Import Cost
      • Display import/require package size in the editor
      • This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
      • Forces you to look at the size of your 3rd party Javascript packages straight in your editor.
      • This is for web designing and Javascript.
    • TypeScript Hero
      • Additional toolings for typescript
      • TypeScript Hero is a vscode extension that makes your life easier. When you are coding a lot of TypeScript you may want vscode to organize your imports.
    • Codecrumbs
      • Allow you to jump back and forth between edits removing the need to manually scroll or search for previous sections.
      • Not updates since 2021 and only 1.3K downloads
      • Codecrumbs - Take code complexity under control | codecrumbs.io - Codecrumbs is the set of tooling to help developers fill the gap between code and application logic in large codebase.
    • Bookmarks
      • Mark lines and jump to them.
      • This extension is great when you are working with large files, you can jump with the command Pallet or use keyboard shortcuts.
    • Project Manager - Visual Studio Marketplace
      • Easily switch between projects.
      • This is needed because each VSCode instance only works on one Workspace/Project at a time.
      • This amongst other things adds a favourites pane so you can select other projects you have been working on almost like a recently opened menu.
      • VSCode extensions to maximise your productivity - YouTube | Dev tips by MoHo
        • In this video, I am going to talk about two VS Code extensions that are going to save your time if you are working on multiple projects.
        • also install Peacock for clarity on which window is for which app.
  • Remote Development Servers
    • Remote - SSH
      • Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
      • This lets you use any remote machine with an SSH server as your development environment. 
  • Sharing / Collaboration / Digital Nomad
    • Live Share
      • Real-time collaborative development from the comfort of your favourite tools.
      • Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, and more!
    • Polacode
      • Polaroid for your code
      • Select the code you want a picture of for sharing, right click and Polacode will make a PNG image of the code for you to share as needed.
      • Makes a professional screenshot of your code. Looks great on twitter.
    • CodeTour
      • Allows you to record and playback guided tours of codebases, directly within the editor.
      • Excellent for making presentations for colleagues.
    • Settings Sync
      • Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
  • API Development
    • Postman
      • Streamline API development and testing with the power of Postman, directly in your favorite IDE.
      • The Postman VS Code extension enables you to develop and test your APIs in Postman directly from Visual Studio Code and Visual Studio Code Insiders.
    • REST Client
      • REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
  • Debugging
    • Console.Log
      • Turbo Console Log
        • Automating the process of writing meaningful log messages.
        • Turbo Console Log extension makes debugging much easier by automating the operation of writing meaningful log message.
        • Makes console.log messages much easier to use
      • Console Ninja
        • JavaScript console.log output and runtime errors right next to your code.
        • Console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It's like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.
        • Free and Paid versions.
      • Wrap Console Log Simple
        • Wrap to console.log(or any function name) by word or selection
        • Click a variable and it will make a console.log() function for logging.
    • Browser Integration
      • DevTools for Chrome App
        • A tool help to edit and debug when develop remotely chrome app.
        • Debug Javascript code, set breakpoints, set variables, step through.
      • [Deprecated] Debugger for Chrome
        • Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
        • This extension has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality. It is a debugger that debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more.
        • Introducing Chrome Debugging for VS Code - Chrome debugger extension for Visual Studio Code
      • Microsoft Edge Tools for VS Code
        • Use the Microsoft Edge Developer Tools from within VS Code to see your site's runtime HTML structure, alter its layout, fix styling issues as well as see your site's network requests.
    • PHP
    • Python
      • Python Debugger
        • Python Debugger extension using debugpy.
        • A Visual Studio Code extension that supports Python debugging with debugpy. Python Debugger provides a seamless debugging experience by allowing you to set breakpoints, step through code, inspect variables, and perform other essential debugging tasks. The debugpy extension offers debugging support for various types of Python applications including scripts, web applications, remote processes, and multi-threaded processes.
  • Unit Testing / Testing
    • Javascript
      • Jest
      • Jest Runner
        • Simple way to run or debug a single (or multiple) tests from context-menu.
        • vscode-jest-runner is focused on running or debugging a specific test or test-suite, while vscode-jest is running your current test-suite every time you change it.
      • Quokka.js
        • JavaScript and TypeScript playground in your editor.
        • Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
        • Show you the result of your code directly in your editor
        • Free and Paid versions.
  • Tasks
    • Task Explorer
      • Tasks management for npm, vscode, yarn, ant, gradle, grunt, gulp, batch, bash,php composer, make, maven, python, perl, powershell, ruby, pipenv, nsis. Supports external task providers via API.
  • Running Code / Previewing
    • Code Runner
      • Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, Mojo, Erlang, SPWN, Pkl, Gleam, and custom command.
      • Run code snippets and files easily with just a highlight and a right click. It takes care of the compiling on the fly.
    • Live Preview (from Microsoft)
      • Hosts a local server in your workspace for you to preview your webpages on.
      • You cannot execute html in the VScode terminal so we can use this extension to open in a browser preview right in Visual Studio code right click on file and then `Show Preview`.
    • Live Server
      • Launch a development local Server with live reload feature for static & dynamic pages
      • Every time a bit of code is changed the lve HTML page is refreshed.
    • Test Explorer UI
      • Run your tests in the Sidebar of Visual Studio Code
    • Python Test Explorer
    • Live Sass Compiler
      • Compile Sass or Scss to CSS at realtime with live browser reload.
      • A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.
  • Misc
    • vscode-pets
      • Pets for your VS Code
      • Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy in your code editor to boost productivity.
  • Themes

Extension Research

  • Setups (Extensions and settings)
    • My Visual Studio Code Setup for Web Development - YouTube | ForrestKnight
      • My focus lately as a developer has been building websites & web apps, and VS Code is the main tool I use to get that done. It's the most popular IDE/code editor among developers, according to the 2022 Stack Overflow Developer Survey. So, I want to show you how I use VS Code, my preferred extensions, my current theme, and my favorite VS Code settings that I’ve been using for many different types of web development.
      • Extensions: vscode-icons, Prettier, ESLint, HTMLHint, Stylelint, Auto Rename Tag, Tabnine, Live Server, Document This, Doxygen Documentation Generator
      • Themes: Andromeda
    • How to set up VSCode like a PRO! - YouTube | Syntax  - this is a tutorial+ setup
      • Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.
      • Extensions: Text Pastry, Better Comments, Auto Rename Tag, Change Case, Permute Lines, File Utils, Sort JSON objects, SQLite Viewer, Code Spell Checker, APC Customize U++
      • Themes: SyntaxFM, Cobalt2 Theme Official, Night Owl, Level Up
    • How to use VSCode Like a Pro (Senior Developer) - YouTube | CoderOne
      • We all love VSCode and work with it every day as developers, but do we actually use it as a Senior Developer? In this video, I'll show you Pro tips and tricks to unlock hiding and pro features of VSCode, from refactoring hundreds of lines of code in seconds to relaxing and doing YOGA using VSCode.
      • Check out a few themes to see which one you like best.
      • Make sure you use the command Pallet.
      • Profiles: These can have different settings and extensions for different scenarios
      • Extensions: Color Picker, Color Info, Color Manager, Docker, GitHub Copilot, GitLens, json, indent-rainbow, Prettier, TODO Highlight, vscode-styled-components, TypeScript Hero
      • Themes: Halcyon
    • How I Configure VS Code for Everything | by Aman Mittal | Better Programming - A Journey on sorting out what VSCode extensions to use.
      • This is the setup Aman now uses for his JavaScript, Node.js, React and React Native work. This has some nice setup steps with settings.
      • Extensions: :emojisense:, Bracket Pair Colorizer, Code Spell Checker, Code::Stats, ESLint, Indent 4-to-2, Express.js, markdownlint, GitHub Pull Requests, Import Costs, npm Intellisense, Path Intellisense, Pug, IntelliSense for CSS class names in HTML, React Native Tools, Todo Tree, Version Lens, Settings Sync, Word Count, Prettier
      • Themes: fairyFloss, Dracula Official, Night Owl, Material-Icon-Theme
  • Extensions Only
    • Visual Studio Code Extensions to Improve Your Productivity - YouTube | freeCodeCamp.org
      • Learn about 10 helpful VS Code extensions. These VSCode extensions could make you more productive as a developer.
      • Extensions: GitLens, LiveShare, Pieces, Better Comments, Turbo Console Log, Code Runner, Import Cost, Prettier, ESLint, Docker
    • VS Code extensions that I can't live without! - YouTube | Kevin Powell
      • I'm far from a VS Code power user, but that doesn't mean that I don't use a handful of extensions! As someone who writes primarily HTML and CSS, these are the ones that I find the most useful for my workflow.
      • Extensions: Bracket Pair Colourizer, Bracket Pair Colourizer 2, Live Server, Prettier, Auto Tag Rename, SVG Previewer
      • Themes: Atom One Dark, One Dark Pro
    • 26 Best VSCode Extensions for 2024 - YouTube | SkillCurb
      • In this comprehensive video we will go over the 26 best VSCode Extensions for 2024 . We have also broken down the extensions per category for you , so its easier to remember which one to use when.
      • Extensions: Prettier, Bracket Pair Colorization Toggler, Indent-Rainbow, Test Explorer UI, Jest Runner, Python Test Explorer, GitLens, Git History, Git Graph, Live Server, IntelliCode, Code Spell Checker, DevTools for Chrome App, Code Runner, Python Debugger, Peacock, Better Comments, ESLint, Polacode, Rainbow CSV, Codecrumbs, Tabnine, markdownlint
      • Themes: One Dark Pro, Material UI
    • 20 Essential VS Code Extensions In 2024 - YouTube | Traversy Media
      • 20 extensions for Visual Studio Code to increase your productivity.
      • Extensions: Prettier, Github Copilot, Live Server, Multiple Cursor Case Preserve, Git History, Git Lens, Code Runner, Markdown Preview Enhanced, Console Ninja, Regex Snippets, Polacode, Code Spell Checker, Document This, ChatGPT, Peacock, Postman, REST Client, Bookmarks, Codiumate/Codium AI, Quakka
    • 12 VS Code Extensions to INCREASE Productivity 2024 - YouTube | Devression
      • I made this video to help any newbies out there who are looking for some great VS Code extensions to help increase productivity and write cleaner code. I know there are PLENTY more extensions out there to try so if you guys have any suggestions, feel free to leave them in comments and I might make a video on them! In this video I cover the 12 best VS Code extensions that I use throughout my studies as a Computer Science student. I hope these tips and tricks help you!
      • Extensions: Code Runner, Tabnine, Live Server, Excel Viewer, CodeTour, TODO Highlight, Draw.io Integration, Polacode, Code Spell Checker, Prettier, Vibrancy Continued
      • Themes: Material Icon
    • The Best VSCode Extensions 2024 - YouTube | Coding With Adam
      • The best VSCode extensions. These are some of my favorite VSCode extensions that I use to increase my productivity. Checkout my video to learn more and see a demo of each extension.
      • Extensions: Prettier, Code Spell Checker, ESLint, Error Lens, Live Server, Auto Rename Tag, Peacock, Auto-Open Markdown Preview, Markdown All in One, Code Runner, Jest, Jest Runner, Simple React Snippets, GitHub CoPilot, InteliCode, YAML, GitLens, Git History, Git Graph, vscode-pets
      • Themes: Material Icon
    • My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer (en-US)
      • Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany.
      • You can install extensions from the command line.
      • Extensions: Auto Close Tag, Better Comments, Bracket Pair Colorizer 2, Dash, EditorConfig for VS Code, ESLint, Git History, GitLens, Import Cost, Live Share, npm Intellisense, Path Intellisense, Permute Lines, PHP Intelephense, Prettier, Project Manager, SVG, Remote - SSH, Task Explorer, Twig Language 2, VS DocBlockr, Wrap Console Log Simple,
      • Themes: Night Owl (sarah.drasner)
    • Useful VS Code Extensions For Front-End Developers — Smashing Magazine
      • Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way.
      • There is awhole section snippets
      • This is an in-depth article and everything is well explained. Although some extensions are depreceated most of them are still valid today.
      • Extensions: Turbo Console Log, Import Cost, Prettier, --- loads of snippet plugins ---, Polacode, Better Comments, Debugger for Chrome, Microsoft Edge Tools for VS Code, File Utils, FileOps, vscode-icons, GitLens, Git History, Watermelon, TODO Highlight, Bracket Pair Colorizer, Gremlins Tracker, Indent-Rainbow, CSS Stacking Contexts, Peacock, IntelliCode, CodeTour, vscode-pets, Quokka, Remote - SSH, Live Sass Compiler
    • VS Code Extensions That'll Boost Your Development Productivity
      • Having a good text or code editor that fits into your workflow is crucial to productivity as a developer. VS Code comes stocked with a lot of features by default, but here are 7 extensions that will help take your workflow up another level.
      • Extensions: Sublime Text Keymap and Settings Importer, Import Cost, Indent-Rainbow, Rainbow Brackets, Settings Sync, Profile Switcher, Better Comments, Duplicate Action
    • How to configure Visual Studio Code right the first time - DEV Community
      • VS Code is a powerful tool but "batteries included" is not the expression this IDE is known for. Here's how to proceed to have the best developer experience.
      • Extensions: Auto Rename Tag, Bracket Pair Colorizer, Color Highlight, DotENV, ESLint, VS Code JavaScript (ES6) snippets, Prettier, Better Comments, Error Lens, GitLens, Live Server, npm Intellisense, Path Intellisense, Settings Sync, Code Spell Checker, Image preview, Kite Autocomplete for Python and JavaScript, Polacode, Sort lines
      • Themes: Night Owl, Cobalt2 Theme Official, Material Icon Theme

 

 

Read 269 times Last modified on Wednesday, 06 November 2024 11:17