Helpful Development Plugins

[PrestonMoore44]

Is your feature request related to a problem? Please describe. A list of your most helpful web plugins

Describe the solution you'd like A helpful list of safe plugins we've found to be helpful while developing.

Some common web plugins for React Development:

• React Developer Tools
• Redux DevTools Extension

If you know of any others feel free to add them!

[Karvel]

I have a list I wrote up a while back for my recommended Visual Studio Code Extensions:

Visual Studio Code

Recommended Extensions

• GitLens — Git supercharged - Visual Studio Marketplace Awesome parsing of the project's git information. Allows you to see history and blame within the project, and can show you git history on the line you highlight.
• Bracket Pair Colorizer 2 - Visual Studio Marketplace Makes nested brackets have different colors.
• change-case - Visual Studio Marketplace An easy way to change the case of selected text.
• Code Spell Checker - Visual Studio Marketplace A regular spell checker. It's smart enough to parse each part of camel/pascal case separately.
• IntelliSense for CSS class names in HTML - Visual Studio Marketplace Autocompletion for CSS names based on existing rules.
• Path Intellisense - Visual Studio Marketplace Path autocompletions.
• Debugger for Chrome - Visual Studio Marketplace Debugger. Essential.
• Docker - Visual Studio Marketplace Useful tooling if you use Docker.
• ESLint - Visual Studio Marketplace The de facto Javascript linter.
• Excel Viewer - Visual Studio Marketplace Can parse CSV as a table.
• Live Server - Visual Studio Marketplace An easy way to launch a server from your project.
• Todo Tree - Visual Studio Marketplace Helps organize TODOs so they don't get lost.
• Live Share Extension Pack - Visual Studio Marketplace LiveShare extension pack. The paired programming tool of choice at Shift3.

Angular

• Angular Essentials (Version 9) - Visual Studio Marketplace A pack of extensions maintained by one of the "celebrities" in the Angular world.

Settings

In addition to the above extensions, I have some settings I configure in Visual Studio Code:

• Turn on Codelens for Javascript and Typescript. This parses your projects for class, method, and property references and shows them above the class/method/property declaration. It does cause slight slowdown when loading a file, but I consider it a worthy tradeoff.
• Turn on breadcrumbs. These show file path breadcrumbs above the editor window.

[codysmith287]

@Karvel Awesome list! I was just thinking of putting together a list of fairly nonopinionated and helpful extensions for Visual Studio exactly like this one.

What do you think about Prettier?

I know Prettier is pretty opinionated, but I like that it saves time and attention on formatting. It is lazy? Ehh... yeah, probably. A couple of things I would recommend one do if using Prettier in your Visual Studio Code settings would be: 1) Have Prettier formatting run on each time you save a file rather than run as an npm script. 2) Have Prettier format only if a Prettier config file (.prettierrc) exists in the root directory of a project. That way if you're working on a project where Prettier is not wanted it won't create unnecessarily huge file diffs. If this wasn't an option I wouldn't use Prettier as it's really annoying when you don't want it or it is not used among other developers on your team.

Another extension I like is indent-rainbow. I would venture to say it shouldn't be opinionated as Prettier because it's more individual to the developer.

[codysmith287]

@Karvel Also is your list already somewhere in the S&P repo? Thanks for sharing this as there were a few game changer extensions on your list that I didn't have.

[Karvel]

@Karvel Awesome list! I was just thinking of putting together a list of fairly nonopinionated and helpful extensions for Visual Studio exactly like this one.

What do you think about Prettier?

I know Prettier is pretty opinionated, but I like that it saves time and attention on formatting. It is lazy? Ehh... yeah, probably. A couple of things I would recommend one do if using Prettier in your Visual Studio Code settings would be:

1. Have Prettier formatting run on each time you save a file rather than run as an npm script.
   ![image](https://user-images.githubusercontent.com/20328572/104073934-c75a7980-51c3-11eb-8a40-a27ace8ed2ba.png)

2. Have Prettier format **only** if a Prettier config file (`.prettierrc`) exists in the root directory of a project. That way if you're working on a project where Prettier is not wanted it won't create unnecessarily **huge** file diffs. If this wasn't an option I wouldn't use Prettier as it's really annoying when you don't want it or it is not used among other developers on your team.
   ![image](https://user-images.githubusercontent.com/20328572/104074745-b7dc3000-51c5-11eb-92f9-aa717e139615.png)

Another extension I like is indent-rainbow. I would venture to say it shouldn't be opinionated as Prettier because it's more individual to the developer.

I have started setting up prettier in my projects with a pre-commit hook. This enforces its styling project-wide. I don't actually like some of its styling, but I do like not having to think about style preferences anymore, or having to worry about constant style change deltas between individual editor settings. Here is the PR where I added it to the Angular boilerplate. The process should basically be the same for any Javascript project using npm.

@Karvel Also is your list already somewhere in the S&P repo? Thanks for sharing this as there were a few game changer extensions on your list that I didn't have.

Not at the moment, that's why I responded here! I have shared it in the mentoring slack channel. I originally created it for a new cohort sometime last year.