Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets> JavaScript First - The best JS snippets and much more.New to Visual Studio Code? Get it now.
 JavaScript First - The best JS snippets and much more.

JavaScript First - The best JS snippets and much more.

HansUXdev

|
2,123 installs
| (0) | Free
JavaScript First is a collection of snippets useful for working with JS--based servers, browsers, databases and more.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JS-1st README

This extension aims to be the most comprehensive code snippet extension for JavaScript. This extension isn’t meant to just replace the most popular JavaScript Snippets you already use, but go beyond them (eventually). Here are few goals I have for creating this new extension:

  1. Go beyond code completion and gently correct bad habit like using var.

  2. Educate users about what they are typing with detailed descriptions.

  3. Provide links to documentation, articles and videos to help explain things better...

  4. Provide more snippets for common tasks in an effort to replace a few frameworks/libraries, example creating react components with hooks 😉.

NOTES:

  • Although this extension supports various frameworks, it aims to eventually replace some of them in favor of better code standards based on community feedback.
  • This extension will be primarily published and maintained on open-vsx and all updates will be intentionally delayed on the vs-marketplace by 24 hours in order to promote the open source marketplace.

Snippet Catagories

This extension has several catagories and multiple snippet files. As a result documentation will not be fully up to date.

The following snippets falling to the following catagories:

  1. JavaScript Methods
    1. Declarations
    2. Control Flow
    3. Functions
    4. Loops
    5. Iterables
    6. Objects
    7. Classes
  2. Node Methods
    1. require
    2. export
    3. http
    4. etc
  3. Test Driven Development
  4. Browser Methods
  5. React Methods
  6. Dockerfile
  7. Algorithms (because memorizing them interviews is dumb) (currently just bubble sort, descriptions, tutorials, etc will be added soon).

Documentation

This extension is currently not documented as well as I would like. That will change by version 1.

If you currently using the top ranked javascript snippets and react snippets, you should be able to uninstall them and use this extension as a full replacement. You can also read more about this on a medium article I wrote a while ago and just updated.

Here are a few gifs in the meantime...

Gently Correct bad code habits and explain why (ex: stop using var )

stop using var

Basic Algorithms, one tab away...

Algorithms

React Hooks and Component snippets

React Hooks

Release Notes

0.0.5

Better documentation (gifs and readme) and a few smart features.

0.0.7

Fix bugs and dev tools.

Roadmap

1.0.0

Will have completed documentation.

1.5.0

Will have close to double the ammount of features.

2.0.0

Will a have much more ambitious features 😜.

Why you should consider supporting the developer

If you use this a lot or want to see it improve consider giving it a star or becoming a githup sponsor.

I author does a lot more than just publishing a json file for snippets.

Here are just a few things he's working on, while taking care of his 👶 as a full-time single father, job hunting & competing in hackathons...

Educational Repos

Trigger Description & Info
JavaScript-First An Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript..
Learn Mongo GitPod A repo designed to teach mongoDB to people with zero experiance and zero config, meaning you can learn on virtually any device that has a browser that GitPod can run on! This 🤞may🤞 become part of Free Code Camp [1], [2].

Other Snippets & Extensions

Name Description
Bootstrap 5 A snippet extension for creating educational slides with vscode-reveal and a custom theme. (not public yet)

Future Snippets & Extensions

Name Description
Code Slides A snippet extension for creating educational slides with vscode-reveal and a custom theme. (not public yet)
Foundation 6 Snippets This will start as a snippets for sites and then be updated for email. If sponsored, I will extend this to eventually replace the CLI and building blocks by implementing a custom feature that writes install kits in a similar way the web boilerplate writes an html, css, and js file. (not started yet)

Social Entrepreneurship: Open Source Non-Profit

I'm in the process of founding a non-profit dedicated to promoting open source by doing the following and can only commit to the first two without proper sponsorship: Name | Description --- | --- Creating open source curriculum | Getting open source curriculum into the hands for high school students. CTE Coding Students | Bringing industry professionals into the class room to inspire them (via zoom). I already did this as a teacher by bringing people from Riot Games / Carvana, Choice Hotels, Auth0, and many others into my classroom. Now I want to streamline this for more schools. Free Coding Classes on Twitch | I stream open source classes for an introductory javaScript class every week to test the open source curriculum I write. Think of it as a free bootcamp online. I also despritely need a better computer that doesn't require iced gel packs to be able to stream 😅.... Lobbying for Open Source Certification | When I taught in a public CTE high school, I couldn't believe that a multiple choice test like th MTA certifications were approved by the state over test-driven and open source certifications such as Free Code Camp's. I know enough school board members and a few house members to help get the ball rolling but, it's a lot of leg work and I don't want to commit to this without funding... Laptop | Donating 4G latops/tablets to students struggling with remote academic life. Having taught a few students with bad internet, etc, this is especially important to me but I don't have the resources to address this without funding.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft