Vue-CLI with 4 space identation

Question

I am totally new to Vue.

I want to use the CLI and I want to have 4 space indentation (with typescript and vuex). But after 24 hours of struggling I am no closer to getting anything working. If it is impossible let me know too.

I thought that tslint was the way to go, but could not find a solution. So I tried eslint and 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

 module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
    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]
    },
    parserOptions: {
        parser: "typescript-eslint-parser"
    }
};

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/x/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.

Corona

I hate these weird errors (Because of extra white one space or tab the entire app not compile). My solution is to remove this buggy plugin (Maybe in the future they fix this idea): npm remove @vue/cli-plugin-eslint – Darell

Answer 1

As described in the tslint doc, the indent rule doesnt fix wrong amount of indentation characters, it only fixes the character type, this means that it can convert tabs to spaces and vice versa, but it doesnt fix 4 spaces to 2 spaces

NOTE: auto-fixing will only convert invalid indent whitespace to the desired type, it will not fix invalid whitespace sizes.

https://palantir.github.io/tslint/rules/indent/

So yeah, you'd have to go with eslint. I dont see you full eslintrc file, but I think that the main problem may be this line: indent: ["error", 4]. Try removing that.

This eslint config is working for me:

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

And run with npm run lint

Sendal

Thanks so much for your help. I had seen that tslint would not help. I tried you change to eslintrc but I still get the messages saying that errors have been found, but with no fixes applied – Corona