vue.js - Eslint errors with vuejs and storybook

Question

I am using vuejs with storybook.

When I run npm storybook:serve, I get the next errors.

But, I am not finding where my vscode is wrong.

//eslint error

F: Programasvuejssuperviz_testesv - challengesrcstoriesindex.stories.js
  1:1  error  Expected linebreaks to be 'CRLF' but found 'LF'                  linebreak-style
  1:1  error  Too many blank lines at the beginning of file. Max of 0 allowed  no-multiple-empty-lines
  2: 1  error  Expected indentation of 0 spaces but found 6                     indent

//vscode settings

{
    "editor.formatOnType": true,
    "window.zoomLevel": 0,
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "search.exclude": {
      "**/dist": true
    },
    "eslint.format.enable": true,
    "editor.formatOnSave": true,
    "vetur.ignoreProjectWarning": true,
    "json.maxItemsComputed": 9000
  }
  

// .eslint.rc config

....
....
rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "linebreak-style": 0,
        quotes: [2, "double"],
        "no-multiple-empty-lines": ["error", { max: 2, maxBOF: 0, maxEOF: 0 }],
        "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
        "comma-dangle": ["error", "never"],
        "arrow-parens": [2, "as-needed"]
},

//my vs code

import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import BaseButton from "../components/BaseButton.vue";

export default {
  component: BaseButton,
  title: "Form/Button",
  decorators: [() => "<section ><story/></section>", withKnobs]
};
export const withText = () => ({
  props: {
    text: { default: text("Button Text", "Botoncito ") }
  },

  render() {
    return <BaseButton onClick={action("On click!")} text={this.text}></BaseButton>;
  }
});

export const withSlot = () => ({
  render() {
    return (
      <BaseButton>
        <span className="text-xl">Slot</span>
      </BaseButton>
    );
  }
});

withText.story = {
  decorators: [() => "<section><story/></section>"],
  argTypes: {
    text: { control: { type: "range", min: 0, max: 20 } },
    isLoading: { control: { type: "boolean", min: 0, max: 20 } }
  }
};

question from:https://stackoverflow.com/questions/65889550/eslint-errors-with-vuejs-and-storybook

Answer 1

Waitting for answers