Are you looking for good practices on TYPO3 code quality? Then, you are in the correct place. In this article, You will find helpful tips and tricks with TYPO3 code review tools and TYPO3 lint to achieve better TYPO3 code quality.
TYPO3 CMS is well known for its slogan - “The Quality CMS since 1999.” In other words, functional and technical quality is well-maintained since the starting of TYPO3. But, the question comes here: How do you develop and maintain code quality of your TYPO3 project? Are you following all TYPO3 code standards of PHP, JavaScript, YML, TypoScript, etc.?
Imagine a situation where, After years, you are maintaining one of your old TYPO3 projects, and you feel hard to understand your own written TYPO3 code - That’s quite sad. And another situation, In your running TYPO3 projects, your team colleagues complain about your poor TYPO3 code review to the technical head.
Let's make sure about your TYPO3 code quality by understanding the importance of TYPO3 code review and TYPO3 lints.
Why TYPO3 Code Quality Matters?
Here are the reasons why TYPO3 code review is essential;
- Easy to read, consistency — that it is so natural to peruse and comprehend segments of the code; this incorporates code clearness, effortlessness, and documentation.
- Consistency, reliability quality, and strength — programming conduct ought to be unsurprising and not inclined to misc hidden bugs.
- Maintenance and extensibility — fixing, refreshing, and improving programming ought to be as straightforward as could be expected under the circumstances, not inherently complex.
Manual vs Automatic TYPO3 Code Quality
Well, That’s easy to understand.
Manual TYO3 code review and code quality will need human resources where TYPO3 experts can manually review the TYPO3 code. I suggest, once you successfully pass automatic code review, you can give it to your Senior TYPO3 person to discuss the critical code stuff like logic, database queries, optimization of TYPO3 code, TYPO3 APIs, etc.
On the other hand, You should consider popular automatic code review tools like;
- SonarLint
- SonarQube/SonarCloud
- StyleCop
- ReSharper
OpenSource Sonar Universe: TYPO3 Code Review Tools
Meet sonar universe, one of the most popular automatic PHP code review tool.
For the TYPO3 community, for years, Marketing Factory guys provided SonarQube to review extensions from TYPO3 TER at https://ter-sonarqube.marketing-factory.de/projects (but sometimes it does not work).
Option #1 Self-Hosted OpenSource Version
SonarQube provides a Free community edition available to install and configure at your public/private TYPO3 projects. Explore https://www.sonarqube.org/
Option #2 Cloud-Based OpenSource Version
SonarCloud provides FREE cloud support for your OpenSource projects eg., Your TER extensions. https://sonarcloud.io/
Option #3 Cloud-Based Professional Version
SonarCloud also offers premium cloud-based professional services for your private TYPO3 projects.
Part #1 TYPO3 Code Quality with SonarCloud
In this article, I want to guide you SonarCloud, which is easy to start for your TYPO3 TER extensions.
Before starting, Let’s analyze TYPO3 core and some famous TYPO3 extensions which are already available on their platform.
Code Review of TYPO3 Core CMS
Go to https://sonarcloud.io/dashboard?id=typo3
You can analyze the whole report, of course, TYPO3 is 20+ years old CMS. That’s why I found many such issues due to old codes ;)
Code Quality of TYPO3 Extensions
Let’s take a look at any of the TYPO3 extensions from TER like the most popular EXT:typo3_console at https://sonarcloud.io/dashboard?id=typo3-console It’s been PASSED :)
How to code review TER TYPO3 extension?
Aha, Great! Are you excited to check the quality of your TYPO3 extension code? Let’s see!
Step 1. Login https://sonarcloud.io/sessions/new with your favorite Git tool.
Step 2. Let’s “Import projects from Git.”
Step 3. Choose either “All repositories” or “Only particular repositories”.
Step 4. Create an organization profile and choose the FREE version plan.
Step 5. Get started to review the code
Step 6. Hurray, Done!
Explore https://sonarcloud.io/dashboard?id=nitsan-technologies_ns_cookiebot If you find any issues, then explore and fix it :)
Step 7. Keep doing a test-drive!
Before publishing your TYPO3 extensions and projects, keep testing and fix. You can see an overview dashboard.
How SonarCloud TYPO3 Code Quality Rank Works?
You should learn the basic terminology of the TYPO3 code review as below.
Maintainability
Debt: The estimated time it will take to fix all Code Smells. Code Smells Code that is confusing and difficult to maintain.
Reliability
A coding error that will break your code and needs to be fixed immediately.
Quality Gate
It’s a set of measure-based Boolean conditions. It helps you know immediately whether your project is production-ready. If your current status is not Passed, you'll see which measures caused the problem and the values required to pass.
Security
Vulnerabilities: Code that can be exploited by hackers. Security Hotspots: Security-sensitive code that requires manual review to Assess whether or not a vulnerability exists.
Duplications
Same lines of code. The number of duplicated blocks of lines of code.
How can I configure custom rules?
You know the good thing is, You can create your custom rules, quality gate, etc. It means you can configure your custom code standards eg., for PHP PSR-2.
Go to Projects > Administration > Choose Your Language Settings.
Part #2 TYPO3 Code Lint
To save your productive time, It’s always good practice to check TYPO3 code with lints, Let’s learn how!
What’s TYPO3 Lints?
“Linting is the automated checking of your source code for programmatic and stylistic errors. It’s by using a lint tool (otherwise known as linter). A lint tool is a basic static code analyzer.”
// For example, a JavaScript linter would flag the first use of parseInt below as unsafe:
// without a radix argument - Unsafe
var count = parseInt(countString);
// with a radix parameter specified - Safe
var count = parseInt(countString, 10);
How TYPO3 Lint Tools Work?
Here’s how lint tools are typically fit into the development process.
- Write the code.
- Compile it.
- Analyse-it with the linter.
- Review the bugs identified by the tool.
- Make changes to the code to resolve the bugs.
- Link modules once the code is clean.
- Analyze them with the linter.
- Do manual code reviews.
Where to Implement TYPO3 Lint Tools?
TYPO3 developed with variance language and configuration; You should consider implementing the following for TYPO3 code lint.
Let me try to give a step-by-step guide to install each TYPO3 lint.
- PHP PSR Standards
- TypoScript
- Fluid Templates
- YAML Configuration
- XLIFF Localization
Notes: You can install and configure the following TYPO3 lints in three ways, 1. Install individual to your project, 2. Install globally, 2. Install at your CI/CD
PHP Lint
PHP_CodeSniffer is a set of two PHP scripts; the main phpcs script that tokenizes PHP, JavaScript, and CSS files to detect violations of a defined coding standard, and a second phpcbf script to automatically correct coding standard violations. PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent.
// Install popular PHP-Codesniffer
sudo apt install php-codesniffer
// Check individual file
phpcs --standard=PSR2 ext_localconf.php
// Check whole folder’s PHP files
phpcs --standard=PSR2 ./
// Options to ignore the warning, allow extensions, etc.
phpcs --standard=PSR2 --warning-severity=0 --extensions=php *
TypoScript Lint
This package contains a tool that can parse TYPO3's configuration language, "TypoScript", into a syntax tree, and perform static code analysis on the parsed code. TypoScript-lint can generate Checkstyle-compatible output and can be used in Continuous Integration environments.
// Install TypoScript lint
composer global require helmich/typo3-typoscript-lint
// Create “tslint.yml” TypoScript lint configuration
paths:
- Configuration/PageTSconfig
- Configuration/TypoScript
filePatterns:
- "*.ts"
- "*.typoscript"
sniffs:
- class: Indentation
parameters:
indentConditions: true
- class: RepeatingRValue
disabled: true
- class: DeadCode
disabled: true
// Run TypoScript lint
.config/composer/vendor/bin/typoscript-lint -c tslint.yaml
// Run Single TypoScript lint
.config/composer/vendor/bin/typoscript-lint path/to/your.typoscript
Fluid Lint
According to our experience, it’s not sufficient, but we heard TYPO3 Fluid 3.0 would using have better and built-in Fluid lint, Hope for the best.
// Installation of TYPO3 Fluid Lint
composer global require typo3fluid/fluid-lint:dev-master
// Let’s chek TYPO3 Fluid Lint
.config/composer/vendor/bin/fluidline Resoures/Private/Templates/Default.html
YAML Lint
A linter for YAML files. yamllint does not only check for syntax validity but weirdnesses like key repetition and cosmetic problems such as lines length, trailing spaces, indentation, etc.
// Install Python-PIP YAML Lint
sudo apt install python-pip
sudo pip install yamllint==1.10.0
// Let’s check whole folder for .yaml or .yml
yamllint -d relaxed .
XLIFF Lint
A linter for XLIFF localization files, The Translation component provides tools to internationalize your application.
// Install Symfony’s Great Translation XLIFF Lint Component
composer global require symfony/translation
// Check individual XLIFF Lint
php bin/console lint:xliff default.xliff
// Check whole fodler XLIFF Lint
php bin/console lint:xliff /Resources/Private/Language
EditorConfig.org
Lastly, I highly recommend using the most popular concept of EditorConfig.org. EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
- Maintain consistent coding styles for multiple developers
- Setup .editorconfig at the root of your project
- Define coding style standards
- Plugins available for your favourite IDE
Explore https://editorconfig.org/
Sample TYPO3 .editorconfig
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
# CSS-Files
[*.css]
indent_style = space
indent_size = 4
# HTML-Files
[*.html]
indent_style = space
indent_size = 4
# TMPL-Files
[*.tmpl]
indent_style = space
indent_size = 4
# TSX-Files
[*.tsx]
indent_style = space
indent_size = 4
# LESS-Files
[*.less]
indent_style = space
indent_size = 4
# JS-Files
[*.js]
indent_style = space
indent_size = 4
# PHP-Files
[*.php]
indent_style = space
indent_size = 4
# MD-Files
[*.md]
indent_style = space
indent_size = 4
# ReST-Files
[*.rst]
indent_style = space
indent_size = 3
# TypoScript
[*.typoscript,*.ts]
indent_style = space
indent_size = 4
# YML-Files
[{*.yml,*.yaml}]
indent_style = space
indent_size = 2
# package.json, composer.json or .travis.yml
[{package.json,composer.json,.travis.yml}]
indent_style = space
indent_size = 2
# SCSS
[*.scss]
indent_style = tab
indent_size = 2
Meet TYPO3 Lints to Git CI/CD
As a modern TYPO3 developer, Why do you want to check TYPO3 lints manually?
Well, for productive work, You should consider automating all above TYPO3 lints at your Git CI/CD ;)
We love Gitlab CI/CD. Here I want to share a working example as below.
Sample .gitlab-ci.yaml
cache:
key: "$CI_COMMIT_REF_NAME-$CI_JOB_STAGE"
paths:
- .composer/
before_script:
- apk add git --update
stages:
- php
- typoscript
- yaml
- fluid
- xliff
.php: &phptesting
stage: php
image: php:$DOCKER_TAG
only:
- branches
before_script:
- export TYPO3_PATH_WEB="$PWD/.Build/Web"
- export COMPOSER_CACHE_DIR=.composer
- curl -OLs https://composer.github.io/installer.sig
- php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
- php -r "if (hash_file('SHA384', 'composer-setup.php') === trim(file_get_contents('installer.sig'))) { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
- php composer-setup.php --no-ansi --install-dir=/usr/bin --filename=composer
- php -r "unlink('composer-setup.php'); unlink('installer.sig');"
- composer require friendsofphp/php-cs-fixer
script:
- .Build/bin/php-cs-fixer fix --dry-run --config=.php_cs --diff
# Tests in PHP 7.2 and TYPO3 9.5 version
php:testphp72:typo3_95:
<<: *phptesting
variables:
DOCKER_TAG: 7.2-alpine
# TYPO3_VERSION: ^9.5
typoscript:test:
image: composer:1.6
stage: typoscript
before_script:
- export COMPOSER_CACHE_DIR=.composer
- composer require --dev helmich/typo3-typoscript-lint
script:
- .Build/bin/typoscript-lint -c .tslint.yml
yaml:test:
image: python:alpine3.7
stage: yaml
before_script:
- pip install yamllint==1.10.0
script:
- yamllint -c .yamllint.yml .
fluid:test:
image: composer:1.6
stage: fluid
before_script:
- export COMPOSER_CACHE_DIR=.composer
- composer require typo3fluid/fluid-lint:dev-master
script:
- .Build/bin/fluidlint Resources/Private/Templates/Default.html
xliff:test:
image: composer:1.6
stage: xliff
before_script:
- export COMPOSER_CACHE_DIR=.composer
#- apk --no-cache add libxml2-utils
#- wget https://raw.githubusercontent.com/symfony/translation/v4.1.1/Resources/schemas/xliff-core-1.0-strict.xsd
- composer require symfony/translation
script:
- .Build/bin/xlifflint /usr/local/bin/php lint:xliff /Resources/Private/Language
#- xmllint --schema xliff-core-1.0-strict.xsd --noout $(find Resources -name '*.xlf')
Conclusion
Thanks for reading the article.
I hope you learned and explored to improve the quality of your TYPO3 code, Let’s quickly conclude;
- Understand the importance of TYPO3 code quality and review.
- Try any of your TYPO3 code reviews with SonarCloud, and It’s FREE!
- I appeal to TYPO3 extension developers to always test-drive your TER TYPO3 extension. It would be great if the TYPO3 community set SonarCloud TYPO3 code quality to check the link at the TER extension page.
- Keep implement all TYPO3 lints as automatic TYPO3 code review, also don't forget to add .editorconfig
- To be more automated, It would be awesome to implement TYPO3 lint at your favorite CI/CD.
Do you know any missing TYPO3 code review tools and techniques? Or, Are you facing any issues at SolarCloud or to implementing TYPO3 lint? Then, Feel free to write your comment at the comment box below.
Have a Happy TYPO3 Code Quality!
Post a Comment
- Hi, as an experienced developer, these standards are quite familiar to me and you are right, if we all adhere to standards, it will be relatively easy to take up a TYPO3 project written by someone else and fix bugs or extend functionality. Thanks for sharing!
- Great Sanjay! A very must-read article on TYPO3 coding. I think I need to change some bad coding habits if I want to progress. ;) Thank you so much.
Sanjay Chauhan
CTO - T3Planet & NITSANSanjay Chauhan, Mitbegründer von NITSAN (Preisgekrönte TYPO3 Agentur) und Pionier von T3Planet, dem ersten TYPO3 Shop weltweit.
Ein wahrer TYPO3-Fanatiker seit 2010.
Mit meinem umfangreichen technischen Wissen und…
More From Author
Sanjay Chauhan
CTO at T3Planet & NITSANSanjay Chauhan, Co-Founder of NITSAN (Award winning TYPO3 agency) and Pioneer of T3Planet (first-ever TYPO3 Shop).
A true TYPO3 fanatic since 2010. I bring strong TYPO3 experience in building customer-business…
More From Author