Drupal- Tools and modules used to implement Drupal coding standards
Here we are discussing how to maintain high standard Drupal coding standards in Drupal code base Including Java script , twig and CSS files.
Coding Standard
We follow coding standards to ensure consistency and readability in our code. This makes collaboration easier and helps maintain a uniform style across projects. Coding standards also reduce errors, making the code more reliable and efficient. Ultimately, they improve maintainability and allow future developers to easily understand and update the code.
Drupal Coding Standard
Drupal has specific coding standards to ensure consistency in code across the community. These standards make code easier to read, maintain, and review. They also help improve security by guiding developers to write secure and reliable code. Following the standards ensures compatibility with Drupal core and third-party modules.
We will be configuring the tools below to be compatible with Drupal coding standards.
PHP Code sniffer (PHPCS) – Detects violation of coding standards. A tool that checks PHP, JavaScript, and CSS code for violations of defined coding standards.
PHP Code beautifier and fixer (PHPCBF) – Automatically detects and fixes most of the coding standards issues.is a complementary tool that automatically fixes coding standard violations detected by PHPCS.
PHP Code Sniffer (PHPCS) is a tool that checks PHP, JavaScript, and CSS code for violations of defined coding standards. It helps identify issues like improper formatting, missing or wrong indentation, and other violations of best practices. PHPCS can enforce specific coding standards, such as the Drupal or PSR standards, and ensures the code is consistent and clean.
How to configure PHPCS for supporting Drupal coding standard
PHP Code Sniffer (PHPCS) for Drupal is a tool used to check PHP, JavaScript, and CSS code against the Drupal coding standards. It ensures that your code adheres to Drupal-specific guidelines, helping maintain consistency, readability, and compliance across all modules and themes. PHPCS detects issues like improper formatting, incorrect indentation, and other violations of Drupal’s best practices.
PHP Code Beautifier and Fixer (PHPCBF) is used alongside PHPCS to automatically fix Drupal coding standard violations. It saves time by adjusting code formatting—such as indentation, spacing, and line breaks—to align with Drupal’s standards, ensuring cleaner, standardized code without manual intervention.
In order to install and use the above tools, install the Coder contributed module.
https://www.drupal.org/project/coder
composer require ‘drupal/coder:^8.3’
This actually not a module, this will place required files for PHBCF & PHPCS in vendor directory.
During installation you can see code sniffer and coding standards libraries getting installed. You can verify this in your project vendor/bin directory.
Check PHP code standard using command as below.
./vendor/bin/phpcs web/modules/custom_form1
Here we have to check drupal coding standard, so change command as below.
./vendor/bin/phpcs --standard=Drupal,DrupalPractice web/modules/my_custom_module/
You can see coding issues.
You can execute commands for each file which will show the coding standard errors and warnings for that specific file.
./vendor/bin/phpcs --standard=Drupal,DrupalPractice web/modules/custom/custom_form1/src/Form/form2.php
We could see below 222 errors and 37 warnings on this file.
Now we are going to execute phpcbf command to resolve these issues.
./vendor/bin/phpcbf --standard=Drupal,DrupalPractice web/modules/custom/custom_form1/src/Form/form2.php
After executing this command you can see all 232 issues fixed and remaining 24, result will be shown as below.
Now you can test again using phpcs to see those are fixed or not. Execute below command again.
./vendor/bin/phpcs --standard=Drupal,DrupalPractice web/modules/custom/custom_form1/src/Form/form2.php
Now you can see errors reduced to 6.
Now we can go line by line and easily fix it.
Also you can pass below extensions and ignore parameters.
./vendor/bin/phpcbf --standard=Drupal,DrupalPractice --extensions=php,module,inc,install,test,profile,theme,css,info,txt,md,yml --ignore=node_modules,bower_components,vendor web/modules/custom
Extension parameter checks coding standard in mentioned file extensions and ignore parameter can be used to ignore directories within custom modules.
Optional Configuration using phpcs.xml
In order to make easier execution of phpcs command we can create a phpcs.xml file where we can configure what files and directories we have to include for code quality check.
Place below phpcs.xml file in project folder.
<?xml version="1.0"?>
<ruleset name="Project coding standards">
<!-- Combine these rulesets. -->
<rule ref="Drupal"/>
<rule ref="DrupalPractice"/>
<!-- If no paths are specified check these ones. -->
<file>./web/modules/custom</file>
<file>./web/themes/my_custom_theme/</file>
<!-- Ignore any files in these paths. -->
<exclude-pattern>*/.git/*</exclude-pattern>
<exclude-pattern>*/config/*</exclude-pattern>
<exclude-pattern>*/css/*</exclude-pattern>
<exclude-pattern>*/vendor/*</exclude-pattern>
<exclude-pattern>*/node_modules/*</exclude-pattern>
<arg name="extensions" value="php,module,inc,install,test,profile,theme,css,info" />
<!-- Depending on your project, you may need to ignore specific rules until
they can be fixed one at a time. Here is an example of how to ignore a
specific rule. -->
<!-- Class name must be prefixed with the module name. -->
<!--
<rule ref="DrupalPractice.General.ClassName.ClassPrefix">
<severity>0</severity>
</rule>
-->
</ruleset>
Now you can run below command without any additional parameters.
./vendor/bin/phpcs
You can refer to the details about this file.
https://github.com/squizlabs/PHP_CodeSniffer/blob/master/phpcs.xml.dist
Adding Twig coding standard checks to your Drupal project
We can use below twigcs for resolving twig coding standard issues.
You can refer below page about this library.
https://github.com/friendsoftwig/twigcs
Execute this command to install twigcs.
composer require --dev friendsoftwig/twigcs
Execute below command to find code syntax issues in twig files.
./vendor/bin/twigcs web/modules/custom/custom_form1/src/templates/
Manually fix the spacing issues in twig file.
Java script Coding standard check using ESLint
For Every drupal projects javascripts & java script libraries are part of it. We can use ESLint to make sure our custom Java script and Jquery code is consistent and free from syntax error and leaking variables.
By default Drupal comes with ESLint configurations, you can see below files in your Drupal project root directory.
.eslintrc.json
.eslintignore – ignore folders from code standard check.
Above files having global configurations, in your custom module you can create above configuration files and add your own configurations.
Contributed modules also have their own configurations.
For example in google analytics you can see eslintrc.json with below configuration in the root directory.
{
“globals”: {
“gtag”: true
}
}
So above code gtag from a third party allowed across the js files.
When ESLint runs, all configuration files are merged together and used as a single configuration.
Next we are using the ESLint command to check code.
Make sure you have installed node.js, npm, and npx
Execute below commands.
npm install eslint eslint-config-airbnb eslint-plugin-yml --save-dev
npm i eslint-config-drupal
npx eslint modules/custom/
npx eslint themes/custom/
Here in my code, I have executed on my custom module JS.
npx eslint web/modules/custom/custom_form1/js/
Here is the result shown.
You can go through the code and fix it.
Always refer best practices and coding standards in drupal.org
https://www.drupal.org/docs/develop/standards/javascript/javascript-best-practices
Coding standard check and fix using Stylelint for CSS
In order to follow Drupal CSS coding standard, use csscombx.
https://www.npmjs.com/package/csscombx
Execute below command as a root user.
sudo npm install csscombx --global
Execute below command on css directory
csscombx -v your_style_directory/
Here we are executing below command on below file which is having some unwanted white spaces
csscombx -v web/modules/custom/custom_form1/css/
After executing command you can see below message as all coding standard errors fixed.
After executing above command you can see all issues fixed.
Conclusion
Always follow best practices mentioned in drupal.org coding standards.
https://www.drupal.org/docs/develop/standards/
Use tools mentioned in this article to automate and speed up resolving coding syntax issues.
