VS Code Setup - Recommended Extensions

ahandsel

ahandsel

Posted on August 19, 2024

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
💖 💪 🙅 🚩
ahandsel
ahandsel

Posted on August 19, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related