The Best VSCode Extensions 2024

Ғылым және технология

The best VSCode extensions. These are some of my favorite VSCode extensions that I use to increase my productivity. Checkout my video to learn more and see a demo of each extension.
Extensions
00:00 Intro
00:07 Prettier
00:33 Code Spell Checker
01:08 ESLint
01:31 Error Lens
02:01 Material Icon Theme
02:31 Live Server
03:04 Auto Rename Tag
03:25 Peacock
03:58 Auto-Open Markdown Preview
04:22 Markdown All in One
04:49 Code Runner
05:13 Jest
05:46 Jest Runner
05:56 Simple React Snippets
06:22 GitHub Copilot
06:46 IntelliCode
07:11 YAML
07:21 GitLens - Git Supercharged
08:11 Git History
08:36 Git Graph
08:56 VSCode Pets
#vscode #programming #coding #softwareengineer #productivity #webdeveloper
Prettier is an opinionated code formatter.
marketplace.visualstudio.com/...
Code Spell checker
marketplace.visualstudio.com/...
EsLint
marketplace.visualstudio.com/...
Error lens display errors from EsLint and other tools next to the line.
marketplace.visualstudio.com/...
Material Icons
marketplace.visualstudio.com/...
Live Server is great for html, js, css live reloading of the browser
marketplace.visualstudio.com/...
Auto rename tag will automatically rename the closing tag for HTML or XML. In my opinion this is an overlooked feature that should be built into VSCode.
marketplace.visualstudio.com/...
Peacock change vs code color per a project.
marketplace.visualstudio.com/...
Auto-open Markdown is a great extension that will automatically open the preview of a MD file next to the edit version.
marketplace.visualstudio.com/...
Markdown All In One adds keyboard shortcuts and more for markdown.
marketplace.visualstudio.com/...
Code runner - Run code snippets right in VSCode. It supports many languages.
marketplace.visualstudio.com/...
Jest extension a fully featured test runner for Jest.
marketplace.visualstudio.com/...
Jest Runner is a great alternative to the jest extension that adds a run and debug button above each test plus various context menus to run tests.
marketplace.visualstudio.com/...
Simple React Snippets helps to speed up react development with many popular code snippets to write react code faster.
marketplace.visualstudio.com/...
Github copilot is an AI pair programmer right in your IDE. It can suggest lines or entire functions to write. GitHub Copilot uses a special version of GPT-3 that has been trained on a large body of public source code. I have used it in the past and found it very useful unfortunately it is no longer free and requires a monthly subscription.
marketplace.visualstudio.com/...
The IntelliCode extension is an AI Assistant for python typescript, javascript and java.
IntelliCode is an AI-boosted upgrade to the built in intellisense code completion feature of VSCOde. It uses AI to provide more accurate suggestions for code completion. It does this by analyzing a developer's code context to make these better suggestions.
It is not as powerful as GitHub Copilot, however the price tag is free.
marketplace.visualstudio.com/...
YAML - if you write any YAML install this for it’s awesome autocompletion and validation of YAML.
marketplace.visualstudio.com/...
GitLens - Git Supercharged as you can tell from the name adds a ton of git features to VSCode. The best feature is the git blame feature. It adds text to every line letting you know the last developer to modify the line of code. Unfortunately some of the features require a subscription.
marketplace.visualstudio.com/...
Git Graph is a graphical representation of your git log and allows you to perform actions from the graph.
marketplace.visualstudio.com/...
Git history is a graphical representation of your git log and allows you to perform actions from the graph.
marketplace.visualstudio.com/...
VSCode Pets adds cute pixelated pets to VSCode. Each pet has a different animation that can amuse you while you code. You can even toss a ball for them to chase.
marketplace.visualstudio.com/...

Пікірлер: 122

  • @dipereira0123
    @dipereira01234 ай бұрын

    I have no f*cking clue of who tf thought that creating this PETs extension on VSCode was a good ideia. but god bless this person and his family.

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    lol I agree!!!

  • @SirMrMystery

    @SirMrMystery

    3 ай бұрын

    not the extension we deserve, but the one we need right now

  • @subarunatsuki1902

    @subarunatsuki1902

    2 ай бұрын

    @@SirMrMystery Exactly

  • @rand6626
    @rand66266 ай бұрын

    Thanks for the tips. You can rename the html tags just pressing F2 on windows.

  • @CodingWithAdam

    @CodingWithAdam

    6 ай бұрын

    You’re welcome! Thanks for the tip!

  • @atlantic_love
    @atlantic_love5 ай бұрын

    One of the most helpful videos I've seen in years on KZread.

  • @CodingWithAdam

    @CodingWithAdam

    5 ай бұрын

    Thank you! 😁

  • @user-vw5fm9lv9v
    @user-vw5fm9lv9v4 ай бұрын

    Thanks for sharing this great content... I found the "VSCode Essentials" Extension necessary as a web developer.

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    You’re welcome! Thank you!

  • @ali0fawzi
    @ali0fawzi4 ай бұрын

    Quality content over here, good work man keep it up, earned a new sub🤝

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    Thank you!!! Im really glad you enjoyed the video!

  • @mona__KH
    @mona__KH3 ай бұрын

    Thank you so much was super helpful!

  • @CodingWithAdam

    @CodingWithAdam

    3 ай бұрын

    You’re welcome! Glad the video was helpful!

  • @proflead
    @profleadАй бұрын

    Thanks Adam! Very useful!

  • @CodingWithAdam

    @CodingWithAdam

    Ай бұрын

    You’re welcome!

  • @tech_path_
    @tech_path_6 ай бұрын

    Great Video .. Keep going

  • @CodingWithAdam

    @CodingWithAdam

    6 ай бұрын

    Thank you! 😁

  • @kjur0
    @kjur02 ай бұрын

    1. You don't need preetier, as VS Code comes with many formatters built in, but if you prefer preetier offers more customizability and its ruleset can be easily shared via config files 2. Live Preview by Microsoft is generally better than Live Server, even if only by smaller RAM usage 3. VS Code has a feature like Auto Rename Tag you just have to find correct emmet function from command pallette 4. All Code Runner does is adds one singular icon... everything else is built in functions that you can access by clicking F5

  • @raybolt3499

    @raybolt3499

    2 ай бұрын

    I use Code Runner to run code on CMD. It is very useful when I don't want to use the inbuilt terminal.

  • @user-wp8cp8gj8s
    @user-wp8cp8gj8s5 ай бұрын

    Thank for the interesting video.

  • @CodingWithAdam

    @CodingWithAdam

    5 ай бұрын

    You’re welcome!!!

  • @siddhanttripathi5224
    @siddhanttripathi52243 ай бұрын

    Helpful !

  • @CodingWithAdam

    @CodingWithAdam

    3 ай бұрын

    Glad the video was helpful!

  • @kostadinhariskov6137
    @kostadinhariskov61372 ай бұрын

    Thank you :)

  • @CodingWithAdam

    @CodingWithAdam

    2 ай бұрын

    You’re welcome!

  • @Odd-Variety
    @Odd-Variety8 ай бұрын

    Thanks very nice

  • @CodingWithAdam

    @CodingWithAdam

    8 ай бұрын

    Thank you! You’re welcome!

  • @abhilashpatel6852
    @abhilashpatel68524 ай бұрын

    finally, someone not shouting at my face and explaining beautifully.

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    Thank you! 😁

  • @freeinformation7877
    @freeinformation78774 ай бұрын

    Thank you very much

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    You’re welcome!

  • @Bullet-Sakamoto
    @Bullet-Sakamoto10 ай бұрын

    Thank you Adam. I'll add some of those VSCode extensions. It's totally off topic, but how could I add a gif on canvas? I tried to add using ctx, but it doesn't move I expected. Only if you have time, could you please give me an idea? Thank you.

  • @CodingWithAdam

    @CodingWithAdam

    10 ай бұрын

    You’re welcome! If you are referring to drawing an animated gif it seems that it is not possible. You can animate images with a sprite sheet or multiple images as I have in my past tutorials. Here is a stackoverflow article that might help stackoverflow.com/questions/3062229/animated-gif-in-html5-canvas

  • @Bullet-Sakamoto

    @Bullet-Sakamoto

    10 ай бұрын

    @@CodingWithAdam I tried to use an animated gif. It's good to know that's not possible. I think I need to start using a sprite sheet to make an animation. I mentioned before that my first tutorial was yours and the codd I wrote actually worked. That was 2021. Now 2023 and I still have the same passion as 2021. That time I didn't understand classes or even objects. I'm glad that I've kept going. Thank you.

  • @verdaisilplayz
    @verdaisilplayz4 ай бұрын

    09:10 BRO ITS BEST VS CODE EXTENSION I THINK I FALL IN LOVE WITH THE EXTENSION

  • @user-ow6tg7de6u
    @user-ow6tg7de6u6 ай бұрын

    и мне же это и вправду очень нравится. я же рада видеть этот лучший контент. реально норм же тут тема

  • @CodingWithAdam

    @CodingWithAdam

    5 ай бұрын

    Thank you! I’m glad you enjoyed the video! 😁

  • @MayankYdvv
    @MayankYdvv6 ай бұрын

    which color theme you are using in this video ?

  • @user-qm7nm5di6n
    @user-qm7nm5di6n8 ай бұрын

    Good, did you try to use the extension Simpler Flutter Tasks

  • @CodingWithAdam

    @CodingWithAdam

    8 ай бұрын

    Thanks I have not I will take a look at that.

  • @NickyDekker89
    @NickyDekker894 ай бұрын

    VSCode Pets is def a must have.

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    It really is!!! 😁

  • @user-uu3zx6xk6h
    @user-uu3zx6xk6h4 ай бұрын

    cool video)

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    Thank you!

  • @coddude3284
    @coddude32847 ай бұрын

    appreciate that

  • @CodingWithAdam

    @CodingWithAdam

    7 ай бұрын

    You're welcome!

  • @wtv07
    @wtv077 ай бұрын

    how can get this ( M, u , 1 or colourful circle) after my file names under left side menu of explorer/editor

  • @HitarthComp
    @HitarthComp3 ай бұрын

    I like All VSCode Extensions Thanks 😇😅

  • @CodingWithAdam

    @CodingWithAdam

    3 ай бұрын

    You’re welcome!

  • @CodingWithAdam

    @CodingWithAdam

    3 ай бұрын

    You’re welcome!

  • @ajayjoseph8722
    @ajayjoseph87225 ай бұрын

    Where do we get an extension to dock third party software such as putty for example?

  • @ovesarora1k
    @ovesarora1k6 ай бұрын

    Try bootstrap icon, It will awesome man!

  • @CodingWithAdam

    @CodingWithAdam

    6 ай бұрын

    Thanks for the suggestion!

  • @fregattkapitany2608
    @fregattkapitany26086 ай бұрын

    You do not need 'auto rename tag' because *Emmet* has a whole bunch of super useful built-in commands for adding - removing - updating - navigating between tags! Ctrl + Shift + P -> type Emmet: 'update tag' if for renaming, 'remove tag' is obvious, 'wrap with abbreviation' is for surrounding a tag or text with another one and 'go to matching pair' is to jump between opening and closing tags.

  • @ikbo

    @ikbo

    6 ай бұрын

    or enable "linked editing" in settings.

  • @lashuthierry9869
    @lashuthierry98692 ай бұрын

    The last one

  • @CodingWithAdam

    @CodingWithAdam

    Ай бұрын

    It’s the best one! 😁

  • @Itachi_1824
    @Itachi_18244 ай бұрын

    how does his code looks so colorful?

  • @eminem992i
    @eminem992i4 ай бұрын

    What name of extension that say done wiht the second

  • @AnimeisFeeling4Us
    @AnimeisFeeling4Us5 ай бұрын

    I am 23 started learning JAVA 😅

  • @CodingWithAdam

    @CodingWithAdam

    5 ай бұрын

    That’s great!!!

  • @vit944
    @vit9444 ай бұрын

    Добрый вечер. подскажите, пожалуйста, какая тема Vscode используется в этом видео?

  • @mito1558
    @mito15589 ай бұрын

    how can i use prettier o downloaded then what, i cant find how i can use this

  • @CodingWithAdam

    @CodingWithAdam

    9 ай бұрын

    Checkout my video on how to install and configure prettier kzread.info/dash/bejne/kZOZy7Ouna-1ddI.htmlsi=DRwA3ffixYQR7MS8

  • @TioUngaro
    @TioUngaro5 ай бұрын

    I like Live Preview

  • @CodingWithAdam

    @CodingWithAdam

    5 ай бұрын

    I agree it’s an awesome extension!!!

  • @muhammadqaisarali
    @muhammadqaisarali6 ай бұрын

    Spell corrector can't correct all the spells at once

  • @johnettipio
    @johnettipio4 ай бұрын

    You forgot the "Incredibly in Your Face" extension ;)

  • @CodingWithAdam

    @CodingWithAdam

    4 ай бұрын

    Great suggestion!

  • @motivefactoryy
    @motivefactoryy6 ай бұрын

    Does anybody has annoying blue border line in each corners?

  • @codelinx
    @codelinx5 ай бұрын

    Is it just me or git lens is very invasive after the demo period....?

  • @larrybud
    @larrybud6 ай бұрын

    PlatformIO gents, if you're doing microcontroller work.

  • @CodingWithAdam

    @CodingWithAdam

    6 ай бұрын

    Thanks for the suggestion! 😀

  • @esstx
    @esstx3 күн бұрын

    vscode pets is the best one

  • @ikbo
    @ikbo6 ай бұрын

    auto rename is not built into vscode. set linked editing preference to true

  • @user-rt1kv6su5o
    @user-rt1kv6su5o6 ай бұрын

    Can a 20 year old still learn to be a programmer?

  • @sadxf5266

    @sadxf5266

    6 ай бұрын

    Of course, I am 23 years old and have been programming for about 14-15 months already. I know people who are starting at 29-30 years old; everyone progresses at their own pace, so no stress 😎

  • @CodingWithAdam

    @CodingWithAdam

    6 ай бұрын

    Of course 20 is not to late. I have known people that have change careers at the age of 40 or older to become software developers. It’s never too late to follow your passion! 😃 As the other comment mentioned everyone progresses at different speeds. Don’t stress if someone is further ahead. Take your time to learn and practice coding!

  • @siamkhan2402

    @siamkhan2402

    6 ай бұрын

    Dude my teacher got into programming at the age of 31. Now he has a decent remote job.

  • @vijaysinghbisht3016

    @vijaysinghbisht3016

    6 ай бұрын

    20 is still a young age to start learning programming 😂

  • @itzs2dyk

    @itzs2dyk

    6 ай бұрын

    heck yeah bro

  • @user-rt1kv6su5o
    @user-rt1kv6su5o6 ай бұрын

    It's not too late to learn to be a programmer from the age of 20,

  • @unavidamasporconocer7159

    @unavidamasporconocer7159

    5 ай бұрын

    29, time to start

  • @bigbong07
    @bigbong073 ай бұрын

    I like the idea of sharing productive tools and extensions BUT why blowing up a light-weight purpose text editor? VS-Code is not supposed to be a IDE. With plugins it is not performant editor and not as smart as IDE. Change my mind.

Келесі