{"id":4180,"date":"2022-02-03T10:33:15","date_gmt":"2022-02-03T10:33:15","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=4180"},"modified":"2025-04-09T22:36:29","modified_gmt":"2025-04-09T21:36:29","slug":"setting-up-vs-code-for-web-development","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/ides\/vs-code\/setting-up-vs-code-for-web-development","title":{"rendered":".1 Set up VS Code for web development"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-visual-studio-code-for-php-projects\" target=\"_blank\" rel=\"noreferrer noopener\">How To Set Up Visual Studio Code (VS Code) for PHP Development | DigitalOcean<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">VS Code Options<\/h4>\n\n\n\n<p>Our general settings for VS Code \u2013&nbsp;<a href=\"https:\/\/ibex.tech\/programming\/visual-studio-code-vs-code\/making-vs-code-work-the-way-we-like\" target=\"_blank\" rel=\"noreferrer noopener\">see here<\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Web development specific settings<\/h5>\n\n\n\n<p>Use CTRL+SHIFT+P and then enter \u201cOpen User Settings (JSON)\u201d to open the raw json file. Check it has the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\"&#91;php]\": {\n\t\t\"editor.insertSpaces\": true,\n\t\t\"editor.tabSize\": 2\n\t},\n\t\"&#91;css]\": {\n\t\t\"editor.insertSpaces\": true,\n\t\t\"editor.tabSize\": 2  \n\t},\n\t\"&#91;javascript]\": {\n\t\t\"editor.insertSpaces\": true,\n\t\t\"editor.tabSize\": 2  \n\t},<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Extensions<\/h4>\n\n\n<p>PHP Intelephense by Ben Mewburn<\/p>\n<p style=\"padding-left: 40px;\">Adds PHP auto completions etc.<\/p>\n<p>WordPress Hooks IntelliSense<\/p>\n<p style=\"padding-left: 40px;\">WordPress specific autocomplete etc<\/p>\n<p>PHP Debug<\/p>\n<p style=\"padding-left: 40px;\">Makes it easy to use the <a href=\"https:\/\/xdebug.org\/\" target=\"_blank\" rel=\"noopener\">xDebug<\/a> tool for breakpointing and stepping through PHP code.<\/p>\n<p>SFTP by Natizyskunk<\/p>\n<p style=\"padding-left: 40px;\">FTP\/SFTP access. (PRO Developer also looks good for this?)<\/p>\n\n\n<h4 class=\"wp-block-heading\">WordPress specific settings<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Adding WordPress functions so PHP linting doesn&#8217;t mark them as errors<\/h5>\n\n\n\n<p>Press (Ctrl+Shift+X) for the extensions and search for PHP Intelephense.<\/p>\n\n\n\n<p>Click the settings icon of the extension and choose Extension Settings.<\/p>\n\n\n\n<p>Scroll down to the bottom to see the list of Stubs.<\/p>\n\n\n\n<p>Click on Add Item and choose wordpress from the list.<\/p>\n\n\n\n<p>This will solve the issue with built-in WordPress Functions, but it will not recognize any functions from installed plugins and themes of course.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Workspaces<\/h4>\n\n\n\n<p>VS Code Workspaces are really good for web dev work, as a way to create a kind of container for the project you are working on that can have its own settings and be opened again the same in the future.<\/p>\n\n\n\n<p><a href=\"https:\/\/ibex.tech\/programming\/visual-studio-code-vs-code\/workspaces\" target=\"_blank\" rel=\"noreferrer noopener\">See here<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Set Up Visual Studio Code (VS Code) for PHP Development | DigitalOcean VS Code Options Our general settings for VS Code \u2013&nbsp;see here Web development specific settings Use CTRL+SHIFT+P and then enter \u201cOpen User Settings (JSON)\u201d to open the raw json file. Check it has the following: Extensions PHP Intelephense by Ben Mewburn [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[331],"tags":[],"class_list":["post-4180","post","type-post","status-publish","format-standard","hentry","category-vs-code"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=4180"}],"version-history":[{"count":19,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4180\/revisions"}],"predecessor-version":[{"id":4862,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4180\/revisions\/4862"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=4180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=4180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=4180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}