CODEWITHSUNDEEP
node.jstypescripteslintlint
noblerare
noblerare

Reputation: 11873

VS Code not indenting to 4 spaces but only for a single file

I have a Typescript project that I'm editing with VS Code. VS Code has the following settings in its settings.json:

{
    "window.zoomLevel": 0,
    "extensions.ignoreRecommendations": false,
    "editor.formatOnSave": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.autoSave": "off",
    "workbench.iconTheme": "material-icon-theme"
    "editor.tabSize" : 4
}

In addition, the project uses ESLint, .eslintrc.js: 

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/@typescript-eslint',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    "prefer-const": 0,
    "no-use-before-define": 0,
    "no-useless-escape": 0,
    "no-lone-blocks": 0,
    "no-empty-pattern": 0,
    "no-sequences": 0,
    "no-path-concat": 0,
    "no-extend-native": 0,
    "import/no-duplicates": 0,
    "no-unexpected-multiline": 0,
    "camelcase": 0,
    "func-call-spacing": [2, "never"],
    "space-before-function-paren": [2, { "anonymous": "always", "named": "never", "asyncArrow": "always" }],
    "no-array-constructor": 0,
    "no-mixed-operators": 0,
    "no-prototype-builtins": 0,
    "brace-style": [2, "1tbs"],
    "block-spacing": 0,
    "indent": [2, 4, {
      "SwitchCase": 1,
      "VariableDeclarator": 1,
      "outerIIFEBody": 1,
      "MemberExpression": 1,
      "FunctionDeclaration": { "parameters": 1, "body": 1 },
      "FunctionExpression": { "parameters": 1, "body": 1 },
      "CallExpression": { "arguments": 1 },
      "ArrayExpression": 1,
      "ObjectExpression": 1,
      "ImportDeclaration": 1,
      "flatTernaryExpressions": false,
      "ignoreComments": false
    }],
    "eqeqeq": 0,
    "semi": 0,
    "prefer-promise-reject-errors": 0,
    "no-undef": 0,
    "no-return-assign": 0,
    "no-unused-vars": 0,
    "no-unused-expressions": 0,
  },
};

...and a .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "all"
  "tabWidth": 4,
}

My project consists mostly of .ts Typescript extension files. Now, all in all this works great. I can make changes to my code and upon save, VS Code will auto-format the code accordingly.

However, I have one file in particular that refuses to auto-format to 4-space tab and insists on using 2-space tabs.

app.controller.ts

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) { }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

First of all, saving in VS Code makes no formatting changes to this file for some reason. I have tried running npm run lint and it does catch the indentation errors.

Then, running npm run lint --fix results in this:

@Controller()
export class AppController {
    constructor(private readonly appService: AppService) { }

  @Get()
    getHello(): string {
        return this.appService.getHello();
    }
}

As you can tell the constructor and getHello function got indented properly but the decorator did not. In addition, going into the file and making edits, I still get a tab size of 2.

How do I get this file to adhere to a tab-size of 4?

As a reminder, this is working for all other files EXCEPT for this one.

Upvotes: 2

Views: 4480

Answers (1)

Michael G
Michael G

Reputation: 6745

Try forcing the tab width in the editor as well:

settings.json

"[typescript]": {
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
}

Upvotes: 4

Related Questions