---
title: 'Stash changes in a git repository with VSCode'
date: '2023-10-26'
slug: 'stash-changes-with-vscode'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/stash-changes-with-vscode/'
---

`git stash` is a useful command that allows one to shelve current changes in a Git repository temporarily. This can be done without committing the changes anywhere, making it possible to return to them later.

## Stash using VSCode

Visual Studio Code (VSCode) is a highly capable code editor that offers many well-thought-out functionalities. Even after using it for years, I still find new things about it.

Using in-built **Source Control**, you can quickly view the modified files and temporarily save them by stashing them:

- In VSCode, go to the Source Control tab.
- Click the three-dotted menu (`...`) next to Source Control to open a dropdown menu.
- In the menu, select **Stash** > **Stash (Include Untracked)**.
- That's it. The file changes are now stashed locally.

![Stashing changes locally using VSCode](/images/stash-option-vscode.png)

## Bring the latest stashed changes to a branch

Let's assume you've now created a new branch where you want to bring those changes that are saved temporarily.

- In VSCode's Source Control, open the dropdown menu.
- Select **Stash** > **Apply Latest Stash**.

![Stashing changes locally using VSCode](/images/apply-stash-in-branch.png)

You can now bring those changes to the current branch and commit them.

## Conclusion

Stashing is particularly useful when you want to fix something, keep those changes around so that you can return to them later. Collecting the stashed changes can result in a new branch, where local changes can be brought later on.


Stash changes in a git repository with VSCode

---
title: 'Change the color of hidden files and folders in VSCode'
date: '2022-09-04'
slug: 'change-color-hidden-file-folder-name-in-vscode'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/change-color-hidden-file-folder-name-in-vscode/'
---

Using VSCode, I love switching back and forth between dark and light themes to make things interesting for myself when working. Generally, I prefer a [light-ish dark theme](https://amanhimself.dev/blog/setup-macbook-m1/#themes) such as [fairyFloss](https://marketplace.visualstudio.com/items?itemName=nopjmp.fairyfloss) or Quiet Light that comes pre-installed.

I recently switched to [morgan.code](https://marketplace.visualstudio.com/items?itemName=morgan-codes.morgan-codes-vscode-theme) theme, which uses a set of contrasting colors that are pleasing to my growing old eyes. It is developed by a fellow developer [Morgan Richardson](https://www.instagram.com/morgan.codes/).

Using this theme for a while, I realized I am so used to seeing files and folder names that git ignores in a specific gray color.

The original theme comes with blue-ish (maybe some sort of Cyan or Aqua) color for the ignored files and folders.

![original theme](https://i.imgur.com/J6hik7g.jpg)

To customize this color value, VSCode, provides a property called `gitDecoration.ignoredResourceForeground` which accepts a color value in hexadecimal format. It can be used with the VSCode theme color setting: [`workbench.colorCustomizations`](https://code.visualstudio.com/api/references/theme-color) to override the value that the original theme provides.

```json
// settings.json

{
  // ...
  "workbench.colorCustomizations": {
    // select theme you want to apply color customization value
    "[morgan.codes]": {
      "gitDecoration.ignoredResourceForeground": "#434343"
    }
  }
}
```

That's it! And now, my optic nerves are happy again.

![customized theme](https://i.imgur.com/sk0tFYi.jpg)

VSCode is so customizable that it surprises me at times.


Change the color of hidden files and folders in VSCode

---
title: 'How to configure VSCode Bracket Pair Colors Natively'
date: '2021-10-12'
slug: 'how-to-configure-vscode-bracket-colors-natively'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-configure-vscode-bracket-colors-natively/'
---

![cover image](https://res.cloudinary.com/practicaldev/image/fetch/s--lgaAXnJK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r84rtekdnk3qd4r4v31e.png)

With an [update in August 2021](https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization), VSCode started supporting Bracket pair colorization natively. It means there is no need to use the [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) extension (_which I love_).

In their official announcement, the VSCode team states they choose to implement this feature natively to address performance issues.

I recently uninstalled the extension and thought, let's try to use the editor without any bracket color extension. I cannot. I've been using the extension [as long as I remember](https://amanhimself.dev/blog/how-i-configure-vscode-for-everything/) and I cannot go back to plain, colorless brackets.

![ss1](https://i.imgur.com/JBOVcnV.png)

To enable this setting, open the `settings.json` file for the VSCode editor and add the following:

```json
{
  // ...
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffb86c",
    "editorBracketHighlight.foreground2": "#8be9fd",
    "editorBracketHighlight.foreground3": "#bd93f9",
    "editorBracketHighlight.foreground4": "#50fa7b",
    "editorBracketHighlight.foreground5": "#f1fa8c",
    "editorBracketHighlight.foreground6": "#abb2c0",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff5555"
  }
}
```

And tweak the colors according to your style!

![ss2](https://i.imgur.com/tSgx02e.png)

By the way, the above colors are from [Dracula theme's 🧛‍♂️ color palette](https://draculatheme.com/contribute) to match the overall editor theme I am currently using.


How to configure VSCode Bracket Pair Colors Natively

---
title: 'How I Configure VSCode for Everything'
slug: 'how-i-configure-vscode-for-everything'
date: '2019-04-22'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://medium.com/better-programming/how-i-configure-vscode-for-everything-7df65a316a52'
---

![cover](https://i.imgur.com/hJ7W51N.jpg)

> [I made updates to this post here](https://amanhimself.dev/blog/setup-macbook-m1/) with additions to setup a new Macbook Pro based on M1 chip in 2021!

Recently, I was at the Boryspil Airport in Ukraine, working on a blog article, when suddenly my VS Code stopped working. It crashed! Not once, but twice in less than 30 minutes. Some of the content was autosaved, but some of it was gone forever.

I was frustrated at first as to why it had to crash at that moment. After re-opening the editor, I was angry with myself because I had to write some of the stuff that didn’t get saved again.

Before this experience, it did at times feel that I had too many extensions that I wasn’t using, as I stopped working with some of the frameworks in recent months (Angular, for example).

What did I do? The emotions weren’t helping; I had to find a better way. So, I re-installed [VS Code](https://code.visualstudio.com/).

VS Code uses [Electron](https://electronjs.org/) as its base which enables it to be cross-platform and work on macOS, Windows, and Linux. It is built using [Node.js](https://nodejs.org/) and has complete support for any JavaScript developer.

Now, that’s what I call win-win. It’s fast compared to the previous editors ([Atom](https://atom.io/)) and IDEs ([Webstorm](https://www.jetbrains.com/webstorm/)) I have used.

## Themes

The first thing I did was install themes that I saw all day. I like my editor to be charming and appealing. Thus, I used the following themes for different purposes.

- fairyFloss (most of the time, because I love purple backgrounds).
- Dracula Official (I used this with my [iTerm](https://www.iterm2.com/) setup and switched between it and fairyFloss).
- Night Owl (just to try something new).
- Material-Icon-Theme (for file icons).

<img src='https://cdn-images-1.medium.com/max/800/1*7utI1vJayaK97t7lYhrv_A.jpeg' />

## Configuring VS Code

Next, I changed a few things that I remembered from my previous settings.

- Set the `Tab` size to two spaces.
- Enabled [Emmet](https://emmet.io/) for HTML and JavaScript.
- Enabled `autoSave` with a delay of 5 seconds.
- Used OS’s terminal setup and shell ([Zsh](https://ohmyz.sh/)).
- Enabled formatting of files by saving and pasting snippets from elsewhere.
- Disabled Minimap as I like to save space and we write modular functions modules these days.
- Also, enabled `wordwrap`.

### Extensions

The next step for me is to make this editor work like a charm with the help of some well-maintained and free extensions.

- [emojisense](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense):
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) (I write a lot of blog posts in VS Code.)
- [Code::Stats](https://codestats.net/) (a small stats tool, for fun.)
- [ESLint](https://eslint.org/)
- [Indent 4-to-2](https://marketplace.visualstudio.com/items?itemName=Compulim.indent4to2) (converts tab indentation from four spaces to two.)
- [Express.js](https://expressjs.com/) (a snippets package written by me.)
- [markdownlint](https://github.com/markdownlint/markdownlint) (I sometimes write more Markdown in a day than JavaScript code.)
- [GitHub pull requests](https://help.github.com/en/articles/about-pull-requests).
- [GraphQL](https://graphql.org/) (published by Prisma.)
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
- [Pug](https://marketplace.visualstudio.com/items?itemName=amandeepmittal.pug) (another snippet by me for Jade and Pug template languages, for some old projects.)
- [IntelliSense for CSS class names](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
- [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
- [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)
- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) (one of the most important extensions I have mentioned here)
- [Word Count](https://marketplace.visualstudio.com/items?itemName=ms-vscode.wordcount)
- [Prettier](https://prettier.io/) (Code formatter I can’t live without.)

With Prettier, I like to use my own set of configurations, as described below.

```json
{
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.useTabs": true,
  "prettier.tabWidth": 2
}
```

## Conclusion

That’s the setup I now use for my JavaScript, Node.js, [React](https://reactjs.org/) and React Native work. What type of VS Code configuration do you use? What does it look like? I hope you enjoyed reading this post.

Happy Coding!

[Originally published at Better Programming](https://medium.com/better-programming/how-i-configure-vscode-for-everything-7df65a316a52)


🔥 4 Posts filtered by tag "vscode"

Stash changes in a git repository with VSCode

Change the color of hidden files and folders in VSCode

How to configure VSCode Bracket Pair Colors Natively

How I Configure VSCode for Everything