div上的eslint和更漂亮的break样式标签

问题描述

我已经用eslint建立了一个Nuxt项目。 VSCode自动格式化我的代码

但是我不明白为什么它抱怨我的div上的样式标签

<div style="background-image: url('/pic.svg');background-size: 800px auto;background-position: 50% -120px;"></div>

错误: 将background-image:·url('/pic.svg');background-size:·800px·auto;background-position:·50%·-120px;替换为⏎··········background-image:·url('/pic.svg');⏎··········background-size:·800px·auto;⏎··········background-position:·50%·-120px;⏎········ eslintprettier / prettier

并将其转换为:

 <div
        style="
          background-image: url('/pic.svg');
          background-size: 800px auto;
          background-position: 50% -120px;
        "
      ></div>

浏览器不再理解样式标签,而是抱怨格式错误。 如何禁用它? "plugin:prettier/recommended",负责重新格式化。

Eslint配置:

module.exports = {
  root: true,env: {
    node: true,browser: true,},extends: [
    // https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-2-x
    "plugin:vue/recommended",// https://eslint.org/docs/rules/
    "eslint:recommended",// https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
    "plugin:prettier/recommended",// https://github.com/prettier/eslint-config-prettier#eslint-config-prettier
    "prettier","prettier/vue",],rules: {
    "vue/component-name-in-template-casing": ["error","PascalCase"],"vue/no-v-html": 0,"no-console": process.env.NODE_ENV === "production" ? "error" : "off","no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",globals: {
    $nuxt: true,parserOptions: {
    parser: "babel-eslint",};

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)