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.

1 Introduction

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.

2 TSLint

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.

3 Prettier

First, install the Prettier package using npm i -D prettier. Then create a configuration file named .prettierrc that has customized rules: