Optimierung der Codequalität durch Einsatz von Linting
Linting ist ein wichtiger Aspekt der modernen Programmierung und wird in der Webentwicklung immer häufiger eingesetzt. Es handelt sich dabei um eine Art der statischen Codeanalyse, die den Code auf Fehler überprüft, bevor das Programm ausgeführt wird. Durch den Einsatz von Linting wird die Qualität des Codes verbessert, die Entwicklung beschleunigt und Fehler vermieden. Insbesondere in der Shopware 6-Entwicklung ist Linting unerlässlich, um sauberen und fehlerfreien Code zu schreiben.
Aber was ist Linting genau?
Es handelt sich dabei um einen Prozess der statischen Codeanalyse, bei dem spezielle Tools verwendet werden, um den Code auf Syntaxfehler, stilistische Fehler und potenzielle Fehlerquellen zu überprüfen. Das Tool, das für das Linting verwendet wird, wird als Linter bezeichnet. Ein Linter durchsucht den Code und zeigt Fehler und potenzielle Probleme an. Einige der häufigsten Fehler, die durch Linting gefunden werden können, sind nicht deklarierte Variablen, ungenutzte Variablen, deklarierte, aber nie aufgerufene Funktionen, Schleifen ohne Ausstiegsklausel und ungültige Syntax.
Frontend-Linting
Im Frontend geht es insbesondere um die Prüfung von HTML-, CSS- und JavaScript-Code.
In unseren Shopware-Projekten verwenden wir Stylelint, Eslint und Prettier für das Frontend-Linting, um sicherzustellen, dass unsere Codesprache einheitlich bleibt, konsistente Standards eingehalten werden und potenzielle Probleme identifiziert werden können. Das Hinzufügen von Linting-Tools in unserem Frontend-Workflow hat viele Vorteile. Es erhöht die Effizienz, da es zeitaufwändige manuelle Code-Reviews reduziert und Fehler frühzeitig erkennt. Außerdem hilft es uns, Code-Style-Kniffe zu nutzen, wie z.B. CSS- und JavaScript-Best-Practices, die die Qualität unseres Codes verbessern und Fehler im späteren Stadium beseitigen. Unser Frontend-Team kann sich auf das Erstellen von Funktionen konzentrieren, anstatt sich über vermeidbare Fehler Gedanken machen zu müssen, was letztendlich zu einer höheren Produktivität und Qualität unseres Frontends führt.
Stylelint
Stylelint ist ein Tool zum Linten von CSS/SCSS/LESS-Code, das speziell dafür entwickelt wurde. Im Shopware-Team haben wir uns für die Stylelint-Konfiguration von Shopware 6 entschieden und sie an unsere Bedürfnisse angepasst. Obwohl Shopware 6 bereits eine optimierte Stylelint-Konfiguration verwendet, haben wir sie weiter angepasst, um sicherzustellen, dass sie speziell für unsere Arbeitsabläufe und Stylesheets optimiert ist. Dadurch können wir sicherstellen, dass unser Code sauber, konsistent und den neuesten Best Practices entspricht.
const config =
require('../../vendor/shopware/storefront/Resources/app/storefront/stylelint.config');
module.exports = Object.assign(config, {
rules: Object.assign(config.rules, {
'max-nesting-depth': 8,
'selector-max-compound-selectors': 8,
}),
});
vendor/shopware/storefront/Resources/app/storefront/node_modules/stylelint/bin/stylelint.js \
--config stylelint.config.js \
--ignore-path .stylelintignore \
--config-basedir vendor/shopware/storefront/Resources/app/storefront \
--allow-empty-input ./custom/**/Sitegeist*/src/**/storefront/src/**/*.scss
ESLint
ESLint ist ein flexibles und anpassbares Linter-Tool für JavaScript-Code. Mit Hilfe von Regeln kann ESLint den Code auf viele Arten überprüfen, z.B. auf falsch geschriebene Variablennamen oder die Verwendung nicht definierter Variablen. Es ist ein hervorragendes Werkzeug für die Frontend-Entwicklung und kann leicht in Arbeitsabläufe integriert werden. Im Shopware-Team haben wir die von Shopware bereitgestellte ESLint-Konfiguration für Shopware 6 an unsere eigenen Bedürfnisse angepasst. Wir haben spezifische Regeln hinzugefügt oder entfernt, um sicherzustellen, dass unser Code unseren eigenen internen Best Practices entspricht und den Standards entspricht, die wir für unsere Projekte festgelegt haben. Wir haben auch zusätzliche Plugins integriert, um sicherzustellen, dass bestimmte Arten von Fehlern oder Problemen erkannt werden, die für unsere Projekte relevant sind.
const config =
require('../../vendor/shopware/storefront/Resources/app/storefront/.eslintrc');
delete config.env['jest/globals'];
Object.keys(config.rules).forEach(key => {
if (key.includes('jest/')) {
delete config.rules[key];
}
});
module.exports = Object.assign(config, {
parser: '../../vendor/shopware/storefront/Resources/app/storefront/node_modules/babel-eslint',
plugins: [],
rules: Object.assign(config.rules, {
'array-callback-return': 'error',
'no-duplicate-imports': 'error',
'no-use-before-define': 'error',
'camelcase': 'error',
'consistent-this': ['error', 'self'],
'curly': 'error',
'default-param-last': 'error',
'no-else-return': 'error',
'no-eval': 'error',
'no-implicit-coercion': 'error',
'no-lone-blocks': 'error',
'no-lonely-if': 'error',
'no-multi-assign': 'error',
'no-nested-ternary': 'error',
'no-new-wrappers': 'error',
'no-param-reassign': 'error',
'no-return-assign': 'error',
'no-script-url': 'error',
'no-sequences': 'error',
'no-shadow': 'error',
'no-undef-init': 'error',
'no-unneeded-ternary': 'error',
'no-unused-expressions': 'error',
'no-useless-call': 'error',
'no-useless-computed-key': 'error',
'no-useless-concat': 'error',
'no-useless-rename': 'error',
'no-useless-return': 'error',
'no-var': 'error',
'prefer-const': 'error',
'prefer-template': 'error',
'quote-props': ['warn', 'consistent-as-needed'],
'spaced-comment': 'error',
'array-bracket-newline': ['error', 'consistent'],
'array-bracket-spacing': 'error',
'array-element-newline': ['error', 'consistent'],
'arrow-spacing': 'error',
'block-spacing': 'error',
'brace-style': 'error',
'comma-spacing': 'error',
'comma-style': 'error',
'dot-location': ['error', 'property'],
'func-call-spacing': 'error',
'function-call-argument-newline': ['error', 'consistent'],
'key-spacing': 'error',
'keyword-spacing': 'error',
'lines-around-comment': ['error', { 'allowBlockStart': true }],
'lines-between-class-members': 'error',
'no-multi-spaces': 'error',
'no-multiple-empty-lines': ['error', { 'max': 1 }],
'no-trailing-spaces': 'error',
'no-whitespace-before-property': 'error',
'object-property-newline': ['error',
{ 'allowAllPropertiesOnSameLine': true }],
'object-curly-spacing': ['error', 'always'],
'padded-blocks': ['error', 'never'],
'padding-line-between-statements': [
'error',
{ 'blankLine': 'always', 'prev': ['block', 'multiline-block-like'], 'next': '*' },
{ 'blankLine': 'always', 'prev': 'import', 'next': '*' },
{ 'blankLine': 'any', 'prev': 'import', 'next': 'import' },
{ 'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': '*' },
{ 'blankLine': 'any', 'prev': ['const', 'let', 'var'], 'next': ['const', 'let', 'var', 'expression', 'if'] },
],
'quotes': ['error', 'single'],
'rest-spread-spacing': 'error',
'semi': 'error',
'semi-spacing': 'error',
'semi-style': 'error',
'space-before-blocks': 'error',
'space-before-function-paren': ['error', 'never'],
'space-in-parens': 'error',
}),
});
const config =
require('../../vendor/shopware/administration/Resources/app/administration/.eslintrc');
const newRules = {
'max-len': ['error', 256, { ignoreRegExpLiterals: true }],
'sw-deprecation-rules/private-feature-declarations': 'off'
,};
const [overrideJS, ...overrideOthers] = config.overrides;
const newOverrideJS = Object.assign(overrideJS, {
rules: Object.assign(overrideJS.rules, newRules),
});
module.exports = Object.assign(config, {
rules: Object.assign(config.rules, newRules),
overrides: [newOverrideJS, ...overrideOthers],
});
vendor/shopware/storefront/Resources/app/storefront/node_modules/eslint/bin/eslint.js \
--config .eslintrc.js \
--no-error-on-unmatched-pattern \
./custom/**/Sitegeist*/src/**/storefront/src/**/*.js
vendor/shopware/administration/Resources/app/administration/node_modules/eslint/bin/eslint.js \
--config .eslintrc.admin.js \
--no-error-on-unmatched-pattern \
./custom/**/Sitegeist*/src/**/administration/src/**/*.js
Prettier
Prettier ist ein automatisches Codeformatierungswerkzeug, das entwickelt wurde, um den Prozess der Codeformatierung zu automatisieren und somit die Konsistenz und Lesbarkeit des Codes zu verbessern. Es unterstützt eine Vielzahl von Programmiersprachen wie JavaScript, TypeScript, CSS, HTML und mehr. Prettier analysiert den Code und formatiert ihn gemäß den vordefinierten Regeln, was zu einem einheitlichen und sauberen Code führt. Dadurch spart es Entwickler:innen viel Zeit, die sie normalerweise damit verbringen würden, manuell Codeformatierung durchzuführen. Prettier kann in vielen Entwicklungsumgebungen wie VSCode, Atom, PhpStorm und vielen anderen genutzt werden und ist mittlerweile zu einem wichtigen Werkzeug in der Entwickler:innen-Community geworden.
PHP-Linting
PHP-Linting ist ein wichtiger Bestandteil der Shopware 6-Entwicklung. Es hilft, Code-Fehler und -Probleme im PHP-Code frühzeitig zu erkennen und zu vermeiden, um eine bessere Code-Qualität zu gewährleisten.
Unser Shopware-Team nutzt die Symplify Easing Coding Standards als Richtlinie für das Linting unseres PHP-Codes. Diese Standards basieren auf PHP Code Sniffer und PHP CS Fixer und erweitern die bekannten PSR-Standards um zusätzliche Regeln und Empfehlungen. Das Linting-Tool analysiert den Code automatisch und gibt Warnungen aus, wenn er nicht den Standards entspricht. So stellen wir sicher, dass unser PHP-Code den aktuellen Best Practices und Konventionen entspricht und leichter zu verstehen und zu pflegen ist.
<?php
declare(strict_types=1);
use Symfony\Component\Finder\Finder;
use Symplify\EasyCodingStandard\Config\ECSConfig;
use Symplify\EasyCodingStandard\ValueObject\Set\SetList;
return static function (ECSConfig $ecsConfig): void {
// directories for linting
$finder = Finder::create();
$finder->directories()->in(__DIR__.'/../../custom/*/Sitegeist*/');
$paths = [];
foreach ($finder as $directory) {
$paths[] = $directory->getPath();
}
$ecsConfig->paths($paths);
$ecsConfig->sets([
SetList::PSR_12,
SetList::CLEAN_CODE,
SetList::COMMON,
__DIR__ . '/sitegeist_rules.php'
]);
};<?php
declare (strict_types=1);
return static function (ECSConfig $ecsConfig) : void {
// Symfony
$ecsConfig->ruleWithConfiguration(
ArraySyntaxFixer::class,
[
'syntax' => 'short'
]
);
$ecsConfig->rule(BinaryOperatorSpacesFixer::class);
$ecsConfig->rule(BlankLineAfterNamespaceFixer::class);
$ecsConfig->rule(BlankLineAfterOpeningTagFixer::class);
$ecsConfig->ruleWithConfiguration(
BlankLineBeforeStatementFixer::class,
[
'statements' => [
'return'
]
]
);
$ecsConfig->ruleWithConfiguration(
BracesFixer::class,
[
'allow_single_line_closure' => true
]
);
$ecsConfig->rule(CastSpacesFixer::class);
$ecsConfig->ruleWithConfiguration(
ClassAttributesSeparationFixer::class,
[
'elements' => [
'method' => 'one'
]
]
);
$ecsConfig->ruleWithConfiguration(
ClassDefinitionFixer::class,
[
'single_line' => true
]
);
$ecsConfig->rule(ConcatSpaceFixer::class);
$ecsConfig->rule(ConstantCaseFixer::class);
$ecsConfig->rule(DeclareEqualNormalizeFixer::class);
$ecsConfig->rule(ElseifFixer::class);
$ecsConfig->rule(EncodingFixer::class);
$ecsConfig->rule(FullOpeningTagFixer::class);
$ecsConfig->rule(FunctionDeclarationFixer::class);
$ecsConfig->rule(FunctionTypehintSpaceFixer::class);
$ecsConfig->rule(IncludeFixer::class);
$ecsConfig->rule(IncrementStyleFixer::class);
$ecsConfig->rule(IndentationTypeFixer::class);
$ecsConfig->rule(LineEndingFixer::class);
$ecsConfig->rule(LowercaseCastFixer::class);
$ecsConfig->rule(LowercaseKeywordsFixer::class);
$ecsConfig->rule(LowercaseStaticReferenceFixer::class);
$ecsConfig->rule(MagicConstantCasingFixer::class);
$ecsConfig->rule(MagicMethodCasingFixer::class);
$ecsConfig->rule(MethodArgumentSpaceFixer::class);
$ecsConfig->rule(NativeFunctionCasingFixer::class);
$ecsConfig->rule(NativeFunctionTypeDeclarationCasingFixer::class);
$ecsConfig->rule(NewWithBracesFixer::class);
$ecsConfig->rule(NoBlankLinesAfterClassOpeningFixer::class);
$ecsConfig->rule(NoBlankLinesAfterPhpdocFixer::class);
$ecsConfig->rule(NoBreakCommentFixer::class);
$ecsConfig->rule(NoClosingTagFixer::class);
$ecsConfig->rule(NoEmptyCommentFixer::class);
$ecsConfig->rule(NoEmptyPhpdocFixer::class);
$ecsConfig->rule(NoEmptyStatementFixer::class);
$ecsConfig->ruleWithConfiguration(
NoExtraBlankLinesFixer::class,
[
'tokens' => [
'curly_brace_block',
'extra',
'parenthesis_brace_block',
'square_brace_block',
'throw',
'use',
]
]
);
$ecsConfig->rule(NoLeadingImportSlashFixer::class);
$ecsConfig->rule(NoLeadingNamespaceWhitespaceFixer::class);
$ecsConfig->rule(NoMixedEchoPrintFixer::class);
$ecsConfig->rule(NoMultilineWhitespaceAroundDoubleArrowFixer::class);
$ecsConfig->rule(NoShortBoolCastFixer::class);
$ecsConfig->rule(NoSinglelineWhitespaceBeforeSemicolonsFixer::class);
$ecsConfig->rule(NoSpacesAfterFunctionNameFixer::class);
$ecsConfig->rule(NoSpacesAroundOffsetFixer::class);
$ecsConfig->rule(NoSpacesInsideParenthesisFixer::class);
$ecsConfig->ruleWithConfiguration(
NoSuperfluousPhpdocTagsFixer::class,
[
'allow_mixed' => true,
'allow_unused_params' => true
]
);
$ecsConfig->rule(NoTrailingWhitespaceFixer::class);
$ecsConfig->rule(NoTrailingWhitespaceInCommentFixer::class);
$ecsConfig->rule(NoUnneededControlParenthesesFixer::class);
$ecsConfig->ruleWithConfiguration(
NoUnneededCurlyBracesFixer::class,
[
'namespaces' => true
]
);
$ecsConfig->rule(NoUnusedImportsFixer::class);
$ecsConfig->rule(NoWhitespaceBeforeCommaInArrayFixer::class);
$ecsConfig->rule(NoWhitespaceInBlankLineFixer::class);
$ecsConfig->rule(NormalizeIndexBraceFixer::class);
$ecsConfig->rule(ObjectOperatorWithoutWhitespaceFixer::class);
$ecsConfig->rule(OrderedImportsFixer::class);
$ecsConfig->rule(PhpUnitFqcnAnnotationFixer::class);
$ecsConfig->ruleWithConfiguration(
PhpdocAlignFixer::class,
[
'tags' => [
'method',
'param',
'property',
'return',
'throws',
'type',
'var'
]
]
);
$ecsConfig->rule(PhpdocAnnotationWithoutDotFixer::class);
$ecsConfig->rule(PhpdocIndentFixer::class);
$ecsConfig->rule(PhpdocNoAccessFixer::class);
$ecsConfig->rule(PhpdocNoAliasTagFixer::class);
$ecsConfig->rule(PhpdocNoPackageFixer::class);
$ecsConfig->rule(PhpdocNoUselessInheritdocFixer::class);
$ecsConfig->rule(PhpdocReturnSelfReferenceFixer::class);
$ecsConfig->rule(PhpdocScalarFixer::class);
$ecsConfig->rule(PhpdocSeparationFixer::class);
$ecsConfig->rule(PhpdocSingleLineVarSpacingFixer::class);
$ecsConfig->rule(PhpdocSummaryFixer::class);
$ecsConfig->rule(PhpdocToCommentFixer::class);
$ecsConfig->rule(PhpdocTrimFixer::class);
$ecsConfig->rule(PhpdocTrimConsecutiveBlankLineSeparationFixer::class);
$ecsConfig->rule(PhpdocTypesFixer::class);
$ecsConfig->ruleWithConfiguration(
PhpdocTypesOrderFixer::class,
[
'null_adjustment' => 'always_last',
'sort_algorithm' => 'none'
]
);
$ecsConfig->rule(PhpdocVarWithoutNameFixer::class);
$ecsConfig->rule(ReturnTypeDeclarationFixer::class);
$ecsConfig->rule(SemicolonAfterInstructionFixer::class);
$ecsConfig->rule(ShortScalarCastFixer::class);
$ecsConfig->rule(SingleBlankLineAtEofFixer::class);
$ecsConfig->rule(SingleBlankLineBeforeNamespaceFixer::class);
$ecsConfig->rule(SingleClassElementPerStatementFixer::class);
$ecsConfig->rule(SingleImportPerStatementFixer::class);
$ecsConfig->rule(SingleLineAfterImportsFixer::class);
$ecsConfig->ruleWithConfiguration(
SingleLineCommentStyleFixer::class,
[
'comment_types' => ['hash']
]
);
$ecsConfig->rule(SingleLineThrowFixer::class);
$ecsConfig->rule(SingleQuoteFixer::class);
$ecsConfig->rule(SingleTraitInsertPerStatementFixer::class);
$ecsConfig->ruleWithConfiguration(
SpaceAfterSemicolonFixer::class,
[
'remove_in_empty_for_expressions' => true
]
);
$ecsConfig->rule(StandardizeIncrementFixer::class);
$ecsConfig->rule(StandardizeNotEqualsFixer::class);
$ecsConfig->rule(SwitchCaseSemicolonToColonFixer::class);
$ecsConfig->rule(SwitchCaseSpaceFixer::class);
$ecsConfig->rule(TernaryOperatorSpacesFixer::class);
$ecsConfig->ruleWithConfiguration(
TrailingCommaInMultilineFixer::class,
[
'elements' => [TrailingCommaInMultilineFixer::ELEMENTS_ARRAYS]
]
);
$ecsConfig->rule(TrimArraySpacesFixer::class);
$ecsConfig->rule(UnaryOperatorSpacesFixer::class);
$ecsConfig->rule(VisibilityRequiredFixer::class);
$ecsConfig->rule(WhitespaceAfterCommaInArrayFixer::class);
// Shopware
$ecsConfig->rule(ModernizeTypesCastingFixer::class);
$ecsConfig->rule(NativeConstantInvocationFixer::class);
$ecsConfig->rule(FopenFlagsFixer::class);
$ecsConfig->rule(NativeFunctionInvocationFixer::class);
$ecsConfig->rule(NullableTypeDeclarationForDefaultNullValueFixer::class);
$ecsConfig->rule(VoidReturnFixer::class);
$ecsConfig->rule(OperatorLinebreakFixer::class);
$ecsConfig->rule(GeneralPhpdocAnnotationRemoveFixer::class);
$ecsConfig->rule(PhpdocOrderFixer::class);
$ecsConfig->rule(NoUselessReturnFixer::class);
$ecsConfig->rule(CompactNullableTypehintFixer::class);
// sitegeist Custom
$ecsConfig->rule(NoUselessElseFixer::class);
$ecsConfig->rule(NoSuperfluousElseifFixer::class);
$ecsConfig->ruleWithConfiguration(
ForbiddenFunctionsSniff::class,
[
'forbiddenFunctions' => [
'die' => null,
'var_dump' => null,
'dd' => null
]
]
);
};
PHP Code Sniffer
PHP Code Sniffer bietet eine Vielzahl von vordefinierten Regelsätzen für verschiedene Coding-Standards, wie z.B. PSR-1, PSR-2, PSR-12, Zend und Symfony. Diese Regelsätze umfassen Regeln für die Einrückung, Verwendung von Leerzeichen und Zeilenumbrüchen, Namenskonventionen für Variablen und Funktionen, Kommentare und mehr. PHP Code Sniffer kann auch für spezifische Projekte oder Teams angepasst werden, indem eigene Regeln erstellt oder bestehende Regeln angepasst werden.
PHP CS Fixer
PHP CS Fixer kann in Kombination mit PHP Code Sniffer verwendet werden, um die Qualität des Codes weiter zu verbessern. Wenn der Code von den Standards abweicht, gibt PHP Code Sniffer Warnungen aus, die Entwickler:innen dazu anregen, den Code entsprechend zu korrigieren. PHP CS Fixer kann verwendet werden, um den Code automatisch zu formatieren und somit konsistent und lesbar zu gestalten. Dies erleichtert die Arbeit der Entwickler:innen erheblich, indem es ihnen ermöglicht, den Code automatisch formatieren zu lassen und sich auf die Entwicklung zu konzentrieren. Die Verwendung von PHP CS Fixer trägt insgesamt zur Verbesserung der Effizienz und Qualität der Codeentwicklung bei.
Automatisches Linting in der CI/CD Pipeline
Bei sitegeist haben wir eine effektive Methode implementiert, um sicherzustellen, dass der Code bereits vor dem Pushen ins Git auf Fehler und Abweichungen von den definierten Coding-Standards geprüft wird. Hierfür nutzen wir den Precommit Hook, eine Art von Skript, das vor jedem Commit automatisch ausgeführt wird. Wir führen alle relevanten Frontend- und PHP-Linting-Skripte aus, um sicherzustellen, dass der Code jederzeit auf einem konsistenten Niveau bleibt und Fehler vermieden werden. Dadurch sparen wir wertvolle Zeit bei der Fehlerbehebung und stellen sicher, dass die Qualität des Codes immer auf höchstem Niveau ist.
Zusätzlich zum Precommit Hook führen wir auch noch einmal das Linting in der GitLab CI/CD-Pipeline durch. Dabei wird der Code erneut auf Abweichungen von den definierten Coding-Standards überprüft und eventuelle Fehler oder Warnungen werden ausgegeben. Wenn das Linting in der Pipeline Fehler findet, wird ein Merge Request blockiert und es ist nicht möglich, den Code in den Hauptzweig zu integrieren. Dadurch stellen wir sicher, dass der Code jederzeit fehlerfrei ist und den Coding-Standards entspricht. Auf diese Weise können Fehler und Qualitätsprobleme vermieden werden, was wiederum dazu beiträgt, dass unser Code immer auf einem hohen Qualitätsniveau bleibt.
Ausblick
Bei sitegeist ist uns die Qualität und Effizienz unserer Arbeit sehr wichtig, und deshalb stellen wir sicher, dass unser Linting-Prozess stets auf dem neuesten Stand ist. Wir wollen unsere Tools und Methoden kontinuierlich verbessern, um Probleme schneller und effektiver zu beheben und dadurch Zeit und Geld zu sparen. Durch die Optimierung unseres Linting-Prozesses haben wir mehr Zeit, uns auf die Entwicklung individueller Lösungen zu konzentrieren, die genau auf Ihre individuellen Bedürfnisse abgestimmt sind. Wir sind davon überzeugt, dass die kontinuierliche Verbesserung unseres Linting-Prozesses dazu beitragen wird, unseren Kunden:innen den bestmöglichen Service zu bieten und unser Unternehmen langfristig erfolgreich zu machen.
