My Top 10 VSCode Plugins 2021

2

Tue Nov 30, 2021 8:32 pm
Clan Leader
Top Dog
Nuke Dev / Coder
2755 Posts
coRpSE
In-Game
SCUM

Most Played:
This week: 63.2hrs.
Total Played: 1,423hrs.


  
For the past few years, I have been using
Please login to see this link
Get registered or Log in
as a free replacement for Dreamweaver, which was my go-to code editor. I've tried others such as Notepad ++, Sublime text, and many others, but, overall performance and flexibility, not including the mass amount of extensions & themes made this a no-brainer. You can check out my review that I did back a few years ago
Please login to see this link
Get registered or Log in
. I will be doing a followup this coming year. But, today, I am going to give my top 10 plugins that I use on VSCode all the time to make working easier.

These are not ranked from best to worse, but, just the top 10 that I think are the best for work flow and ease of coding.

  1. Please login to see this link
    Get registered or Log in
    - This extension makes it easy to put in all things like alerts, queries, to-do's, highlights, ect..., to make your script easier to read.

  2. Please login to see this link
    Get registered or Log in
    - This applies the hex color border/background/box/dot to your color code that you select for easier viewing. Me, I use the background, so I can easily see the color the hex code is.

  3. Please login to see this link
    Get registered or Log in
    - The title should be enough of a description. When I am working on HTML, and just say I type in the code for a div, it will automatically give me the closing the div tag which saves on time.

  4. Please login to see this link
    Get registered or Log in
    - This pairs well with the extension above, where just say you write a span, and you want to change that to a p, (paragraph), then all you need to do is do it to the opening and the closing tag will be edited automatically.

  5. Please login to see this link
    Get registered or Log in
    - This extension will highlight an area where an error may be, for faster tracking. Helps with missing brackets, semicolons/colons, ect...

  6. Please login to see this link
    Get registered or Log in
    - When a coder is writing out lines of code, sometimes they put in extra spaces where they are not necessary, like at the end of a line of code. This is called whitespace. Years ago, I had a discussion with some developers at RN where they said white spaces slowed down your script, I pointed out that they were full of shit and that sparked the hate - hate relationship we had with each other. If you guys want to know the rest of that story, just ask, and I will tell you, but we did agree on one thing. That was, it's ugly to have all that trailing whitespace. This will highlight all of it, so you can remove it from your script if you have any.

  7. Please login to see this link
    Get registered or Log in
    - This has helped me a lot when working on others site, where if they are trying to install something that I have on my site, I can usually open up their files and compare them to mine to find the differences and usually helps me track down their mistakes. It's an older script, but unlike the others, all you need to do is right-click on the script and select #1 for the first file, then #2 for the second.

  8. Please login to see this link
    Get registered or Log in
    - This is a tool to show linked image previews in the gutter and on hover.

  9. Please login to see this link
    Get registered or Log in
    - When working on multiple files within projects, it's nice to be able to see what type of file it is quickly by a simple visual icon next to the file name.  I just listed the one I use, but there are a bunch of others out there.

  10. Please login to see this link
    Get registered or Log in
    - This extension made updating my theme here faster and easier to do. What this does, when you have a project open, like a theme, and you need to quickly see where and what file the CSS IDs and classes are being called from, this will show you the right file, line, and show you the class. Working on it as a project, (opening the folder then opening the files from there rather than opening just the individual files), is what you need to do to get it to work.


Those are the top 10 extensions that I use daily when I am coding. I stayed away from themes since that is really dependent on your taste, and I also stayed away from various IntelliSences, for I use a bunch of different ones and never know which ones are popping up. But, if you guys want to know which ones I am using, I will post a list of them.


Expand
Forums ©