具有 4 个空格缩进的 Vue-CLI

Posted 2023-02-23

【中文标题】具有 4 个空格缩进的 Vue-CLI

【英文标题】：Vue-CLI with 4 space identation

【发布时间】：2019-03-13 10:45:38

【问题描述】：

我对 Vue 完全陌生。

我想使用 CLI，并且我想要 4 个空格缩进（使用 typescript 和 vuex）。但是经过 24 小时的挣扎，我离让任何事情都更近了一步。如果不可能，也请告诉我。

我认为 tslint 是要走的路，但找不到解决方案。所以我尝试了 eslint 并将其添加到 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"
  

那是我有的 eslintrc

 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"
    
;

然后当我跑步时

$ 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.

【问题讨论】：

我讨厌这些奇怪的错误（因为多余的空格或制表符导致整个应用程序无法编译）。我的解决方案是删除这个有问题的插件（也许将来他们会修复这个想法）：npm remove @vue/cli-plugin-eslint

【参考方案1】：

如 tslint 文档中所述，缩进规则并没有修复错误的缩进字符数量，它只修复了字符类型，这意味着它可以将制表符转换为空格，反之亦然，但它没有将 4 个空格修复为 2 个空格

注意：自动修复只会将无效的缩进空白转换为所需的类型，它不会修复无效的空白大小。

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

所以是的，你必须使用 eslint。我没有看到完整的 eslintrc 文件，但我认为主要问题可能是这一行：indent: ["error", 4]。尝试删除它。

这个 eslint 配置对我有用：

    "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"
    

然后使用npm run lint 运行

【讨论】：

非常感谢您的帮助。我已经看到 tslint 无济于事。我尝试将您更改为 eslintrc，但我仍然收到消息说已找到错误，但未应用任何修复