-
Notifications
You must be signed in to change notification settings - Fork 12
Coding Style Guide
PHP Standards | TypeScript Standards | IDE Integration
This document outlines proposals for key areas of back-end development that attempt to enhance and improve efficiency on the project.
The Talent Cloud team follows established PHP coding standards to ensure the codebase is easy to read and maintainable.
Our custom ruleset file uses the PSR-2 coding standard as a base, and adds some additional checks on top:
- Type hints for functions
- Documentation for functions
- Inline comment standards
- Variable comment standards
- Quote style standards
The commenting standards are set to "warning" severity (green underline) as they do not affect code performance.
The Talent Cloud team uses ESLint for both linting and formatting our TypeScript files.
Our ESLint config is set up to combine React's and TypeScript's linting rules (helping to avoid common mistakes), Airbnb's quite rigorous style guide, and integrates the Prettier code formatter. We have also customized several linting and formatting rules in .eslintrc.json and .prettierrc.json.
All the packages and plugins required to run ESLint are part of our npm devDependencies, so you can run the linter with the following command:
npx eslint .\resources\assets\js\**\*.ts .\resources\assets\js\**\*.tsx
You may have eslint fix common mistakes and run the code formatter by including the --fix option. It is recommended to always do this before committing code, to ensure consistent code formatting.
npx eslint .\resources\assets\js\**\*.ts .\resources\assets\js\**\*.tsx --fix
Alternatively, see below for recommendations on how to have this run automatically in VSCode.
Talent Cloud uses Visual Studio Code for a code editor, and in order to enforce standards a settings file has been committed to the repository.
The following extension is recommended:
Add the following to the User settings file in Visual Studio Code:
"eslint.format.enable": true,
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},The checked-in workspace settings for VSCode already includes the following setting:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},Now, whenever a TypeScript file is saved, ESLint should run (with fixes and code formatting) automatically.
The following extensions are recommended to ensure code standards are displayed correctly:
To have access to PHPCBF options (right click > Format Document), the following should be added to the User settings file in Visual Studio Code:
"phpcbf.standard": "[/Absolute/Path/To]/TalentCloud/ruleset.xml",
"phpcbf.executablePath": "./vendor/bin/phpcbf",
"[php]": {
"editor.defaultFormatter": "persoderlind.vscode-phpcbf",
},On Windows, the paths must be formatted slightly differently:
"phpcbf.standard": "[\\Absolute\\Path\\To]\\TalentCloud\\ruleset.xml",
"phpcbf.executablePath": ".\\vendor\\bin\\phpcbf.bat", Note: The path to the PHPCBF standard must be absolute for the extension to work.
In order to add automatic formatting on save, the following can be added instead:
"phpcbf.standard": "[/Absolute/Path/To]/TalentCloud/ruleset.xml",
"phpcbf.executablePath": "./vendor/bin/phpcbf",
"phpcbf.onsave": true,
"[php]": {
"editor.defaultFormatter": "persoderlind.vscode-phpcbf",
"editor.formatOnSave": true
},