Extensions

• Theme / Editor Experience
  • FontSize ShortCuts
    • Change the font size with keyboard shortcuts.
  • vscode-icons
    • Nice / colorful icons for many different file types
  • ESLint
    • Integrates ESLint JS
  • Prettier
    • Automatically format javascript, JSON, CSS, Sass
  • Paste JSON as Code
    • Auto generate TypeScript (and other languages) types from JSON data., and HTML files.
  • PostCSS Intellisense and Highlighting
    • Works better than the other more popular one of a similar name.
  • Code Spell Checker
    • Spell check markdown, comments and variable names.
  • Pretty TypeScript Errors
    • Makes TS errors more human readable.
• Useful Tools
  • Paste JSON as Code
    • Auto generate TypeScript (and other languages) types from JSON data.
  • Code Snap
    • Take pictures of code with your VS Code Theme / Font settings.
  • Thunder Client
    • Make HTTP requests from inside VS Code (similar to Postman / Insomnia).
• Languages and Libraries
  • XML Tools
    • XML Formatting, XQuery, and XPath Tools for Visual Studio Code.
  • Tailwind CSS IntelliSense
    • Intelligent Tailwind CSS tooling for VS Code.
  • React
    • ES7+ React/Redux/React-Native snippets
      • Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
    • CSS to JSS
      • Convert CSS to JSS
    • CSS in JS
      • Get syntax highlighting when working with CSS in JS template strings.
    • vscode-styled-components
      • Syntax highlighting for styled-components.
  • Volar
    • Language support for Vue 3
  • Svelte for VS Code
    • Svelte language support for VS Code.
  • Prisma
    • Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
  • htmx-tags
    • Provides HTMX tag completion in HTML files in VSCode
  • Markdown Mermaid Preview
    • View Mermaid diagrams when previewing Markdown.

Installing VS Code Extensions in Bulk#

To streamline the process of installing multiple Visual Studio Code extensions, you can use the following steps.

This method involves creating a text file with the names of the extensions and then using a command to install them all at once.

Steps:#

1. Open Terminal#

First, open your terminal and create a new text file using nano.

nano vs-ext.txt

2. Add Extension Names#

In the nano editor, paste the names of the extensions you want to install.

Each extension name should be on a new line.

For example, this is my extensions list:

nur.just-black
fosshaas.fontsize-shortcuts
vscode-icons-team.vscode-icons
dbaeumer.vscode-eslint
esbenp.prettier-vscode
quicktype.quicktype
vunguyentuan.vscode-postcss
streetsidesoftware.code-spell-checker
yoavbls.pretty-ts-errors
quicktype.quicktype
adpyke.codesnap
rangav.vscode-thunder-client
DotJoshJohnson.xml
bradlc.vscode-tailwindcss
dsznajder.es7-react-js-snippets
infarkt.css-to-jss
paulmolluzzo.convert-css-in-js
styled-components.vscode-styled-components
Vue.volar
svelte.svelte-vscode
Prisma.prisma
otovo-oss.htmx-tags
bierner.markdown-mermaid

After you've pasted the extension names, save and exit nano:

Press Control + X to start the exit process. Press Control + Y to confirm that you want to save the changes. Press Enter to confirm the file name and save the file.

3. Install the Extensions#

Now that you have a text file (vs-ext.txt) with the extension names, you can install all the extensions listed in the file at once using the following command:

cat vs-ext.txt | xargs -L1 code --install-extension

This command does the following:

• cat vs-ext.txt: Reads the contents of vs-ext.txt.
• xargs -L1: Passes each line of the file as a separate argument to the next command.
• code --install-extension: The VS Code command to install an extension.

By following these steps, you can efficiently install multiple VS Code extensions without having to manually install each one individually. This is particularly useful when setting up a new development environment or sharing a common set of tools with a team.