How to configure Magento 2 coding standards in visual studio code?

In this blog post, we will see how to configure Magento 2 coding standards in VS Code.

Maintaining coding standards is crucial for Magento 2 developers to create clean, maintainable, and high-quality code. By configuring coding standards in your preferred development environment, like VS Code, you can automate code formatting and ensure consistency across your projects. This will help you enhance your development workflow and ensure compliance with the Magento community’s guidelines.

Developers should consistently use PHP_CodeSniffer to enhance the readability of the code and ensure that it meets the Magento Coding Standard. PHP_CodeSniffer is the most popular tool in use throughout the PHP development community. It provides the mechanism for checking code compliance with specific coding standards.

Magento uses its own code standard, which you can find on git:

https://github.com/magento/magento-coding-standard

The set of rules is located in ruleset.xml the file of the Magento Coding Standard.

So, Let’s start with configuring Magento 2 coding standards with our VS Code.

Step 1: PHPCS Plugin Installation

1. Open Visual Studio Code.
2. Press Ctrl+Shift+X to open the Extensions Menu.
3. Search for PHPCS in the search bar and install “phpcs” extension provided by “shevaua”

4. Click on the install button and restart VS code when prompted.

Step 2: Installing Magento 2 Coding Standards

The best way to use Magento coding standards is to setup it up globally using Composer.

• You can install it using the below command.

composer create-project magento/magento-coding-standard --stability=dev magento-coding-standard

• To verify the installation run the below command.

php vendor/bin/phpcs -i

• Once installed, you can run phpcs from the command line to analyze your code

php vendor/bin/phpcs --standard=Magento2 app/code/VendorName/ModuleName

Step 3: Configure VS code for Magento 2 Standards

We are now done with the installation of Magento 2 coding standards.

Let’s start configuring and using it with our visual studio code.

1) Press CTRL + SHIFT + P and search for “Open User Settings (JSON)” and hit enter.

2) It will load VS code settings in JSON format.

3) Insert the below line and specify the path for your coding standard path and ruleset file.

"phpcs.executablePath": "Path-To-InstallationDir/vendor/bin/phpcs",
"phpcs.standard": "Path-To-InstallationDir/Magento2/ruleset.xml"

For example, in my case it will be like this :

"phpcs.executablePath": "/home/jigar_karangiya/htdocs/magento-coding-standard/vendor/bin/phpcs",
"phpcs.standard": "/home/jigar_karangiya/htdocs/magento-coding-standard/Magento2/ruleset.xml",

4) Save it and restart your VS Code.

5) Now open any Magento 2 project file which you are working on. It will show suggestions and warnings as below with an underline.

You may also like :

How to Get a list of all observers of specific events in Magento 2

Get Company Admin using company ID programmatically Magento 2 B2B

That’s it. Happy Coding !!