VS Code Setup - Recommended Extensions

#vscode #recommendation

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

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 theGitHub 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 anextensions.json file in your.vscode directory and following these steps:

Open the VS Code project where you want to install the recommended extensions.
Open the command palette
- macOS:Cmd+Shift+P
- Windows/Linux:Ctrl+Shift+P
Type and selectConfigure Recommended Extensions (Workspace Folder).
Copy and paste the contents of theextensions.json file below into yourextensions.json file.
Type and selectExtensions: 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"  ]}

Top comments(11)

Tomas Stveracek

Frontend developer

Joined
Nov 8, 2023

• Aug 20 '24

Copy link

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! :)