How can I generate a new Angular project that honors specified indention styles

Question

I've been an angular dev for a long time and it always bugs me that running ng new did not seem to provide a way to create a new project with a specified indentation type (tabs vs. spaces) or amount (2 vs. 4).

I'm starting a new Angular 7 project and from reading related discussions on github it seems this problem has been fixed. Naturally, the solutions are convoluted and contradictory, and I'm clearly doing something wrong, because I can't get lintFix to run. When I run it manually it doesn't seem to do anything.

Can someone please walk me through the steps to generate a new Angular project that honors specified indention styles immediately after starting off with a brand new: npm install -g @angular/cli for Angular 7?

Answer 1

In my case I wanted to change 2 spaces to 4, and running ng lint --fix did nothing, because tslint's indentation fixer does not alter the amount of indentation, just the type.

I was able to work around this immediately after running ng new by altering the tslint.json to add:

"indent": [
    true,
    "tabs",
    2
],

Then I ran ng lint --fix and all space indentations were fixed to tabs. Then I set the indentation back to what I really wanted:

"indent": [
    true,
    "spaces",
    4
],

...and ran ng lint --fix again. Now all existing indentation is correct. Of course any further Angular CLI generators will still use 2 spaces, so this is not a full solution, but it's better than nothing.

Answer 2

TSLint is dead. In Angular v10 and later you should use ESLint. Angular-eslint to be more exact.

There is an option to migrate existing project. See their readme.

Adding indentation rule:

        "rules": {
            "indent": ["error", "tab"],
...
            "@angular-eslint/component-selector": [

Note! Be careful to add it for *.ts only. So before @angular-eslint/component-selector. Indent rule will cause problems if you try to add it for HTML.

Generating a component and linting:

ng generate component components/todos
ng lint --fix

Answer 3

With the latest in the Angular 8.2.1, I have been able to get this to work somewhat for tabs that are 4 spaces. I set my tslint.json indent incorrectly, which is to be tabs, but with 2 spaces.

"indent": [
    true,
    "tabs",
    2
],

Now when I use the ng generate, the schematic does change the spacing to be tabs, and does create 2 tabs where it was needed. Using an indent of tabs, with spacing of 4, the code that is just 2 spaced characters indent, does not have tab replacements.

I then have my .editorconfig set to have the indent style set to tabs, but to have the spacing for a tab to be 4 characters. This then looks proper in all my editors, as the underlying source code does have the proper tab stops created by the ng generate with the --lintFix flag.

indent_style = tabs
indent_size = 4

The text now is spaced properly in Visual Studio Code or other editors on the different platforms I use.