Recommended VS Code extensions

README.md

Recommended VS Code extensions

Extensions I use or want to use in VS Code.

I add links and explanations so you can use them too if you want.

Language and tool-specific support

Such as syntax highlighting and linting.

Python

• Python
• Python Type Hint

  Provides type hint auto-completion for Python, with completion items for built-in types, classes and the typing module.

Ruby

• Jekyll Syntax Support
• Ruby
• Rufo - Ruby formatter
  • Format Ruby files. I had hassles getting Rubocop extension to work (it couldn't find rubocopy installed despite my efforts to install it and configure the extension).
• VSCode Ruby
  • This is intended to be used alongside the main Ruby extension

  Syntax highlighing, snippet, and language configuration support for Ruby

• Rainbow end

Configs

Support for configs by file extension

• DotENV
• Better TOML
• YAML
• EditorConfig

  This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required.

HTML

• Auto Close Tag
• Auto Rename Tag
• XML Tools

JavaScript

• ESLint
• TSLint

  TSLint support for Visual Studio Code

• npm
• Auto Import (for JS/TypeScript)
• Prettier Now
  • Formats code, if configured for the language type. I prefer this to the plain Prettier extension.
  • I don't think this honors a prettier config or editorconfig - you have to configure the extension itself globally and per repo.
  • This works for JS, CSS, HTML, JSON, GraphQL, TypeScript and more. But I prefer to use it for JS only and let specific formatters handle the rest as I prefer how they handle things.

Go

• Go
  • Created by the Go team at Google

  Rich Go language support for Visual Studio Code

Shell

• Shell syntax

  Lint syntax errors in bash, zsh, and sh

• Shell format
  • Format shell scripts - helps things wrapped consistently like if statements and reduced double white space.
  • Also works on properties, Dockerfile, ignore file, hosts file, etc.

Containers

• Docker
  • Include a panel which has a lot of options around images and containers. For creating, using and clearing. It also runs commands in the terminal window so that is great for learning the syntax for a command you ran in the panel.
• Kubernetes

  Develop, deploy and debug Kubernetes applications

CSV

• Edit CSV
• Rainbow CSV

Markdown

• Markdown All In One
• Markdown Preview Enhanced
• Emoji Sense

  Adds suggestions and autocomplete for emoji

Git and GitHub

• Git Blame
• Git Extension Pack
• Git Graph
• Git History
• Git Config Syntax

  Adds syntax highlighting support for Git config files

• Git Semantic Commit
• Open in Github, Bitbucket, Gitlab
  • Add option to right-click on file
• Settings Sync (Sync your VS Code settings to a gist)
  • This is not so important now that VSE supports this as a builtin feature.
• GitHub Actions
  • Interact with GH Actions from the IDE pane. You can see a history of runs.
  • There are some related actions but this one is popular.

Images

• SVG Editor
• SVG Gallery
  • Right-click on a directory of SVGs and click the gallery view option

  View SVG images in gallery

Other

• Apache Conf
• GraphQL

  Syntax highlighting for GraphQL queries and schemas

Generic

Not tied to any specific language

• Path Autocomplete
• Code Runner
• Live Server

  Adds syntax highlighting support for Git config files

• Remote - SSH (Use VS Code to open an SSH tunnel to a server. Access the server in the command-line and browser and edit the remote files in the IDE)

Browser

• Debugger for Firefox
• Debugger for Chrome

Projects

• Bookmarks
• Project Manager (I actually don't want to use this, but it is a dependency of another ectesnikb so I keep this around)

about_me.md

About me

My skills

I am a fullstack developer on Linux and macOS, so I work with configs, deploys, containers, web servers and more. My focus is on Python, JavaScript, Git and Bash but you'll find Go, Rust, Ruby and other languages and tools covered here too.

My reason for using extensions

The main reason I use extensions is to add support for things I expected to be part of VS Code, like support for certain languages, support for intellisense and convenien like not having to end the opening and closing name of an HTML tag.

I also like tools for productivity. Like being able to manage containers or view files in a remote server, without having to use my terminal.

The extensions I use are focused on making my work and personal projects smoother to manage and to catch things out for me (like linting and syntax checking) to add safety.

But having too many extensions can make your IDE slow to load and hard to navigate. Sometimes they conflict (like multiple Markdown extensions). So I am more selective with extensions, or get rid of them when I don't need them.

I have read an article which said that too much intellisense makes you lazy and ruin your memory in a sense. When you have to make code changes in your terminal or GitHub, you don't know the function name or how to use the arguments because you let the IDE autocomplete it for you. The article recommends keeping on autocomplete (no extensions needed) so that variables and functions already covered in the file can be used conveniently, saving you time and mistakes.

And yes, having the pop-up for the arguments or the docs of a function without actually completing it for you is nice. But you can also CTRL+click on a function name to jump to the definition (whether yours or part of a library or the core language) and you'll learn more about the context and flow of the function by doing that.

archive.md

Archive of extensions

I have disabled or uninstalled these extensions as I no longer need them but might come to them. Or I list them here as ideas to come back and try one day.

They are still good - I just don't need them right. Mainly because I am not developing in that language currently. But I want this as a reference to come back to these.

• Dart (Syntax highlighting only)
• HashiCorp Terraform
  • I use some other extensions for TF which work fine.

  Syntax highlighting and autocompletion for Terraform

• Liquid
  • This adds support for the "Liquid" format, but I use HTML or Jekyll HTML as a format, so this had no use. Also it handled HTML+Jekyll poorly in a single file (which might have been this extension or not). But the point is I don't work with Liquid directly so don't need this.

  Syntax highlighting, formatting and snippet support for the liquid template language. Supports both Jekyll and Shopify variations.

• Import Cost
  • Calculates the size of NPM imports and shows it inline. This adds no value for my day-to-day use.
• ruby-rubocop
• Settings Sync
  • Sync your extensions, settings and snippets to a gist and to another machine.
  • This is no longer needed now that VS Code has this builtin.

  Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

• TODO Highlight
  • I might still bring this back but I had memory issues where my IDE would slow turn and heat up terribly when adding a TODO inside an HTML comment. So I turned this off.

  highlight TODOs, FIXMEs, and any keywords, annotations...

• Code Spell Checker

  Spelling checker for source code

• Preview on Web Server
  • This starts a web server which you can view in a sidebar or open in the browser.
  • I don't need this anymore. The Live Server extension works great and I prefer to use that with the browser on a separate screen or on the side of the screen rather than putting a browser in IDE, which has limitations.
• AppleScript
  • Useful when writing scripts for Apple.
• Vetur
  • Vue tooling for VS Code

Deno

I am still new to these and there may be others that are better.

• Deno

  Deno support for VS Code

• Deno for VS Code

  A deno extension for vscode to make it easier for developers

Python

• Python Extension Pack

  Popular Visual Studio Code extensions for Python

• Django

  Django extension for Visual Studio Code

• MagicPython
  • Drop-in replacement for the default Python package.

  Syntax highlighter for cutting edge Python.

Emoji

• Markdown Emoji

  Adds emoji syntax support to VS Code's built-in markdown preview

Intellisense

• npm Intellisense

  Visual Studio Code plugin that autocompletes npm modules in import statements

• Visual Studio IntelliCode
  • There is extra setup outside the IDE to get this to work and I don't know if this AI tool will add value or get in the way or make me lazy. So have not used it yet.

  AI-assisted development

  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.

avoided_extensions.md

Avoided extensions

VS Code extensions I don't like after trying them. So I uninstalled. And this is a reminder for myself not to use them again.

• Python Indent
  • This sounded like a good idea but mess with my style.
• Indent Rainbow
  • This added colors to help separate identation groups easily.
  • This seemed like a good idea initially but it is so distracting and it hurts my eyes to look at.
• Bracket Pair Colorized
  • This can be useful if you have a lot of nested JSON or JavaScript brackets () or curly brackets {}. It is much less distracting than Indent Rainbow.
• Markdown Lint
  • This seemed like a good idea initially, but its linting is very aggressive and noisy and does not match with my style. It could be configured to use less rules, but I couldn't be bothered. I am still not sure if this extension solves more problems than it creates for me.

  Markdown linting and style checking for Visual Studio Code

z_list.txt

Dump of all current extensions in August 2020

Unfortunately this excludes the friendly name but is a precise way of finding through the marketplace where there are similar extensions.

code --list-extensions

4ops.terraform
aaron-bond.better-comments
alefragnani.Bookmarks
alefragnani.project-manager
almenon.arepl
ban.spellright
bierner.emojisense
bungcip.better-toml
christian-kohler.npm-intellisense
codezombiech.gitignore
CoenraadS.bracket-pair-colorizer-2
dbaeumer.vscode-eslint
donjayamanne.git-extension-pack
donjayamanne.githistory
DotJoshJohnson.xml
eamodio.gitlens
EditorConfig.EditorConfig
eg2.vscode-npm-script
eliostruyf.vscode-front-matter
felipecaputo.git-project-manager
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
formulahendry.code-runner
foxundermoon.shell-format
ginfuru.ginfuru-vscode-jekyll-syntax
GitHub.vscode-pull-request-github
golang.go
Gruntfuggly.todo-tree
hashicorp.terraform
henoc.svgeditor
HookyQR.beautify
humao.rest-client
idleberg.applescript
ionutvmi.path-autocomplete
janisdd.vscode-edit-csv
jduponchelle.rainbow-end
jnbt.vscode-rufo
kevinkyang.auto-comment-blocks
KevinRose.vsc-python-indent
mechatroner.rainbow-csv
mhutchie.git-graph
MichaelCurrin.auto-commit-msg
mikestead.dotenv
misogi.ruby-rubocop
mquandalle.graphql
mrmlnc.vscode-apache
ms-azuretools.vscode-docker
ms-kubernetes-tools.vscode-kubernetes-tools
ms-python.python
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode.cpptools
ms-vscode.vscode-typescript-tslint-plugin
msjsdiag.debugger-for-chrome
nitayneeman.git-semantic-commit
njqdev.vscode-python-typehint
octref.vetur
oderwat.indent-rainbow
oscarcs.dart-syntax-highlighting-only
osteele.jekyll
planbcoding.vscode-react-refactor
rebornix.ruby
redhat.vscode-yaml
remimarsal.prettier-now
ritwickdey.LiveServer
rust-lang.rust
shailen.netlify
Shan.code-settings-sync
shd101wyy.markdown-preview-enhanced
sibiraj-s.vscode-scss-formatter
sidthesloth.html5-boilerplate
sissel.shopify-liquid
spmeesseman.vscode-taskexplorer
steoates.autoimport
stkb.rewrap
vscode-icons-team.vscode-icons
waderyan.gitblame
wayou.vscode-todo-highlight
wingrunr21.vscode-ruby
yuichinukiyama.vscode-preview-server
yzhang.markdown-all-in-one
ziyasal.vscode-open-in-github