Configure Angular CLI to use tabs instead of spaces

Category: Front-end 2019-09-02 Łukasz Nojek

As a tab indentation enthusiast, I wanted to use an Angular project with tabs instead of 2 spaces. Unfortunately, there are several settings to change, and the schematics used by ng CLI command supports only spaces. Despite numerous requests (e.g. here and here), Google did not decide to introduce an option to set indentation for generated files. I went through the process of making Angular project tabbed and I’ll describe it here.

Table of contents

Introduction
Reformat existing code
Configure the Angular project to use tabs

Introduction

The process will be much more comfortable if you remember to run git add . && git commit after every step to easily verify (git diff) and undo (git checkout -- .) changes.

First, create a new project (or start with your existing project):

> ng new NAME --directory . --routing true --style scss

Reformat existing code

Next, there are two options.

One is installing and using the Prettier package for formatting code:

> npm install prettier
> npx prettier --write "./**/*.{js,ts,json,html}" --use-tabs --single-quote
> npm uninstall prettier

Verify that the indentation changed with git diff and that no content was changed with git diff -w (which ignores whitespace differences).

If you don’t mind minor reformatting, mainly in JSON arrays:

-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+                                               "assets": ["src/favicon.ico", "src/assets"],
+                                               "styles": ["src/styles.scss"],

then leave that version.

Another possibility is using a Linux terminal or Git Bash. Open it and launch:

> find . -type f -and -not -regex '.*\(/\.git/\|/node_modules/\|package-lock.json\).*' -and -regex '.*\.\(js\|ts\|html\|css\|scss\|json\)' -exec grep -Iq . {} \; -and -print | while read -r file; do {
    echo "Converting... "$file"";
    data=$(unexpand --first-only -t 2 "$file");
    rm "$file";
    echo "$data" > "$file";
}; done;

Converting... ./angular.json
Converting... ./e2e/protractor.conf.js
Converting... ./e2e/src/app.e2e-spec.ts
Converting... ./e2e/src/app.po.ts
Converting... ./e2e/tsconfig.json
Converting... ./karma.conf.js
Converting... ./package.json
Converting... ./src/app/app-routing.module.ts
Converting... ./src/app/app.component.html
Converting... ./src/app/app.component.spec.ts
Converting... ./src/app/app.component.ts
Converting... ./src/app/app.module.ts
Converting... ./src/environments/environment.prod.ts
Converting... ./src/environments/environment.ts
Converting... ./src/index.html
Converting... ./src/main.ts
Converting... ./src/polyfills.ts
Converting... ./src/styles.scss
Converting... ./src/test.ts
Converting... ./tsconfig.app.json
Converting... ./tsconfig.json
Converting... ./tsconfig.spec.json
Converting... ./tslint.json

That command finds all files in the current folder which end in .js, .ts, .html, .css, .scss or .json and their path does not contain any of:

/.git/
/node_modules/
package-lock.json

You can add more rules if necessary. It then converts the initial spaces and converts every two spaces (-t 2) to a tab.

Warning

Run the command first without the rm and echo ... > ... lines to list the files that will be changed. If the regex is invalid, you may damage your .git files, and therefore irreversibly destroy data in your repository!

This method shouldn’t introduce any artifacts, only the whitespaces should be changed. Verify it with git diff and git diff -w.

Configure the Angular project to use tabs

As many as 3 files have to be changed to start using tab indentation.

First, the .editorconfig file that determines the setting used by your editor when you edit files. This has to be checked first (so you don’t enter spaces while editing other configuration files).

-indent_style = space
+indent_style = tab

Next, the tslint.json file determines the linting options for TypeScript.

                "template-banana-in-box": true,
                "template-no-negated-async": true,
                "use-lifecycle-interface": true,
-               "use-pipe-transform-interface": true
+               "use-pipe-transform-interface": true,
+               "indent": [true, "tabs", 2]
        },
        "rulesDirectory": [
                "codelyzer"

And, finally, angular.json needs to have lintFix: true added to all schematics. Note – if you have more, list them all. Previously there was just one default, then the option disappeared but was discovered as the settings you see below.

                       "projectType": "application",
                       "schematics": {
                               "@schematics/angular:component": {
                                       "style": "scss",
                                       "lintFix": true
                               },
                               "@schematics/angular:class": {
                                       "lintFix": true
                               },
                               "@schematics/angular:directive": {
                                       "lintFix": true
                               },
                               "@schematics/angular:module": {
                                       "lintFix": true
                               },
                               "@schematics/angular:pipe": {
                                       "lintFix": true
                               },
                               "@schematics/angular:service": {
                                       "lintFix": true
                               }
                       },

Now, when you generate new items using CLI, e.g. ng generate component Home, it will be indented with tabs.

Łukasz Nojek – blog

Software development and architecture