VSCode Profiles - React Flavored
Tags: vscode, productivity, react, testing
Published: 2020-09-22 20:54:00

> ⚠ Outdated: now VSCode support [profiles](https://code.visualstudio.com/docs/editor/profiles)

VSCode without a doubt it's an amazing tool, but for me, is missing an important setting to enable/disable extensions depending on language or workspace.

Almost me, jump all day between projects in different languages and I have a lot of extensions and settings that are useless in each scenario consuming resources. You can disable it manually on each project, but if you create a new one, you gonna need to make it all again. That's a waste of time.

While the VSCode team solves that, we can use a little workaround, creating our dedicated profile for **React** development.

It's not perfect, because you can share those extensions that you use in multiples scenarios. But I prefer missing a little space on the disk in favor of fast settings configurations.

# Create Profile

We are going to create a new profile folder for extensions and data using `--extensions-dir` and `--user-data-dir` parameters.

| OS | Command |
|---|---|
|mac|`code --extensions-dir "$HOME/.vscode/profiles/react/extensions" --user-data-dir "$HOME/.vscode/profiles/react/data"`|
|linux|`code --extensions-dir "$HOME/.vscode/profiles/react/extensions" --user-data-dir "$HOME/.vscode/profiles/react/data"`|
|win|`code --extensions-dir "%HOMEPATH%/.vscode/profiles/react/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/react/data"`| 

>⚠️ WSL2 does not support `--extensions-dir` or `--user-data-dir` flags

# How to use?

Are you crazy? We need to write and memorize this long command each time we want to work with React?. 

No, of course not.

## On macOS/Linux

On this path `$HOME/.vscode/profiles/react/` [download](https://raw.githubusercontent.com/equiman/vscode-flavors/master/icons/icon-react.png) this image:

![icon-mac](https://dev-to-uploads.s3.amazonaws.com/i/yh6m3uq1mnnu18whwlvf.png)

### Alias

An alias can be our best friend in those cases. Open your `.zshrc` or `.bash_profile` and paste this.

```bash
alias code-react="code --extensions-dir \"$HOME/.vscode/profiles/react/extensions\" --user-data-dir \"$HOME/.vscode/profiles/react/data\""
```

Save your file and restart your terminal window. Now you can open a folder project in VSCode with `code .` command, but now, if you going to work with React use `code-react .` instead.

### Dock Launcher

Ons same path, create a file called `code-react.command` with this code inside:

```bash
open -n -a "Visual Studio Code.app" --args --extensions-dir="$HOME/.vscode/profiles/react/extensions" --user-data-dir="$HOME/.vscode/profiles/react/data"
```

Save it and execute permission with `chmod +x code-react.command`.

Copy the `icon-react.png` content on the Clipboard. One way to do this is to open the picture in Preview, choose `Edit > Select All`, then choose `Edit > Copy` or press `Command-C`.

Select `code-react.command` file, then choose `File > Get Info`. At the top of the Info window, click the picture of the icon to select it, then choose `Edit > Paste` or press `Command-V`.

Select `code-react.command` file, then choose `File > Make Alias` or press `Command-L` name it as **VSCode React** (with blank space between). Just drag and drop this alias shortcut to your Dock or Desktop.

![dock-macos](https://dev-to-uploads.s3.amazonaws.com/i/nafwoxosw7819bq2cud2.jpeg)

> Recommended configurations: Open a terminal window, go to 'Preference > Profiles. Set Auto close terminal on exit: inside 'Shell' tab, select "Close if the shell exited cleanly" on "When the shell exits" option.

## On Windows

On this path `%HOMEPATH%/.vscode/profiles/react/` [download](https://raw.githubusercontent.com/equiman/vscode-flavors/master/icons/icon-react.ico) this icon:

![icon-win](https://dev-to-uploads.s3.amazonaws.com/i/yh6m3uq1mnnu18whwlvf.png)

### Shortcut

On the same path, create a shortcut file and set with these properties:

Named as: `VSCode React`

Set target as:

```bash
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --extensions-dir "%HOMEPATH%/.vscode/profiles/react/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/react/data"
```

Start In as :

```bash
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code"
```

And use the icon downloaded previously.

> Sadly on Windows create an alias it slightly more complicated than macOS/Linux, then you only can open it using the shortcut and can't open it directly from the project path. But if you are using WSL you can use the same alias approach from mac/linux.

---

# Colors

It will be good to recognize when are using your VSCode and your React flavored VSCode version.

```json
{
    "workbench.colorCustomizations": {
        "activityBar.background": "#00d8ff",
        "activityBar.foreground": "#000000",
        "activityBar.inactiveForeground": "#00000099",
        "activityBarBadge.background": "#6dffff",
        "activityBarBadge.foreground": "#000000",
        "statusBar.noFolderBackground": "#00a6cc",
        "statusBar.background": "#00d8ff",
        "statusBar.foreground": "#000000",
        "statusBarItem.hoverBackground": "#00a6cc"
    }
}
```
<figcaption>/.vscode/settings.json</figcaption>

![vscode-react](https://dev-to-uploads.s3.amazonaws.com/i/1n9etq9pa5vwxuk76yy0.png)

---

That's all. Now it's up to you what settings and extensions do you want to install. Those are my favorite recommendations.

# Extensions

## Editor

- [DotENV](https://marketplace.visualstudio.com/items?itemName=dotenv.dotenv-vscode)

- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

- [Template String Converter](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter)

```json
{
    "template-string-converter.autoRemoveTemplateString": true,
    "template-string-converter.addBracketsToProps": true,
}
```
<figcaption>/.vscode/settings.json</figcaption>

- [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)

- [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)

- [Token CSS](https://marketplace.visualstudio.com/items?itemName=tokencss.tokencss-vscode)

- [Preview.js](https://marketplace.visualstudio.com/items?itemName=zenclabs.previewjs)

- [Sapling](https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling)

## Packages

- [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)

```json
{
    "javascript.suggest.paths": false,
    "typescript.suggest.paths": false
}
```
<figcaption>/.vscode/settings.json</figcaption>

## Snippets

- [dein Snippets Pack](https://marketplace.visualstudio.com/items?itemName=deinsoftware.dein-snippets-pack) - Debug + Const & Props + Arrow Functions

- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

To remove `import React` on top for React 17+ projects add this configuration.

```json
{
  "reactSnippets.settings.importReactOnTop": false,
}
```

- [Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)

## Styles

- [CSS Modules](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules)

- [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

- [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables)

## Testing

- [Test Explorer UI](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer)

```json
{
    "testExplorer.errorDecoration": true,
    "testExplorer.errorDecorationHover": true,
    "testExplorer.useNativeTesting": true
}
```
<figcaption>/.vscode/settings.json</figcaption>

- [Vitest - Test Explorer](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer)

- [Vitest Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.vitest-snippets)

- [Code Coverage Highlighter](https://marketplace.visualstudio.com/items?itemName=brainfit.vscode-coverage-highlighter)

And remember add `coverage` folder to `.gitignore` file.

---

# Settings

```json
{
    "emmet.excludeLanguages": [],
    "emmet.triggerExpansionOnTab": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "todo-tree.filtering.excludeGlobs": [
        "**/build/**",
        "**/coverage/**",
        "**/dist/**",
        "**/node_modules/**"
    ],
}
```

---

# Sync

I'm not a big fan of the built-in VSCode Sync option because you can use more than one GitHub user account and also you can't create profiles.

But don't worry, we can use the well known [Setting Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) extension.

Please [create another GitHub account](https://github.com/join), adding `-react` to your username and `+react` to your Gmail account.

![github-user](https://dev-to-uploads.s3.amazonaws.com/i/qscnnke4g759ghgph244.png)

With this trick, you can have another GitHub account without creating a new email account. Just use your new `username-react` account and voilà, your React flavored VSCode version can be sync across multiple devices.

---

# Chrome/Edge Extensions

You will need some debugging tools on Chrome, I can recommend these extensions.

- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

- [Redux Devtools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)

- [Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano)

- [Locale Switcher](https://chrome.google.com/webstore/detail/locale-switcher/kngfjpghaokedippaapkfihdlmmlafcc)

- [Debug CSS](https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj)

---

# Bonus track

Don't forget to look at this stellar project setup to automate linting, formatting, and other boring tasks.

{% post https://dev.to/equiman/vite-powerful-react-project-g4m %}

{% post https://dev.to/equiman/powerful-react-project-setup-3k3l %}

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)