How I Setup And Customize VSCode

Поділитися
Вставка
  • Опубліковано 3 січ 2025

КОМЕНТАРІ • 214

  • @WebDevSimplified
    @WebDevSimplified  3 роки тому +15

    Get 50% off Tabnine for 6 months with the below link.
    www.tabnine.com/pricing/checkout?planInterval=month&promotionCode=WDSPRO
    This link is only valid for the first 100 people.

    • @thelazt16
      @thelazt16 3 роки тому

      Font Switcher is a nice way if you want to change your font easily.

    • @JustinMacri007
      @JustinMacri007 2 роки тому

      Kyle you seem like a cool guy

  • @vaibhavjain4881
    @vaibhavjain4881 3 роки тому +303

    Kyle, a suggestion for your next video: How do I setup and customize my Hair.

    • @anton-vr5xw
      @anton-vr5xw 3 роки тому +3

      😂😂😂👍

    • @coltonaallen
      @coltonaallen 3 роки тому +44

      .hair {
      display: fantastic;
      height: yes;
      }

    • @xtrailz
      @xtrailz 3 роки тому +7

      his new channel will be called Dev Hair Simplified

    • @Derpy999
      @Derpy999 3 роки тому +1

      Use css

    • @madara_uchiha_WB
      @madara_uchiha_WB 3 роки тому +14

      @@coltonaallen see full:
      .hair-style{
      display: fantastic;
      height: yes;
      min-height: 10cm;
      position: fixed;
      background: radial-gradient(#ffaa00);
      }

  • @vexular2185
    @vexular2185 3 роки тому +118

    We need a hair tutorial 😳

    • @JulienReszka
      @JulienReszka 3 роки тому +3

      Step 1: Gene editing
      Step 2: Profit

    • @karamelhaj
      @karamelhaj 3 роки тому

      Agreed

    • @otamisan
      @otamisan 3 роки тому

      and skin routine

    • @mike4139
      @mike4139 3 роки тому

      You guys havent seen the Javascript React Snapchat Web Devsimplified filter?

  • @randy918
    @randy918 3 роки тому +24

    I love the “biscuits” extensions: they label the closing brackets, which is great when the opening bracket is off-screen above.

  • @ashish_prajapati_tr
    @ashish_prajapati_tr 3 роки тому +38

    pls make video on what shortcut keys you use to speed up your coding.

  • @vipul8749
    @vipul8749 3 роки тому +3

    I accidentally found this channel and now I regularly watch all videos, best video bro

  • @sashaikevich
    @sashaikevich 3 роки тому +17

    Consider adding Jumpy and Bracket Pair Colorizer to your list of must-have plugins. The first lets you easily jump to different parts of your code. The second helps match up different brackets.

    • @Daniel_WR_Hart
      @Daniel_WR_Hart 2 роки тому

      I don't mean to trigger anyone but when I looked up Jumpy I thought "Who needs Vim when this exists"

  • @randy918
    @randy918 3 роки тому +4

    In a world filled with repetitious VSC extension lists, this was a great quick-paced video. I learned a lot and loaded some new (for me) extensions

  • @circulardep
    @circulardep 3 роки тому +9

    ESLint is arguably one of the most important extensions.

  • @jameso2290
    @jameso2290 3 роки тому +3

    Cool tip: You don't need to modify VS Code's CSS to make the text bigger just for videos like this -- you can simply press [CTRL] [ + ] or [CTRL] [ - ] to Zoom the whole GUI of the program. Super useful when I'm switching from a large monitor to smaller screen too!
    I actually wish more software had easy UI zooming feature like this, as High DPI support on Windows is really janky and inconsistent.

  • @chris35932
    @chris35932 3 роки тому +2

    Brilliant, I was thinking I need to search for VS code set-up, and your vid popped up, thank you - you read my mind :)

  • @emreozgun3846
    @emreozgun3846 3 роки тому +3

    thanks for TODO Highlight, really needed something like that!

  • @m3mory_leak344
    @m3mory_leak344 3 роки тому +20

    I'm gonna watch this after I shower eating breakfast

    • @hikari1690
      @hikari1690 3 роки тому +4

      Wont your kitchen get wet amd mucky if you shower there?

    • @m3mory_leak344
      @m3mory_leak344 3 роки тому +1

      @@hikari1690 heeeeeeheee

  • @AmodeusR
    @AmodeusR 3 роки тому +7

    7:24 Why don't you make use of Workspaces then? You could have a custom workspace specifically to your workflow or youtube channel, and the general workspace just as you like, or even another custom workspace with all the modifications you would want to have enabled or different from the default.

  • @bryanurizar
    @bryanurizar 3 роки тому +1

    Tabnine is incredible!

  • @srinathsathyanath7435
    @srinathsathyanath7435 3 роки тому +4

    webDevSimplified is my now "go to" tutorial channel 👍
    Great job bro 🔥

  • @mountakhabi
    @mountakhabi 3 роки тому +3

    You absolutely need to see the extensions Thunder client and Quokka

    • @gwalchmei
      @gwalchmei 3 роки тому +2

      Oooh! He covered quokka last week. Started using it because of that - and it’s been absolutely great!

    • @architapatnaik8116
      @architapatnaik8116 3 роки тому

      yes Thunder client absolute gem

  • @thelazt16
    @thelazt16 3 роки тому

    Font Switcher is a nice way if you want to change your font easily. I've been using it for months and love it.

  • @JamesL88
    @JamesL88 3 роки тому +2

    Cascadia Code is also a great free font with ligatures I would recommend trying out

  • @habtamusium123
    @habtamusium123 17 днів тому

    I got intersting lesson to start up web ! many thanks

  • @OstonCodeCypher
    @OstonCodeCypher 3 роки тому +1

    Greetings from Uganda 👍👍

  • @WandersonDavid_KariJobeBrasil
    @WandersonDavid_KariJobeBrasil 2 роки тому +2

    Pretty helpful. Thank you for your tips.

  • @leadlearner6391
    @leadlearner6391 3 роки тому +1

    thnQ for sharing these valuable VSCode extensions Kyle :-) ditto on 'short-cuts' video to help speed up productivity

  • @vedantthombare1028
    @vedantthombare1028 3 роки тому +1

    Do you order pizza by your extension?

  • @alanliang203
    @alanliang203 3 роки тому

    Thank you for your videos young Sir. Very professional and to the point. You will be or already are a rich man.

  • @ipsb
    @ipsb 3 роки тому +2

    For the theme I would recommend using "JellyFish Theme" as it's so beautiful and awesome to work with.

  • @marvelouswalrus949
    @marvelouswalrus949 3 роки тому +2

    Tabnine is awesome, the only minor issue with it is that it alone occupies more than 1GB of your memory.

    • @sharonkruk8159
      @sharonkruk8159 3 роки тому +2

      Thanks! You can register Tabnine hub and enable Tabnine Cloud in your IDE. This way the model won't run locally

  • @dnngoat
    @dnngoat 3 роки тому +1

    I'd love to know your thoughts on tailwind CSS. As a company we are looking at this as overall most of our developers use bootstrap as a base and the applications we build in often use bootstrap, however, it seems like it has some potentially good reasons to use rather than bootstrap, especially when you generally override much of bootstraps classes.

  • @TheIsmaelsampaio
    @TheIsmaelsampaio Рік тому

    4:10 where i get the css classes of the editor to customize?

  • @koko5498
    @koko5498 3 роки тому +1

    I really hope that the "tabnine cracks it up to eleven" was a reference to the Spinal Tap interview

  • @gabrieldongmo5446
    @gabrieldongmo5446 2 роки тому

    Thank you for the suggestions. I was searching about Gitlens and you just show it in priority.

  • @karamelhaj
    @karamelhaj 3 роки тому +5

    We want a hair tutorial 🌚

  • @Alverndbl
    @Alverndbl 3 роки тому +1

    I also recommend Todo Tree, provides highlights in the comments but also let's you view a list of all of the To do you commented in all the files.

  • @chubbyBunny94
    @chubbyBunny94 3 роки тому

    Tabnine does work for me anymore!

  • @AslamD
    @AslamD 3 роки тому +1

    Try "Thunder Client" extension, you will stop using REST Client. Great video btw.

  • @vyas1
    @vyas1 3 роки тому

    Will you do a Typescript tutorial?

  • @codeSTACKr
    @codeSTACKr 3 роки тому +12

    🍕🍕🍕

  • @hamzehqatash6256
    @hamzehqatash6256 2 роки тому

    Thanks a lot for your efforts

  • @ericcc5676
    @ericcc5676 Рік тому

    love this video thanks you so much

  • @kuldipthakkar1508
    @kuldipthakkar1508 3 роки тому +1

    next react project for beginners or JS project ?

  • @mrsmith7012
    @mrsmith7012 3 роки тому

    Right on time!

  • @EverythingGwenny
    @EverythingGwenny 3 роки тому

    Thank you for this video. I just started coding HTML and CSS and has to download VS Code and was overwhelmed. Hopefully, this helps a bit! Now to find a tutorial lol.

  • @FunctionGermany
    @FunctionGermany 3 роки тому

    Error Lens is the best extension

  • @cospettobaldinelli134
    @cospettobaldinelli134 2 роки тому

    If you format on save an ejs, it adds spaces that break the code.

  • @StephenRayner
    @StephenRayner 3 роки тому

    This video was in the tabs9 news letter, keep up the good work mate. Not that I like getting news letters fucking spam...

  • @thetowerfantasymusic
    @thetowerfantasymusic 3 роки тому

    I have a question that i cant find anywhere. How do I do a console.log shortcut (clg) ?

  • @ChandanSomani
    @ChandanSomani Рік тому

    Hey Kayle i m getting little consfused about to use plugin of Prettier ( the one for the PHP) can you please guide on that

  • @keithprice7119
    @keithprice7119 3 роки тому +1

    Do you recommend autocomplete for someone who is learning to code? I have avoided installing tab-nine because I am worried that it will do too much of the work for me and I won't learn as much.

  • @Shulkerkiste
    @Shulkerkiste 3 роки тому +1

    I love WebStorm or PhpStorm from JetBrains :)

  • @honourinabsentia7984
    @honourinabsentia7984 2 роки тому

    Hi quick question what notebook would handle visual code with all these extensions? And another quick question what computer setup would handle this ? , how heavy is this personalized visual code in the end?

  • @ikazak
    @ikazak 3 роки тому

    Thanks for the video!

  • @sahilaujla
    @sahilaujla 3 роки тому +1

    wow!! first time i am so early

  • @stevenleonmusic
    @stevenleonmusic 3 роки тому +4

    Tabnine is awesome in terms of what it offers but the pricing model is hilariously ridiculous. The free version has a daily auto-complete limit? The cheapest plan is an annual $144 subscription? Yeah I'd like to see some actual studies that show it paying for itself in terms of productivity. For $12 a month PER USER you could buy your employees a Netflix subscription so they can relax after work and not be so burnt out they can't complete their own code.

  • @swastiksonkusare5372
    @swastiksonkusare5372 3 роки тому +1

    Hey Kyle, what's your opinion about Webstorm? My colleague told me to use it instead of VS Code.

    • @adivmt
      @adivmt 3 роки тому +1

      Web Strom is dedicated IDE , and vscode is code editor , try webstrom may be you like it

  • @pouriyanourouznejad7090
    @pouriyanourouznejad7090 3 роки тому

    2 quick questions:
    1) what is ur favorite theme in vscode?
    2) is there another extention like "html css support" but in reverse mode? (I mean I wanna set class or id in html file first, and then I wanna use them in css file with getting autocomplete of class names and id names from html file!)
    * in Adobe Dreamweaver it is possible. What about vscode??? *

    • @eliasb6244
      @eliasb6244 3 роки тому

      I know that the question wasn’t addressed to me, but I will try to help you out.
      Monokai + Material Icon Theme + Fira Code + Font Ligatures = 😍
      Checkout:
      - VS HTML to CSS
      - CSS Navigation
      - CSS Peak
      - IntelliSense for CSS class names in HTML
      hope this helps you, best of luck.

    • @pouriyanourouznejad7090
      @pouriyanourouznejad7090 3 роки тому

      @@eliasb6244 hey dear Elias,
      Nice name 😉
      I will try those extentions.
      Thanks 💜

  • @hayyanzafar3502
    @hayyanzafar3502 2 роки тому

    how do I change and update something in settings.json when it's read only editor? Had tried some methods and made VSCode run as an administrator as well but it didn't work

  • @JD-kf2ki
    @JD-kf2ki 3 роки тому

    Wait, you use bash instead of zsh?

  • @IAmSamuelCharpentier
    @IAmSamuelCharpentier 3 роки тому

    Do you know JetBrains Mono?

  • @chiessijlb
    @chiessijlb 3 роки тому

    Hi Kyle, maybe you can help me on this matter. I need to know how much time I spent in each file of a considered workspace, I mean, I just need to know the time I spent to wuite a certain file (.html, .js, .css, etc.), so, at the end, I have a notion of the total time I needed to develop an entire project. I looked on VSCode extensions, but I don't know if I'm looking it correctly. I also made a search on internet, but I found very complex extensions, but they don't make that kind of register. Thanks a lot!

  • @zeroxiph
    @zeroxiph 2 роки тому

    What code do you use for the custom css and js extension? I want big files like you.

  • @Ahmet-nd5ct
    @Ahmet-nd5ct 2 роки тому

    hi, what font size do you use while coding (when you use desktop)?

  • @pratikthorat3480
    @pratikthorat3480 3 роки тому +1

    amazing video thank you kyle. How about this video: How do I setup my hair"

  • @lapp3351
    @lapp3351 2 роки тому

    Hi Kyle, just curious… is there an effective drag and drop wysiwyg extension in vscode?

  • @dhawwal
    @dhawwal 3 роки тому

    I use _rouge_ theme. It took me hell lot of time to find me a theme that I liked finally.

  • @allengepulla
    @allengepulla 3 роки тому

    Are you not using Better Components (by Aaron Bond)?

  • @jean-baptisteblanc6070
    @jean-baptisteblanc6070 3 роки тому

    Hi, thanks for your valuable videos.
    I can't figure out how to configure VSCode to run standalone js file and get results in the embedded console as you do in your videos.
    Thanks to light my candel.

  • @ms.t9522
    @ms.t9522 3 роки тому

    Can you do a video on how to organize your files for a new web project.

  • @levatruskavec2199
    @levatruskavec2199 3 роки тому +1

    Спасибо Кук, полезное видео )

  • @ashishbhardwaj9760
    @ashishbhardwaj9760 3 роки тому

    Prettier is not working in the Laravel framework. Any code formatter to format controller and models,resource file in laravel ?
    Pls suggest

  • @abhinavsinghal314
    @abhinavsinghal314 3 роки тому

    Pro tip: Tabnine requires you to pay for full access but the 'Kite' extension is similar to Tabnine, just free

  • @nomorecensorship2815
    @nomorecensorship2815 3 роки тому

    I have a question about VS code. I have an .ejs file where over half of the code changed from working code nice and neat, to a ton of diamonds and circles with "?" and couple other characters. The code still works but I can't edit anything... is there a way to fix this, or should I just start a new folder and clone from github?
    I had to take my hard drive out of my laptop and boot from USB (internal ssd connection failed), laptop works again.

  • @ChungKang
    @ChungKang 3 роки тому

    can't wait to see pizza! =D

  • @ppsasi8928
    @ppsasi8928 3 роки тому

    why did u stick with window at this stage ???

  • @meaningmean
    @meaningmean 3 роки тому

    Nord theme is beautiful

  • @hankim1083
    @hankim1083 3 роки тому

    Hey Kyle, how are you using windows for coding? I tried but WSL was such a pain for me.

  • @danomic5141
    @danomic5141 3 роки тому

    i have a problem, maybe you can help me out: i have two divs next to each other, inside another div. i want the left div to grow with its content and the right div to grow (and shrink) with the left. if you have an answer please, i have lost sleep over this

    • @danomic5141
      @danomic5141 3 роки тому

      i forgot to specify its about their height not their width. to give some context: i have a texteditor and a list of items next to the editor that i can dragDrop into the editor. i want the editor to grow with the input and the list to always match the editors height

  • @suzanm1751
    @suzanm1751 3 роки тому

    Where is the settings.json file? I don't see it

  • @bhumit070
    @bhumit070 3 роки тому

    Hey kyle i suggest to use thunderbird client for rest API just give it a try 😅

  • @paolo.iulita
    @paolo.iulita 3 роки тому +1

    Contrary to most people, I like my editor with as little extensions as possible. A simple webserver, git, terminal and so on have nothing in common with a text editor. Different is for the various syntax highlithers and/or autocomplete, but this trend of supercharding the editor with things that we have already excellent programs to use... well I don't get it

  • @dozorengel
    @dozorengel 3 роки тому

    Look for a Thunder Client extension instead of Rest API, they are the same but thunder has GUI, more like a postman

  • @zaludaoldrich
    @zaludaoldrich 3 роки тому

    Do you have a good tip for any FTP based plugin for editing on live sites? This only feature is what i am missing on VSC. I have tried many ot them. All user unfriendly.

  • @lawaver
    @lawaver 3 роки тому

    Hi Kyle, many thanks for this tutorial. I only wish that you had included how to get php to work on VS code. I have tried everything and when I run the php code I get the following error:
    'php' is not recognized as an internal or external command,
    operable program or batch file.
    I have added "php.validate.executablePath": "C:/php/php.exe" to settings json but the error still is there. Others mention paths with an xampp directory which is not on my windows 10 machine. I am at a loss??
    I have to say that you CSS videos are really helping my website development skills, especially your cheat sheets. Thank you....

  • @chris_ea
    @chris_ea 3 роки тому

    thanks, please make a video about a safe FTP module to remote edit your files. Some plugins are dangerous and do not sync correctly

  • @johncerpa3782
    @johncerpa3782 3 роки тому

    Why does a font confuse people?

  • @大天使-q6f
    @大天使-q6f 2 роки тому

    Could you please give a tutorial on HOW TO download html template from Themeforest, how to edit it in Visual Studio Code (which extensions are needed for that) and how to preview the website. I'm stuck and frustrated, please could you help me with this issue? Thank you in advance

  • @awesomefj
    @awesomefj 3 роки тому

    Could you please make a video about Linux, like should beginner Web Devs use it or not.

  • @tdzinkdroid
    @tdzinkdroid 3 роки тому

    Thanks! GitLens is pretty cool.

  • @cartman42069
    @cartman42069 3 роки тому

    i cant launch vscode via git bash anymore.. it says code: command not found. please help, anyone? thanks!!

  • @Ricardoromero4444
    @Ricardoromero4444 3 роки тому

    We use eslint-prettier and leave the extension off our IDEs.

  • @insanity0312
    @insanity0312 3 роки тому +1

    Guys, REST Client is great, but try Thunder Client instead ;)

  • @krajdon3918
    @krajdon3918 3 роки тому +3

    Nice video

    • @m3mory_leak344
      @m3mory_leak344 3 роки тому +1

      You didn't even watch it

    • @notnotnotyou
      @notnotnotyou 3 роки тому +1

      @@m3mory_leak344 It says it was commented 4 days ago for me

    • @krajdon3918
      @krajdon3918 3 роки тому +1

      @@m3mory_leak344 I did

    • @krajdon3918
      @krajdon3918 3 роки тому +1

      I FOUND THE VIDEO IN WDS PLAYLISTS AND IT WAS NOT PUBLIC IT WAS ACCESSIBLE THROUGH LINK OR THAT PLAYLIST

    • @deansprivatearchive
      @deansprivatearchive 3 роки тому +1

      Bug?

  • @anthonypetruzzi158
    @anthonypetruzzi158 3 роки тому

    Look at Thunder Client as a Postman/Insomnia replacement

  • @DesertEagleNV
    @DesertEagleNV 3 роки тому

    There's one thing you forgot, Kyle. Vim for VS Code

  • @29kangka
    @29kangka 3 роки тому

    I feel bracket pair colorizer is very underrated

  • @rendoesmath
    @rendoesmath 3 роки тому

    Im gonna eat after watching This

  • @evleen13
    @evleen13 3 роки тому

    VS Code Intellisense doesn't work on windows most of the time. It's frustrating 🥺

  • @numerobis3949
    @numerobis3949 3 роки тому

    the AI autocomplete is awesome, it starts guessing real credit card credentials which translates in free money forever.

  • @bennybrouwer
    @bennybrouwer 3 роки тому

    Now that everything has been said about your hair and it is hard to find comments on serious programming issues - let me add another question: The guitar in the corner - - can't you make your own intro-tune ? And play it live of course :)

  • @simpingsyndrome
    @simpingsyndrome 3 роки тому

    Code Spell Check is sucks the extension made me confuse beacause they return every words that in my code as an false thing, AKA the extension doesn't realy understand which one a real statements and just a words

  • @alegiusti7989
    @alegiusti7989 3 роки тому

    Another video of setting up vscode.
    me: why not watch it