7 Best TYPO3 Code Quality, Review & Lint Tools

7 Best TYPO3 Code Quality, Review & Lint Tools

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?

Source

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

Source

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

Source

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 Comment

Your email address will not be published. Required fields are marked *

×

Name is required!

Enter valid name

Valid email is required!

Enter valid email address

Comment is required!

Google Captcha Is Required!

Comments :

  • Hildebrant August 7, 2020 At 12:56 pm
    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!
  • Isaak August 7, 2020 At 12:54 pm
    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.
10+ Women of TYPO3 Who Code, Design, and Inspire!

10+ Women of TYPO3 Who Code, Design, and Inspire!

TYPO3 Women & Girls rocks at TYPO3 community! Today, I’m proud to write first-time in the TYPO3 history blog about T3-Womaniya ;)…

Building Better TYPO3 Eco-System

Interview with Mathias Bolt: Building Better TYPO3 Eco-system

Welcome to the TYPO3 Interview Series! Check out the Interview with Mathias Bolt on TYPO3 EcoSystem.We are excited to launch…

Get Prepared for TYPO3 v10

Get Prepared for TYPO3 v10 - Before It’s Release

Woohoo! Team T3Terminal is very excited for TYPO3 v10 LTS that is going to be released on 21st April 2020 :)Are you also…

Stay up to date with our recent TYPO3 Blogs, news, & updates