Vscode on Brandon Pugh's Blog

Over 100 VS Code Extensions Exposed Developers to Hidden Supply Chain Risks

Mon, 20 Oct 2025 00:00:00 +0000

Over 100 VS Code Extensions Exposed Developers to Hidden Supply Chain Risks

VS Code users are advised to limit the number of installed extensions, scrutinize extensions prior to downloading them, and weigh the pros and cons of enabling auto-updates

This is the approach I’ve been taking and being more selective with what I install in general. This also applies to browser extensions.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Link directly to a VS code setting

Sat, 03 May 2025 00:00:00 +0000

Today I learned that you can link directly to specific VS Code settings using the vscode: URL scheme. They follow this format: vscode://settings/editor.formatOnSave, where you put the setting ID at the end of the URL.

So if you click this link, VS Code should open straight to that setting.

This is probably most useful for folks who like to write about VS Code features (like me), but it’s also handy if you’re helping like a teammate you can just send them a link to a setting to make it easier for them.

Also, in VS Code, you can click the gear icon next to a setting and select “Copy Setting URL” to get the link.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Profiles in Visual Studio Code

Fri, 14 Mar 2025 00:00:00 +0000

I recently learned that VScode let’s you create different profiles that let you switch between different sets of settings, keyboard shortcuts, snippets, and most importantly, extensions.

This is really if, like me, you have various extensions for different types of projects and don’t need them all running all the time. For example, I have extensions for C#, react, angular, or markdown projects (apparently I had 86 extensions installed 😱).

The profile editor is actually pretty nice, letting you copy from an existing profiles for from some builtin templates.

Unfortunately it doesn’t let you easily copy only certain extensions so the easiest way I found to get a list of all my extensions by running code --list-extensions from the command line and then creating an extensions.json file in a workspace. When you open that folder, VScode will see those as recommended extensions for that workspace and let you install them all with one click.

Before I learned of that command however I used jq to get a list of extension IDs from the extensions.json located in your user directory. This json file has much more data it in it so jq makes it much easier to extract the list:

jq '.[].identifier.id' file.json

This approach still might be handy if I want to get a list of extensions only from a specific profile as those are stored in similar json files in /profiles.

Thank you for keeping RSS alive. You're awesome.

Reply by email

HTTP files

Fri, 13 Sep 2024 00:00:00 +0000

Today I learned about .http files that you can use to make/test requests to any api endpoint from within most IDEs/editors.

This started with the Rest client vscode extension and then Visual Studio 2022 added support somewhat recently.

It kinda acts like an alternative to something like Postman but without leaving your editor, but for me the nice thing is it can act like a runnable form of documentation for your api that you can commit alongside your code.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Quickly change the end of a line

Tue, 20 Aug 2024 00:00:00 +0000

This is a simple thing but I just discovered that with a simple regex and find/replace in most editors, you can quickly add text to the end of every line.

For instance, if you want to add a , to every line, all you need is $:

Or if you want to replace whatever the last character then you can use .$ instead.

Of course, I use vscode-neovim so I just type :%s/$/,/ 😁

Thank you for keeping RSS alive. You're awesome.

Reply by email

Preserve case with find and replace

Fri, 29 Sep 2023 00:00:00 +0000

Today I learned that vscode has an option to preserve case with find and replace (I somehow never noticed the “AB” button before). I’ve always wanted this when having to rename an entity in a file with instances both capitalized and lowercase.

I actually discovered this because I saw that this feature was just added to the latest Visual Studio 2022 preview

And for vim users, there’s Vim Abolish 😁

Thank you for keeping RSS alive. You're awesome.

Reply by email

Dev containers

Mon, 11 Sep 2023 00:00:00 +0000

Today I learned that dev containers are an actual spec. I’d been hearing the term more lately but I thought it was a general term for containers used for local development but it’s actually an open spec for configuring an entire development environment within a container and it’s what you use to configure a github codespace for a repo. But the cool thing is you can use the vscode Dev containers extension and vscode will reopen in a docker container with all the dependencies, extensions, and configuration specified in a devcontainers.json.

For example, if you want to experiment with a new programming language, you can quickly launch one of the sample containers (type “try” from the command palette) and have an environment ready to go (after docker downloads the image).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Paste a URL as a markdown link

Thu, 03 Aug 2023 00:00:00 +0000

Today I learned that the latest version of VS code added a smart option to detect when you’re pasting a URL and automatically paste it as a markdown link in markdown files.

You can enable it by setting the markdown.editor.pasteUrlAsFormattedLink setting to smart or always.

See the release notes.

Thank you for keeping RSS alive. You're awesome.

Reply by email

You can easily wrap text with HTML tags

Thu, 27 Jul 2023 00:00:00 +0000

Using the builtin Emmet functionality, you select any arbitrary text or HTML and wrap it with new markup by executing the command Emmet: Wrap with Abbreviation and typing an Emmet abbreviation.

I’m going to be using this all the time now!

It even understands JSX so it’ll output className if you specify a css class.

Thank you for keeping RSS alive. You're awesome.

Reply by email

VS code can show the required HTML structure for a CSS selector

Fri, 21 Jul 2023 00:00:00 +0000

If you hover over a CSS selector or property, VS Code will provide an HTML snippet that’s matched by the CSS rule, and it will also show the specificity.

For example, this very specific rule that’s similar to one I came across recently:

I also had to look up the ~ which is the General sibling combinator.

Thank you for keeping RSS alive. You're awesome.

Reply by email

My Always-Up-to-Date VS Code Setup for Web Development

Sat, 29 Jun 2019 10:54:24 +0200

I’ve gone through the setup and daily use of a number of editors over the years including most current popular ones for front end development (i.e. sublime, atom, and vs code) and for me VS code is the best choice for front end development at the moment.

The team has put a lot of effort into making it a great javascript experience out of the box and it shows (VS code itself is written in typescript and the team uses vs code to build vs code) and with some additional work you can have the best experience while writing javascript.

Extensions

EditorConfig: See http://editorconfig.org/ if you don’t already have a .editorconfig file in your project
Prettier: format javascript using the excellent new Prettier project by James Long
Eslint: Integrates ESLint JavaScript linter into VS Code
GitLens: adds quite a bit of functionality over the builtin git experience in with the free version.
Pretty Typescript Errors: Makes typescript errors much more readable in VS Code—really should be built-in
Jest: Integration for the Jest testing framework
Vitest: Since I’m using Vite these days, I prefer Vitest over Jest and this is their vscode integration.
Jest Snippets: Common code snippets for unit tests
Code Spell Checker: An excellent spell checker that works well with camelCase code
Path Intellisense: Autocompletes filenames, handy when typing paths to import modules
Version Lens: Shows the latest version for each dependency in your package.json
Markdownlint: Markdown linting and style checking for Visual Studio Code. Handy for editing Readme files
Stylelint: Modern CSS/SCSS/Less linter
vscode-icons: Very extensive set of icons for just about every file type imaginable. You could consider it purely aesthetics, but I find have distinct icons makes it easier at a glance to find certain files i.e. a different icon for a spec.js file.
Peacock: Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which

React Specific

css2React: Convert selection between CSS and React inline style syntax and vice versa
ES7+ React/Redux/React-Native snippets: The name says it all. See the full list of snippets here
Sapling: Creates an interactive component dependency tree embedded within the VS Code sidebar

Angular Specific

Update: It’s been a while now since I’ve been on an Angular project so I can’t really speak to whether these are still the best options but I’m leaving them here in case they’re still useful.

Angular Language Service: Rich editing support for Angular html templates
Angular2 inline: Syntax highlighting for Angular inline templates
Angular snippets: Angular v8 snippets
Angular Component Extractor: Helper to extract components from templates

Aesthetics

Atom dark theme: since I used Atom quite a bit before VS code I still feel very at home with this theme, especially in javascript. _ Catppuccin theme: a very popular color scheme that I’ve been liking lately — particularly the Macchiato variant.

Make use of VS Code’s recommended extensions feature

VS Code has a nifty feature where you can add an extensions.json file to the root of your project so when a teammate opens the directory in vs code for the first they’ll be prompted to view the recommended extensions for the workspace. Read more about here

Below is the file you can use for all the extensions I’ve mentioned above:

extensions.json:

{
  // Recommended extensions for VS Code
  // See http://go.microsoft.com/fwlink/?LinkId=827846
  // for the documentation about the extensions.json format
  "recommendations": [
    // Extension identifier format: ${publisher}.${name}.
    "streetsidesoftware.code-spell-checker",
    "EditorConfig.EditorConfig",
    "dbaeumer.vscode-eslint",
    "xabikos.ReactSnippets",
    "eamodio.gitlens",
    "andys8.jest-snippets",
    "Orta.vscode-jest",
    "christian-kohler.path-intellisense",
    "pflannery.vscode-versionlens",
    "esbenp.prettier-vscode"
  ]
}

Some handy settings

"editor.fontFamily": "Fira Code" - Fira Code font
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - Any fixable eslint issues will be automatically fixed on save
"editor.fontLigatures": true - Requires a font that supports ligatures like Fira Code
"workbench.editor.showTabs": false - VS Code has excellent tab switching built and IMHO eliminates the need for displaying tabs across the top

Profiles

Now in VS code you can create various profiles as a way to group various customizations and extensions. For example, an Angular and a React profile. I highly recommend checking it out.

Thank you for keeping RSS alive. You're awesome.

Reply by email