VS Code -extensionit

Koodiklinikalla käytiin keväällä 2022 suuri VS Code extensions -keskustelu. Tässä koosteena klinikkalaisten vinkit parhaaseen kokemukseen. Kiitos Petrille keskustelun avaamisesta!

Koodin tyylittely ja muokkaus

Code refactoring

  • Auto Rename Tag

    • "Automatically rename paired HTML/XML tag, same as Visual Studio IDE does."

  • change-case

    • "Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word"

  • Sort lines

    • "Sort lines of text in Visual Studio Code."

Code formatting

  • Beautify

    • "Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code."

  • ESLint

    • "Integrates ESLint JavaScript into VS Code."

  • Prettier

    • "Prettier is an opinionated code formatter."

Code linting

  • ShellCheck

    • "Integrates ShellCheck into VS Code, a linter for Shell scripts."

  • markdownlint

    • checking Markdown structure

Code highlighting

  • Trailing Spaces

    • "Highlight trailing spaces and delete them in a flash!"

  • Better Comments

    • "The Better Comments extension will help you create more human-friendly comments in your code."

Code comments generation

  • Document This

    • "Automatically generates detailed JSDoc comments in TypeScript and JavaScript files."

  • autoDocstring

    • "Visual Studio Code extension to quickly generate docstrings for python functions."

Spell checkers

  • Code Spell Checker

    • "A basic spell checker that works well with camelCase code."

  • Spell Right

    • "Multilingual, Offline and Lightweight Spellchecker for Visual Studio Code"

    • Integration with a spell checker of the operating system


  • GitHub Copilot

    • "GitHub Copilot is an AI pair programmer which suggests line completions and entire function bodies as you type."

  • Kite

    • "Kite is an AI-powered programming assistant that helps you write code faster inside Visual Studio Code."

  • Path Intellisense

    • "Visual Studio Code plugin that autocompletes filenames"

  • Tailwind CSS IntelliSense

    • "Intelligent Tailwind CSS tooling for VS Code"

  • Markdown All in One

    • "All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more)."


  • Git History

    • "View git log, file history, compare branches or commits"

  • Git Graph

    • "View a Git Graph of your repository, and perform Git actions from the graph."

  • GitLens

    • "GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository"

Tyylilliset / visuaaliset laajennokset

  • Bookmarks

    • "Mark lines and jump to them."

  • cursory-glance

    • "VSCode extension that highlights the cursors when there are more than one of them."

  • file-icons

    • "File-specific icons in VSCode for improved visual grepping." (sidenote: set "workbench.tree.indent": 22 for nicer look)

  • Gremlins tracker for Visual Studio Code

    • "This Visual Studio Code extension reveals some characters that can be harmful because they are invisible or looking like legitimate ones."

  • indent-rainbow

    • "A simple extension to make indentation more readable."

  • Inline Parameters for VSCode

    • "An extension for Visual Studio Code that adds inline parameter annotations when calling a function."

  • One Dark Pro

    • "Atom‘s iconic One Dark theme for Visual Studio Code"

  • Rainbow Brackets

    • "Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets."

  • Render Line Endings

    • "Displays the line ending symbol and optionally extra whitespace when 'Render whitespace' is turned on."

  • TODO Highlight v2

    • "Highlight TODO:, FIXME: and any other annotations you wish within your code in VSCode."

  • Todo Tree

    • "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."

  • WorkspaceSort

    • "WorkspaceSort adds the ability to sort workspace-folders in the same way as files and inner-folders are sorted."

Muiden työkalujen laajennokset

  • AWS Toolkit

    • "This extension makes it easier for developers to develop, debug locally, and deploy serverless applications that use Amazon Web Services (AWS)."

  • Code::Stats

    • "This is a Visual Studio Code extension to send updates to https://codestats.net"

  • Docker

    • "The Docker extension makes it easy to build, manage, and deploy containerized applications in Visual Studio Code."

  • Debugger for Firefox

    • "Debug your JavaScript code running in Firefox from VS Code."

  • HashiCorp Terraform

    • "Syntax highlighting and autocompletion for Terraform"

  • Remote - Containers

    • "The Remote - Containers extension lets you use a Docker container as a full-featured development environment."

  • SQLite

    • "VSCode extension to explore and query SQLite databases."

  • tfsec

    • "This VS Code extension is for tfsec. A static analysis security scanner for your Terraform code that discovers problems with your infrastructure before hackers do."

  • WakaTime

    • "The open source plugin for productivity metrics, goals, leaderboards, and automatic time tracking."


  • EditorConfig for VS Code

    • "This plugin attempts to override user/workspace settings with settings found in .editorconfig files."

    • Useful for storing basic text formatting settings as a part of the repository to avoid mismatch between computers/developers.

  • Live Server

    • "Launch a development local Server with live reload feature for static & dynamic pages"

  • Quit Control

    • "This extension will make all "quitish" keyboard shortcuts prompt you if you really want to close everything if they were going to do so."

  • Quokka.js

    • "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."

  • Thunder Client

    • "Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design."

  • vscodevim

    • "Vim emulation for Visual Studio Code"

  • Webhint

    • "Use webhint to improve your website during development."

Last updated