marketplace.visualstudio/ark-react-extensions-pack

All common extension between the different packs has been moved to Ark's Common Extensions Pack

Ark's React Extensions Pack

• Ark's React Extensions Pack
  • FAQ
    • Why do I need all those extensions
    • What about the extensions I've already installed
  • Included Extensions
    • Core
    • Linting and Syntax highlighting
    • Tricks
  • Configuration
  • How to contribute

This is a pack with the extensions I use and recommend to my coworkers, so we can activate/deactivate between workspaces easier. For example, when working with react and angular projects the process of whitelisting workspace only extensions is kind of tedious.

FAQ

Why do I need all those extensions

Maybe. You can just disable any extension you don't want to use. But I recommend you to try them.

• The ones with the icon 🔥 are my favorites!
• Those with the icon 🔒 are a must!

Having less extensions running at the same time will always return a better performance. But remember that not all extensions are running in the background!: those "on demand" (command palette) extensions weight almost nothing performance wise.

• The extensions with the icon ⚙️ can be kind of heavy on performance

I'll try to explain why I use every extension and how to configure it, but feel free to add a new PR with any change proposal.

What about the extensions I've already installed

Those that aren't included will not be affected. The ones that are included but were already installed will work as the were, but will be managed with the pack:

• If you enable the pack for a workspace all its extensions (actual and future ones) will be enabled for that workspace
• The same if you disable the pack.
• If you set a unique status for a extension included in the pack, for example you disable the pack as a whole but enable a pair of extensions, the individual settings will prevail over the pack ones.

Included Extensions

Core

• 🔒 ESLint: Integrates ESLint into VS Code. As we have prettier rules inside our eslintrc file, we will only need to use this linter.

Linting and Syntax highlighting

• 🔥 LintLens: When editing .eslintrc rules, will tell what every rule do and if it's configured correctly.
• Cucumber (Gherkin) Full Support
• Snippets and Syntax Highlight for Gherkin (Cucumber): Mainly highlight for feature files
• Browserlist: Highlighting for Browserlist files

Tricks

• 🆕 Sort Package.json: Automatically sort package.json
• 🆕 Typescript Explicit Types: Automatically generates explicit types
• Glean: Refactoring tools, like extract to a new file (so useful!)
• Jest-cucumber code generator: Automatic jest-cucumber test generator layout from a .feature file
• ⚙️ Javascript Booster: refactoring tools like convert from/to function to arrow function, and a lot more

Configuration

First of all you should install a good all-in-one font, and use it.

I'll recommend you the two I use, from the NerdFonts project: JetBrainsMono Nerd Font & DroidSansMono Nerd Font.

This fonts supports font ligatures and have been patched with all kind of icons to be used with advanced ZSH themes like powerlevel10k (this princess will be talk about in another castle)

• Do you have brew? If not, lets start by installing it!

  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
  

• Then...

  brew tap homebrew/cask-fonts
  brew cask install font-jetbrainsmono-nerd-font
  brew cask install font-droidsansmono-nerd-font-mono
  

Now that we have brew installed for sure, let me talk you about how to install node correctly, just to be sure.

I hate the official installer and its documentation, and tend to avoid it at all costs. What I do like is n, a Node.js version manager, installed with brew. It will install the node versions you want to use at /usr/local, avoiding all kind of shenanigans.

• If you have alread installed node...in your place I probably uninstall it. If you don't want to just skip this step.

• Install n and the lts version of node

  brew install n
  n lts
  

Can anybody find me somebody to love?... I use brew to install almost everything. Brew is love! 😍

Now, lets create a custom workspace settings file! Let's do it the easy way:

• Open VSCode at your react project :)
• Open the command palette: cmd+shift+p
• Type workspace json, and you will be able to open the current workspace

Now open the settings.json included, and copy it at your workspace settings! As you can see I have added comments explaining what does every setting :)

When you have this options fulfilled, we can configure how to quick change between workspaces.

• First lest go to the extensions list and disable this addon
• Then enable it only for the workspace

Now go to the projects manager and select another project! In that project you will see that the react extensions included in this pack are disabled! If you open the react project again you will se that the react extensions and settings are automatically switched on again! isn't that cool? 😉

Do you want to be able to easily know what workspace are you editing? Take a look at the peacock extension, or just try at de command palette Peacock: Change to a favorite color 🌈

How to contribute

Do you have a extension you really like?

Just wants to provide some configuration or having any doubt?

Add a issue! 😉 👍🏻