loading...
Cover image for VSCode - React Flavored

VSCode - React Flavored

equiman profile image Camilo Martinez Updated on ・7 min read

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"
linu 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"

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 this image:

icon-mac

Alias

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

alias code-react="code --extensions-dir \"$HOME/.vscode/profiles/react/extensions\" --user-data-dir \"$HOME/.vscode/profiles/react/data\""
Enter fullscreen mode Exit fullscreen mode

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

Create a file called code-react.command with this code inside:

open -n -a "Visual Studio Code.app" --args --extensions-dir="$HOME/.vscode/profiles/react/extensions" --user-data-dir="$HOME/.vscode/profiles/react/data"
Enter fullscreen mode Exit fullscreen mode

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

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/extensions download this icon:

icon-win

Shortcut

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

Named as: VSCode React

Set target as:

"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"
Enter fullscreen mode Exit fullscreen mode

Start In as :

"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code"
Enter fullscreen mode Exit fullscreen mode

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.

{
    "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"
    }
}
Enter fullscreen mode Exit fullscreen mode
settings.json

vscode-react


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

{
    "javascript.suggest.paths": false,
    "typescript.suggest.paths": false
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Debugging

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode
launch.json

If you want to disable the browser opening each time when executing npm run start command, just add BROWSER=none on .env file.

{
    "turboConsoleLog.logMessagePrefix": "DEBUG -> "
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Linters

{
    "stylelint.enable": true,
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Snippets

Styles

Testing

Add jest configuration at end of env:

{
  env: {
    ...,
    jest: true,
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js
{
    "testExplorer.errorDecoration": false
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Add test coverage at end of scripts:

{
  "scripts": {
    ...,
    "test:c": "react-scripts test --coverage"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

And remember add coverage folder to .gitignore file.


Settings

Specific purposes for all React projects.

{
    "emmet.excludeLanguages": [],
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact"
    },
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
}
Enter fullscreen mode Exit fullscreen mode
settings.json

There are a lot of VSCode extensions out there. If you are hungry for more check my essentials extensions and configurations.


Auto Formating

It's recommended to make these configurations on project settings and not in the global settings.

{
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "javascript.validate.enable": false
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Install and config on the project folder:

npm i -D eslint
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

My opinionated configurations are:

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No
Run: Browser and Node
Style guide: Popular -> Standard (without ;)
Format: JavaScript

Update configurations rules:

{
  rules: {
    'react/prop-types': "off"
  }
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

If you don't want to use eslint extensions, add list and fix command at end of scripts:

{
  "scripts": {
    ...,
    "lint:l": "eslint .",
    "lint:f": "eslint . --fix"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

With ES Lint can be enough, and Prettier it's optional because have a little better performance formatting than ES Lint. If you want to use it go ahead.

{
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Install Prettier and ES Lint for prettier:

npm i -D prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Create a .prettierignore file on the root of the folder project:

build
coverage
node_modules
dist
Enter fullscreen mode Exit fullscreen mode

Create a .pretierrc.json file on the root of the folder project:

{
    "semi": false,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Add extends prettier configuration at end of extends:

{
  extends: [
    ...,
    'prettier'
  ]
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

If you don't want to use prettier extensions, add check and write command at end of scripts:

{
  "scripts": {
    ...,
    "prettier:c": "prettier . --check",
    "prettier:w": "prettier . --write"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

It works over Husky and only runs linters against staged git files. By doing so you can ensure no errors go into the repository and enforce code style.

Install and config on the project folder:

npx mrm lint-staged
Enter fullscreen mode Exit fullscreen mode

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 extension.

Please create another GitHub account, adding -react to your username and +react to your Gmail account.

github-user

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 Extensions

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


That’s All Folks!
Happy Coding 🖖

Buy me a cofee

Posted on by:

equiman profile

Camilo Martinez

@equiman

['Family Man', 'Engineer', 'Software Developer', 'Metalhead', 'English Student' ]

Discussion

pic
Editor guide