在恼人的 vue 的 html 格式上禁用 eslint-prettier

Question

<template>
    <div class="d-flex flex-grow-1" onclick="console.log('testing...');" style="display: block;">
        HOW CAN I LEAVE ME CODE LIKE THIS!!!!?
    </div>
</template>

<template>
    <div
        class="d-flex flex-grow-1"
        onclick="console.log('testing...');"
        style="display: block;"
    >
        eslint-prettier KEEPS CHANGING MY CODE LIKE THIS...    SOOOOOOOOO ANNOYING!!!
    </div>
</template>

---

.eslintrc.json

{
    "root": true,
    "env": {
        "node": true,
        "es6": true,
        "browser": true
    },
    "parser": "babel-eslint",
    "plugins": [],
    "extends": [
        "eslint:recommended"
    ],
    "overrides": [
        {
            "files": [
                "**/*.vue"
            ],
            "parser": "vue-eslint-parser",
            "parserOptions": {
                "parser": "@typescript-eslint/parser"
            },
            "plugins": [],
            "extends": [
                "plugin:@typescript-eslint/recommended",
                "prettier/@typescript-eslint",
                "plugin:vue/vue3-strongly-recommended",
                "prettier/vue",
                "plugin:prettier/recommended"
            ]
        }
    ]
}

package.json

  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "prettier": "^2.0.4",
  }

设置.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "vue"
  ]
}

---

我在 VS Code 上安装了vetur和eslint 。 我对这组配置工作得很好。 但是，这种换行设置非常烦人。 任何人都可以就我如何禁用 vue 的 html 的换行甚至禁用 vue 的 html 的格式提供建议？

提前致谢。

Answer 1

"rules": {
  "max-len": ["error", 140, 2, {
     ignoreComments: false,
     ignoreRegExpLiterals: true,
     ignoreStrings: false,
     ignoreTemplateLiterals: false,
  }],
   "vue/max-attributes-per-line": "off"
}

将此添加到您的规则中，在您的.eslintrc文件中，您可以根据自己的喜好调整数字 140，以便它不会将文件包装为默认的 80 个字符。

Answer 2

我看到您正在使用 Prettier 作为代码格式化程序：在 Prettier 配置中：.prettierrc（如果不存在则创建它）为打印宽度设置 120 或 180。 默认值为 80。

{
  "printWidth": 120
}

您也可以在此处覆盖其他选项。 请参阅文档更漂亮的选项