marketplace.visualstudio/ark-react-extensions-pack
All common extension between the different packs has been moved to Ark's Common Extensions Pack
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.
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.
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.
- ๐ ESLint: Integrates ESLint into VS Code. As we have prettier rules inside our eslintrc file, we will only need to use this linter.
- ๐ฅ 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
- ๐ 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
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
๐
Do you have a extension you really like?
Just wants to provide some configuration or having any doubt?
Add a issue! ๐ ๐๐ป