VS Code Setup - Recommended Extensions
ahandsel
Posted on August 19, 2024
This is a list of Visual Studio Code extensions that I recommend.
Table of Contents
- Markdown Related Extensions
- Writing (in General) Related Extensions
- GitHub Related Extensions
- CSV Related Extensions
- Japanese Language Related Extensions
- Styling and Themes Related Extensions
- Utility Extensions
- Easy Installation Method
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:
- 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
- macOS:
- Type and select
Configure Recommended Extensions (Workspace Folder)
. - Copy and paste the contents of the
extensions.json
file below into yourextensions.json
file. - 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"
]
}
💖 💪 🙅 🚩
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
ruby How to use Docker containers for Ruby on Rails development in Visual Studio Code
March 17, 2023