A good coding standard helps the code quality and development productivity because best practices are built-in. Coding standard includes code analysis and code formatter. This is a document for setup and execute coding standard for Angular development, including the Ionic deveopment.
There are two tools used in maitaining Angular code standard: TSLint and Prettier. TSLint is used for code analysis and prettier is used for code format. Both tools should be configured and used in both IDE and the automatic build process.
Both the Angular CLI tool
ng and the Ionic CLI tool
ionic generate a
tslint.json file. First, install and use
tslint-angular preset for code analyzer:
npm i -D tslint-angular.
Then, disable code style checking rules. Update the
tslint.json file to have the following content for an Angulr/Ionic project.
For an Ionic project, define the npm run command as
"lint": "tslint -c tslint.json -p tsconfig.json",. You also need to change the
ionic generated component class names to follow the Angular code style.
First, install the Prettier package using
npm i -D prettier. Then create a configuration file named
.prettierrc that has customized rules:
To make it format files automatically, set
“editor.formatOnSave”: true in VS Code after installing the Prettier extension.
4 Configure Pre-commit Hooks
npm install npm-run-all husky pretty-quick -D and add the following scripts to
package.json that fix format and lint sequentially.
husky version 1.0 may change the configuration as the following: