Setting up Visual Studio code (VS Code) for WordPress Development

In this video, I share with you Setting up VS code for WordPress Development. I share the setup with minimal configurations. This has helped me to increase my productivity as a WordPress developer of themes and plugins over time.
What extensions do you think I need? Let me know in the comments.
VIDEO CHAPTERS
00:00 Getting Visual Studio Code
00:42 Downloading the right version for you
01:27 Bracket Pair Colorizer
02:31 ClassicPress snippets and autocompletions
03:42 Theming with Cobalt2
04:57 Hide the minimap in vs code
05:12 Change settings in vs code
05:32 Change font size settings
05:43 Change font size in settings.json
05:43 Change font Line height
06:27 Change the font
07:09 PHP code Sniffing with Intellisense
07:57 Documenting with Docblocker
09:31 Woocommerce snippets & autocomplete
11:08 PHP code Sniffing with Intellephense
12:25 PHP Debug and Coding Standards.
13:09 Using Font Ligatures with Fira Code
14:35 Extensions for ACF and Elementor
14:58 Adding Sublime text key map bindings in Vs code
16:02 Conclusion
HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
- Buy me a coffee through www.buymeacoffee.com/techiepress
- Give via PayPal: paypal.me/laurencebahiirwa
- Buy Scalable WordPress Hosting -----omukiguy.com/kinsta
- Buy Low cost Hosting ----------------------omukiguy.com/bluehost
- Build no code website with Elementor -- omukiguy.com/elementor
- Enhance Elementor with Crocoblock --- omukiguy.com/crocoblock
- Automate API Requests & Webhooks -- omukiguy.com/integromat
- Screen Record with your computer ----- omukiguy.com/screenflow
- Make Awesome forms with WPForms ----- omukiguy.com/wpforms
- Build Advanced with Gravity Forms --- omukiguy.com/gravityforms
I am social too:
Facebook: web. TechiePress-100149655032583/
Twitter: omukiguy
Blog & Newsletter: omukiguy.com
Github: github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------
Learn how to build a plugin from scratch: kzbin.info/www/bejne/b33XiXiDh7OfpJo
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - kzbin.info/aero/PLNqG1qGUllk2qFmbexV2SikF8bXqvDW-H
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
kzbin.info/aero/PLNqG1qGUllk0uFqUvFFIJ67dSNBKapd7Y
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - kzbin.info/aero/PLNqG1qGUllk27BK71LBJDw4auOl-aVOqG
== Build a custom Elementor Widget from Scratch - kzbin.info/aero/PLNqG1qGUllk2pukgHP385ll0ENmRr9E_M
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== kzbin.info/aero/PLNqG1qGUllk0lI2Omhvp54Qn9-MIEhQzX
WordPress Gutenberg blocks for Designers
== kzbin.info/aero/PLNqG1qGUllk3DY91Bq_26L8meIXM_Uo4E
Gutenberg WordPress Block Editor tutorials for beginners
== kzbin.info/aero/PLNqG1qGUllk2xOKt79aI12GgX2DX0aNx-
Custom WooCommerce Gateway Development from Scratch
== kzbin.info/aero/PLNqG1qGUllk21IES6ZJ2WkX1BcbPQF4-7
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== kzbin.info/aero/PLNqG1qGUllk0npc2ZGPU358Q6S1itFCYR
====== WordPress Plugin Development from Scratch ======
Build Most Popular & Most Commented Post Plugin
== kzbin.info/aero/PLNqG1qGUllk05gUz_VB5nCHEN9A3OpS94
Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== kzbin.info/aero/PLNqG1qGUllk0NSTrNF2xa1zHNzMi3M7su
WordPress External APIs Integration Plugin Development
== kzbin.info/aero/PLNqG1qGUllk0U2-5ZBNxSNxQrPO-4CqnR
Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - kzbin.info/aero/PLNqG1qGUllk3qMrJcXUeP1Ge5U4fKtAR
Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin
== kzbin.info/aero/PLNqG1qGUllk03llIgPYGVTwY14lAPDkBp
Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - kzbin.info/aero/PLNqG1qGUllk06KZP9N1nRG-FpnTr_TD9u
Custom Dashboard Widgets
== kzbin.info/aero/PLNqG1qGUllk2h51557gV74x8p1RrlEmah
Build Custom Admin
== kzbin.info/aero/PLNqG1qGUllk1M5L8Xo-K1g6B3OrkliKDs
Learn Git
== Git tutorial for writers + software developers for beginners - kzbin.info/aero/PLNqG1qGUllk2PnSJiUw1SCjiS6pNhIR2f

[@JonathanBaileyn2u]

I'd like to say.. your delivery and tone are easy on the ears and the mind, thank you so so much! I am minimizing my subscriptions to really gain more value, and you sir are just what I am searching for. Thank you so much for the tutorial.

[@martinvanstein.youtube]

Good video! ... would be great if you could show how you set it up with Wordpress ,but nonetheless great explanation!

[@StefanBrunotte]

Could you do a Video of how to actually access the wordpress site and how to set it up so that you can start editing the themes and pages. What I would like to see is how to access the actual wordpress site and how you work with it in VSC. How to load a project into VSC.

[@TechiePress]

Hey Stefan, this is in the pipeline long term as I do a fair bit of this in almost every video but please drop me an email from the channel about section. I can more specifics about the questions you have.

[@martinvanstein.youtube]

@@TechiePress I have the same question as Stefan ... could you post a link to one of the videos where you go through the process ? Ideally I would like to hook up to an online staging/development site (as I found that locally (WAMP etc) there are these differences )

[@deNysWebDesign]

@@TechiePress Hi.. im just starting out, i think i have the same question. Are there any resources you could point me to please? I have a site thats already built with elementor and i want to get that into vs.. where do i even start..

[@martinkaspar5095]

many thanks for this awesome video - keep up the awesome project

[@davisvilums]

Thank you, this was very usefull. Maybe you can make another video like this showing what's changed and what are your best practices.

[@dareadel]

This is an excellent tutorial. I wish I had this the first time I installed vs code. This tutorial opened my eyes to explore other extensions. What is your recommendations for json extension? I don’t have autocomplete for json in my vs code workplace.

[@TechiePress]

Any JavaScript intelliphense or intellisence extension might be helpful. I personally haven’t had need to do JSON autocomplete

[@MumBorne]

That was Smooth..!

[@SanjeevSinghYT]

I was looking for something similar. I'm structuring my wp theme like sass files, js, includdables etc. Nice one...

[@TechiePress]

Do you use typescript as well? Or is it something new to you?

[@SanjeevSinghYT]

@@TechiePress I'm little familiar with typescript but mostly use vanilla javascript or jQuery in wp-themes.

[@ronbpalmer9389]

Yes please. I'm looking for the basics of wordpress in vscode. It looks like you installed wordpress to your project folder. Is that how you get all the wordpress functions to be regognized? I have installed XAMPP but I don't see how to integrate it with vscode the way I seem in many videos. Thanks.

[@TechiePress]

Hey Ron, I drag and drop the WordPress folder from my local server in your case would be Xampp. However, the code hints come from the WordPress extensions I have installed marketplace.visualstudio.com/items?itemName=laurencebahiirwa.classicpress-snippets I hope that helps

[@Junaid5ii]

👏, thank so much for such a useful extenions video

[@NOALNOM]

This is awesome! Can you tell how to sync and edit a live version site in VS Code with live server extension? It's that possible? Thanks! great channel!!!

[@TechiePress]

The live server extension doesn't support that currently. But you can use Github actions to deliver your site via a pipeline whenever you commit to your repo.

[@GrantAmbrose]

Very helpful - thanks!. Do you have a video on your workflow? right now I am in FileZilla editing files and then reuploading after every save. There must be a better way?

[@TechiePress]

There is a video upcoming about how I use GitHub and it’s actions to version control and also deploy to live server.

[@emidiobattipaglia]

Great job

[@nicolasmenescardi4077]

This is gold. Thanks!

[@RaabStephan]

How do I download the files from wordpress so I can edit them in VScode and then also upload the new changes back to WP?

[@michaelwagener1411]

Great video - thanks :-)

[@wptalkswitharif]

Thanks a lot

[@amrmax5405]

Thank you for the video, is helped me a lot.

[@Brivanni]

Hellp,how dp you access the wordpress download files to install on vs code😢

[@kberwager]

Is there any plugin for VS that allows you to code visually? I’m a designer and I’ve used multiple page builders for Wordpress and I have to say I’m tired of them all. I want to figure out a way to build visually but not have limitations

[@TechiePress]

Unfortunately, I haven’t encountered one for VS Code. But why not use the in built WordPress block editor to build your pages?

[@kberwager]

@@TechiePress ok thanks, because it’s clunky and offers very little customization. I do not like the way columns work and it’s really a designers nightmare, someone who is a blogger that doesn’t need full designer features would be fine but the WP block editor gets a C- in my opinion.

[@TechiePress]

How about using a time tested tool like elementor or beaver builder in WordPress?

[@kberwager]

@@TechiePress I've been using Thrive Themes (Thrive Architect and Thrive Theme Builder) and it has been serving me well except the last year their product is falling behind and becoming super glitchy. Elementor IDE looks very similar so that might be the next move I make. Although I really enjoy WebFlow but it's integration with Wordpress is lacking.

[@lucianowebdev8686]

that's awesome. helped me a lot! thank you!!! one question, do you work with Twig and Timber in WP?

[@TechiePress]

Unfortunately, I don’t. I have seen it in passing but never really dived in.

[@PreparelikeJoseph]

phpcs just throws errors when installed phpcs: Request workspace/configuration failed with message: Unable to locate phpcs. Please add phpcs to your global path or use composer dependency manager to install it in your project locally.

[@TechiePress]

Yah, php a requires much more. You can set it up per project like Tom shares here tommcfarlin.com/php-codesniffer-per-project/

[@diacono2289]

buen video gracias

[@vahidehbagheri2319]

nice

[@martez_da_real]

I'm developing for wordpress, I didn't even know you could create widgets for elementor

[@TechiePress]

YES!! I personally think the best feature about WordPress or any software is the hooks system. Enabling others to tap in and make an extension. Elementor and other major plugins utilize this making it possible to create your own instances of their product. It makes an efficient ecosystem and money around the product.

[@balintkalman9594]

Hi! How can i reach out to you about business requests? Thanks, Bálint!

[@denyspetrushkov5854]

I have errors after phpcs installing. VSCode reloading not hepled

[@TechiePress]

Setting up phpcs is a bit challenging and not only possible by adding the extension. Please follow this blog to complete this tommcfarlin.com/php-codesniffer-in-visual-studio-code/

[@cyrus01337]

Too much regarding theming, you can skip a lot of the styling fluff and get straight into what's necessary for development like the intellisense and maybe snippet plugins. Setting up a project while not entirely relevant to setup, would have been a better use of time in the video if you wanted to exceed 10m.

[@christian-reed]

Not really that good. It's just an opinion on what extensions to use not any instruction on how to develop with wordpress.

[@TechiePress]

You can check out the other videos on the Channel to see how to develop WordPress specific things. This video was to share what tools I use to set up VS code then develop. The channel has stuff to do with block development, API integrations and extension of WordPress functions.