Setting up IDE (VSCode) and extensions for Magento Development

1. IDE and Toolset
Abid H. Malik

2. Tools for (Magento) Programmers
● Text editor / IDE
● Browser
● Database Tools
● Code Review Tools
● Code Formatting Tools
● Linters
● Debugging Tools

3. Importance of Tools
● Makes work easy.
● Minimize Errors.
● Increases productivity.
● Makes Code Standards Adherence easily possible.
● Helps in identifying potential Problems (a.k.a. Code Smells) at early stages.
● Helps to write optimized and secure code.
● Helps in troubleshooting the code.

4. Editor vs IDE
● An integrated development environment or IDE helps to develop the
production, arrangement, and troubleshooting of code in a centralized place.
● A code editor on the other hand is a text editor that lets developers write and
modify the code.
● It only helps to write codes and does not function to assist these codes
further.
● Code editors could be in the form of an individual application or they could
be incorporated in the IDE or relevant browser.

5. Top IDEs for Magento Developers
● PHPStorm
● VSCode
● NetBeans
● Eclipse
● ….etc.

6. PHPStorm
● PHPStorm is the most popular IDE for Magento.
● It comes equipped to configure the code editing in Magento.
● Core features of this tool include:
○ immediate error recognition,
○ highlighting problems,
○ comprehensive codes,
○ autocomplete, and
○ adapting well to the code formatting.
● Key Features
○ Quick to Operate
○ No or very little slowdown
○ Easy to deploy remotely
○ Supports major frameworks
○ Allows testing, profiling, and debugging of external apps
○ Needs very little configuration
● No configurations needed. Ready to use.
● Paid - incl. VAT US $234.82 (~17,500 INR)

7. Visual Studio Code
● Almost all features of PHPStorm + Free (aur kya chahiye?????)
● Syntax highlighting / Autocomplete / IntelliSense.
● Debug code right from the editor.
● Git commands built-in.
● Extensible and customizable.
● Cross platform.

8. VS Code - User Interface

9. Important VS Code Extensions
➔ Code Sniffer and Beautifier
◆ Mandatory
◆ Checks for coding standards
◆ The codesniffer that Magento uses is Sqiz Lab’s code sniffer.
◆ Magento uses its own code standard -
https://github.com/magento/magento-coding-standard
◆ https://marketplace.visualstudio.com/items?itemName=ValeryanM.vscode-phpsab
➔ PHP Mess Detector
◆ Mandatory
◆ VS Code extension for php, using phpmd.
◆ https://marketplace.visualstudio.com/items?itemName=linyang95.phpmd

10. Important VS Code Extensions
➔ PHP Doc Blocker
◆ Mandatory
◆ A simple, dependency free PHP specific DocBlocking package.
◆ https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker
➔ PHP Debug
◆ Mandatory
◆ Debug support for PHP with Xdebug (...more about this later)
◆ https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug
➔ PHP Intelephense
◆ PHP code intelligence for Visual Studio Code
◆ https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-cli
ent

11. Important VS Code Extensions
➔ AutoMageDev - Advanced Magento 2 AutoSuggestion
◆ AutoSuggests a list of Magento's core class namespaces.
◆ AutoSuggests a list of class functions whose object is injected in constructor.
◆ Boilerplates available for basic xml and php functionalities, can be invoked by using prefix
'!wk'.
◆ One can create basic module files (module.xml and registration.php), helper, controller,
shipping method and payment method files using command palette.
◆ One can also update the namespaces for newly created files.
◆ Event name will show in suggestion in events.xml file.
◆ Table, columns and constraints will be autocompleted in db_schema.xml
◆ Groups, sections, fields, validations, etc., will be autosuggested in system.xml.
◆ Tags (like block, referenceBlock, containers, arguments, action, etc.) will be autosuggested
and basic functionalities (like Template Overriding) will be autocompleted in layout files.
◆ https://marketplace.visualstudio.com/items?itemName=Webkul.automagedev

12. Important VS Code Extensions
➔ Thunder Client
◆ Lightweight Rest API Client Extension
◆ Simple and clean design.
◆ No need to have POSTMAN.
◆ https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

13. Database Tools
★ VSCode Extensions
○ SQLTools MySQL/MariaDB
○ MySQL Syntax
○ MySQL Autocomplete
★ Standalone Tools
○ DBEaver
■ DBeaver is free and open source universal database tool for developers and database
administrators.
■ https://dbeaver.io/download/
○ Mysql Workbench
■ MySQL Workbench is a unified visual tool for database architects, developers, and
DBAs.
■ https://www.mysql.com/products/workbench/

14. Useful Links
❖ https://code.visualstudio.com/download
❖ https://github.com/magento/magento-coding-standard
❖ https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
❖ https://marketplace.visualstudio.com/items?itemName=ValeryanM.vscode-phpsab
❖ https://marketplace.visualstudio.com/items?itemName=linyang95.phpmd
❖ https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker
❖ https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug
❖ https://marketplace.visualstudio.com/items?itemName=Webkul.automagedev
❖ https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client
❖ https://dbeaver.io/download/
❖ https://www.mysql.com/products/workbench/

15. Thank you
Abid H. Malik