DEV Community

Cover image for VS Code Setup - Recommended Extensions
ahandsel
ahandsel

Posted on • Originally published at github.com

VS Code Setup - Recommended Extensions

This is a list of Visual Studio Code extensions that I recommend.

Table of Contents

Markdown Related Extensions

Extension Description
Copy Markdown as HTML Converts Markdown to HTML.
Markdown All in One A comprehensive tool with all the features you need for writing Markdown files.
Markdown Footnotes Adds [^footnote] syntax support to VS Code's built-in markdown preview.
Markdown Paste Easily paste images into Markdown with the Markdown Paste command.
Markdown PDF Convert Markdown to PDF.
Markdown Preview Enhanced An enhanced Markdown preview for VS Code.
Markdownlint Linting and style checking for Markdown files.
Paste Image Easily paste images into Markdown and HTML.
MDX Language support for MDX.
Path IntelliSense Auto-completes filenames.

Writing (in General) Related Extensions

Extension Description
Code Spell Checker A great spell checker for programmers, with good support for camelCase and low false positives.
Capitalize Capitalizes your text.
Change Case Easily change the case of text.
Insert Line Number Insert line numbers to selected lines or the whole document.
DupChecker Checks for and removes duplicate lines in the file content or selection.
:emojisense: Autocomplete for emoji.
Replace Curly Quotes Replaces curly quotes (, , , ) in a document with straight quotes (', ").
Sort lines Sorts lines of text.

GitHub Related Extensions

Extension Description
GitHub Markdown Preview View Markdown files as they would appear on GitHub.
GitHub Copilot Chat AI chat features powered by GitHub Copilot.
GitHub Copilot AI-powered code completion tool.
Open in GitHub Desktop Open the GitHub Desktop App easily from VS Code.
Highlight Bad Chars Makes zenkaku spaces (double-byte whitespace) visible.
NBSP Visualizes suspicious Unicode characters and trailing whitespaces.

CSV Related Extensions

Extension Description
CSV to Table Convert a CSV/TSV/PSV file to an ASCII formatted table.
Rainbow CSV Makes it easier to read and edit CSV and TSV files.

Japanese Language Related Extensions

Extension Description
テキスト校正くん Extension to check Japanese sentences in text files and Markdown files in VS Code.
Japanese Word Count Count Japanese characters, words, and lines.
Zenkaku Show double-byte whitespace.

Styling and Themes Related Extensions

Extension Description
TODO Highlight Highlight TODOs, FIXMEs, and any other keywords or annotations.
Better Solarized A solarized theme for Visual Studio Code, including light and dark versions.
Material Icon Theme Material Design Icons for Visual Studio Code.
Toggle Light/Dark Theme Command to toggle the theme between light and dark.

Utility Extensions

Extension Description
ARB Editor Editor for Application Resource Bundle files used for localization.
Code Runner Run Python and JavaScript code locally for quick checks.
ESLint Integrates ESLint JavaScript into VS Code.
File Utils A convenient way of creating, duplicating, moving, renaming, and deleting files and directories.
HTML Snippets Full HTML tags including HTML5 snippets.
IntelliSense for CSS class names in HTML CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
Live Server Launch a local development server with live reload feature for static & dynamic pages. Perfect when working on HTML.
Open in Finder Adds commands for opening the current file or project in Finder.
Prettier - Code Formatter Code formatter using Prettier.
Trailing Spaces Highlights trailing spaces and allows for a simple "delete all trailing spaces" command.
YAML YAML language support by Red Hat, with built-in Kubernetes syntax support.

Easy Installation Method

You can install all the recommended extensions easily by creating an extensions.json file in your .vscode directory and following these steps:

  1. Open the VS Code project where you want to install the recommended extensions.
  2. Open the command palette
    • macOS: Cmd+Shift+P
    • Windows/Linux: Ctrl+Shift+P
  3. Type and select Configure Recommended Extensions (Workspace Folder).
  4. Copy and paste the contents of the extensions.json file below into your extensions.json file.
  5. Type and select Extensions: Show Recommended Extensions in the command palette.

extensions.json


json
{
  "recommendations": [
    "Google.arb-editor",
    "danielgjackson.auto-dark-mode-windows",
    "viablelab.capitalize",
    "wmaurer.change-case",
    "formulahendry.code-runner",
    "streetsidesoftware.code-spell-checker",
    "GitHub.copilot-chat",
    "GitHub.copilot",
    "jerriepelser.copy-markdown-as-html",
    "phplasma.csv-to-table",
    "jianbingfang.dupchecker",
    "bierner.emojisense",
    "ginfuru.ginfuru-better-solarized-dark-theme",
    "bierner.github-markdown-preview",
    "wengerk.highlight-bad-chars",
    "abusaidm.html-snippets",
    "Zignd.html-css-class-completion",
    "andersliu.insert-line-number",
    "ICS.japanese-proofreading",
    "sifue.japanese-word-count",
    "ritwickdey.LiveServer",
    "bierner.markdown-footnotes",
    "shd101wyy.markdown-preview-enhanced",
    "yzane.markdown-pdf",
    "yzhang.markdown-all-in-one",
    "PKief.material-icon-theme",
    "possan.nbsp-vscode",
    "wraith13.open-in-github-desktop",
    "christian-kohler.path-intellisense",
    "esbenp.prettier-vscode",
    "mechatroner.rainbow-csv",
    "jinhyuk.replace-curly-quotes",
    "Tyriar.sort-lines",
    "shardulm94.trailing-spaces",
    "davidanson.vscode-markdownlint",
    "dbaeumer.vscode-eslint",
    "fabiospampinato.vscode-open-in-finder",
    "mushan.vscode-paste-image",
    "redhat.vscode-yaml",
    "sleistner.vscode-fileutils",
    "telesoho.vscode-markdown-paste-image",
    "unifiedjs.vscode-mdx",
    "wayou.vscode-todo-highlight",
    "mosapride.zenkaku"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Top comments (11)

Collapse
 
tomasdevs profile image
Tomas Stveracek

Great article! Very helpful for beginners and experienced developers. Just be careful not to overload your editor with too many extensions. Start with the basics and add more as you need them! :)

Collapse
 
wizard798 profile image
Wizard

Just mind blowing 🤯, so many never heard but useful extensions, thanks for this

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

I echo this!

Finally an useful list of extensions with gems 💎.

Thanks

Collapse
 
honor_soke_b6e75fff4660a profile image
Honoré SOKE

very helpful ,Thanks a lot

Collapse
 
chandan_e69c011b258e09242 profile image
Chandan

Very Helpful Thread, thanks for Sharing 🤘🏻.

Collapse
 
andikabays profile image
Andika Bayu Santoso

very helpful, thanks a lot!!!

Collapse
 
muhammadsaadahmed profile image
Muhammad Saad Ahmed

Nice

Collapse
 
dinesh_kartikcodes profile image
Dinesh Kartik Codes

Cool

Collapse
 
samyakkkk profile image
Samyak Jain

You may consider adding one more to the list. CommandDash.

It enables you to build with any library or packages using AI agents trained on their codebase and is 100% free to use.

Collapse
 
shaman profile image
Shaman Sharif

You should add Peacock.
It helps with lots of VSC instance open to differentiate projects.

Collapse
 
essijunior profile image
NDANG ESSI Pierre Junior

thanks