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

setting.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
}

您也可以在此处覆盖其他选项。查看文档 Prettier Options

在烦人的vue的html格式上禁用带有vue的eslint更漂亮

2 个答案: