Add option for 4 space indentation

[simonh1000]

As it seems to be almost impossible to change this afterwards eslint/eslint#7456 (comment) it would be great to be able to create files with more identation, for those that want it

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[LinusBorg]

You're linking to a comment from 2 years ago, commenting on usage of an eslint-plugin that we don't use.

Judging from the comment your linked to, your problem seems with indentation in templates?

eslint-plugin-vue has rules for this that should be --fix-able:

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-indent.md
https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md

[simonh1000]

thanks - and apologies for the poor original issue. Yesterday was my first day with Vue and I spent the whole time to trying to get 4 spaces. Lots of people offered ideas on discord, but nothing worked.

Based on your suggestion, I added this to package.json

  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.4",
    "@vue/cli-plugin-pwa": "^3.0.4",
    "@vue/cli-plugin-typescript": "^3.0.4",
    "@vue/cli-service": "^3.0.4",
    "@vue/eslint-config-prettier": "^3.0.4",
    "@vue/eslint-config-typescript": "^3.0.4",
    "eslint": "^5.6.1",
    "eslint-plugin-vue": "^5.0.0-beta.3",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.17"
  }

Then is eslintrc I have

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "vue/script-indent": ["error", 4, { "baseIndent": 1 }],
    indent: ["error", 4]
  },

then when I run

$ npx eslint --fix *.js
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-eslint-parser.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: ~3.0.1

YOUR TYPESCRIPT VERSION: 3.1.1

Please only submit bug reports when using the officially supported version.

=============

/Users/simonhampton/code/sync/vue/restos2/postcss.config.js
  2:1  error  Expected indentation of 4 spaces but found 2  indent
  3:1  error  Expected indentation of 8 spaces but found 4  indent
  4:1  error  Expected indentation of 4 spaces but found 2  indent

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

but the problem is that no files ever get changed.

That was why I asked for an option to do it automatically.

[LinusBorg]

That might make it clearer.

Now if you follow the rules and actually provide a run able reproduction I can reopen the issue.

For example, it would have been 'em sly helpful to know that you chose typescript for your project.

What we can do is try and find a way to make --fix work for your scenario - because we don't have any other tool to dynamically change indentation, so providing an "option" won't solve your problem.

[simonh1000]

The repro is

• create a new app with cli (choose ts, vuex, eslint)
• edit the files as above and run npm install
• npx eslint --fix *.js, or npx eslint --fix src/*.ts

Expect: files matching the target to be changed on disk
Result:

$ npx eslint --fix src/*.ts
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-eslint-parser.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: ~3.0.1

YOUR TYPESCRIPT VERSION: 3.1.1

Please only submit bug reports when using the officially supported version.

=============

/Users/simonhampton/code/sync/vue/restos2/src/main.ts
   9:1  error  Expected indentation of 4 spaces but found 2  indent
  10:1  error  Expected indentation of 4 spaces but found 2  indent

/Users/simonhampton/code/sync/vue/restos2/src/registerServiceWorker.ts
   6:1  error  Expected indentation of 4 spaces but found 2   indent
   7:1  error  Expected indentation of 8 spaces but found 4   indent
   8:1  error  Expected indentation of 12 spaces but found 6  indent
   9:1  error  Expected indentation of 16 spaces but found 8  indent
  11:1  error  Expected indentation of 12 spaces but found 6  indent
  12:1  error  Expected indentation of 8 spaces but found 4   indent
  13:1  error  Expected indentation of 8 spaces but found 4   indent
  14:1  error  Expected indentation of 12 spaces but found 6  indent
  15:1  error  Expected indentation of 8 spaces but found 4   indent
  16:1  error  Expected indentation of 8 spaces but found 4   indent
  17:1  error  Expected indentation of 12 spaces but found 6  indent
  18:1  error  Expected indentation of 8 spaces but found 4   indent
  19:1  error  Expected indentation of 8 spaces but found 4   indent
  20:1  error  Expected indentation of 12 spaces but found 6  indent
  21:1  error  Expected indentation of 16 spaces but found 8  indent
  22:1  error  Expected indentation of 12 spaces but found 6  indent
  23:1  error  Expected indentation of 8 spaces but found 4   indent
  24:1  error  Expected indentation of 8 spaces but found 4   indent
  25:1  error  Expected indentation of 12 spaces but found 6  indent
  26:1  error  Expected indentation of 8 spaces but found 4   indent
  27:1  error  Expected indentation of 4 spaces but found 2   indent

/Users/simonhampton/code/sync/vue/restos2/src/store.ts
  7:1  error  Expected indentation of 4 spaces but found 2  indent
  8:1  error  Expected indentation of 4 spaces but found 2  indent
  9:1  error  Expected indentation of 4 spaces but found 2  indent

✖ 26 problems (26 errors, 0 warnings)
  26 errors and 0 warnings potentially fixable with the `--fix` option.

Nothing changed on disk

MacOS 10.14, Node v10.10.0

[simonh1000]

As discussed on discord - here are the files resulting from vue create (basically typescript plus some options)
only file changed is eslintrc
i've replaced README with some of the commands I've tried
I think we've already established that tslint cannot help (but see also https://stackoverflow.com/questions/52707751/vue-cli-with-4-space-identation)

Archive.zip

[mrodal]

I literally did just this:

1. Uncompressed the zip file
2. npm install
3. Added the following config to the package.json (what I proposed in stackoverflow)

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "rules": {
      "vue/script-indent": ["error",4,{"baseIndent": 1}]
    },
    "parserOptions": {
      "parser": "typescript-eslint-parser"
    }
  }

4. npm run lint

And I got the files fixed to 4 spaces

[simonh1000]

Aha. I tried again and compared your changes to what the cli provides, and the key points are
"vue/script-indent": ['error', 4, { 'baseIndent': 1 }] and
"eslint:recommended", instead of '@vue/standard',

It is the second change that enables npm run lint to run AND fix things. Hope that helps