ahandselThis 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.jsonfile below into yourextensions.jsonfile. - Type and select
Extensions: Show Recommended Extensionsin 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"
]
}
