Indentation in decorators not working properly

[lanthaler]

What version of TypeScript are you using?
2.6.2

What version of typescript-eslint-parser are you using?
12.0.0

What code were you trying to parse?

import { Component, Vue } from 'vue-property-decorator'
import TForm from '@components/t-form.vue'

@Component({
  components: {
    't-form': TForm
  }
})
export default class extends Vue {

What did you expect to happen?
No linting errors

What happened?
Got the following errors

import { Component, Vue } from 'vue-property-decorator'
import TForm from '@components/t-form.vue'

@Component({
  components: {
    't-form': TForm    <--- *** Expected indentation of 2 spaces but found 4  indent ***
  }
})    <--- *** Expected indentation of 2 spaces but found 0  indent ***
export default class extends Vue {

[hartmut-co-uk]

+1

[bkotos]

+1

[phyllisstein]

This persists through v14.0.0 with TypeScript v2.8.0-rc. Here is another sample of incorrectly flagged code:

@connect(
  (state: State) => ({
    appBarVisible: state.ui.appBarVisible,
  }),
)
class App extends React.Component<Props> {

This should not throw an error; instead, ESLint reports:

warning: Expected indentation of 4 spaces but found 2 (indent) at src/app/routes/app/app.tsx:19:1:
  17 |   (state: State) => ({
  18 |     appBarVisible: state.ui.appBarVisible,
> 19 |   }),
     | ^
  20 | )
  21 | class App extends React.Component<Props> {
  22 |   public shouldComponentUpdate(nextProps: Props): boolean {

This may or may not be related to broader issues I've noticed with the indent rule (q.v. #452).

[nandin-borjigin]

1. Any update on this?
2. Any workaround for this?

[JamesHenry]

A custom rule will need to be created in the plugin to handle this. It would be fantastic if one of the people affected by this issue could contribute to it.

As an aside, I am personally very against using a linter to validate formatting. IMO, formatting should be deterministic and automatic and I highly recommend giving Prettier a go if you haven't already. It is actually this parser which powers Prettier's TypeScript support! 😄

[mcMickJuice]

@JamesHenry do you mean to say that a rule like indent shouldn't be the concern of a linter?

[zuzusik]

anyone was able to solve this somehow?

[zuzusik]

Ok, folks, I've come up with modified indent rule which completely ignores decorators:

'use strict';

/**
 * This rule filters out indent errors inside of decorators as original rule gives a lot of false positives
 * Details: https://github.com/eslint/typescript-eslint-parser/issues/438
 */

const ruleComposer = require('eslint-rule-composer'),
      eslint = require('eslint'),
      indentRule = new eslint.Linter().getRules().get('indent'),
      decoratorStartRegEx = /^@[a-zA-Z]+\(/;

module.exports = ruleComposer.filterReports(
  indentRule,
  (problem, metadata) => {
    let codeString = '',
        token = metadata.sourceCode.getTokenBefore(problem.node),
        insideOfDecorator = false;

    while (token && !insideOfDecorator) {
      codeString = token.value + codeString;
      insideOfDecorator = decoratorStartRegEx.test(codeString) && !codeString.includes(')');
      token = metadata.sourceCode.getTokenBefore(token);
    }

    return !insideOfDecorator;
  }
);

you'll need to install eslint-rule-composer, save this under desired name (e.g. indent-patched.js) into some directory, specify this directory as rulesDir when running eslint and use indent-patched rule in .eslintrc file instead of indent

that's it

I'm not sure if this is a good candidate to add to typescript plugin, as it doesn't control indentation - just ignores it

[archseer]

I think it should be fine to disable this rule; eslint should handle linting code, not formatting. I disabled the rule and use prettier or some similar alternative after eslint to handle indentation.

…

On Thu, 23 Aug 2018 at 17:39, Viktor Zozuliak ***@***.***> wrote: anyone was able to solve this somehow? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#438 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABTy9vv5h4Vqzl95y7UF-c9stY_iM8Dsks5uTsy3gaJpZM4RvUrL> .

[zuzusik]

eslint should handle linting code, not formatting.

@archseer this is a bit of misconception

https://eslint.org/docs/about/ says

Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.

[archseer]

@zuzusik to each their own, I'd rather use eslint to catch problematic patterns than enforce indentation if git pre-commit hooks or https://editorconfig.org/ can do the same