Help getting mdx file support in VS Code

[ainsleybernard]

Hello,

I have a vue.js project with the storybook addon. I am trying to write a story using the Docs addon which allows you to write stories in .mdx, I am having trouble getting linting to work in vs code.

Thanks in advance and any help would be much appreciated!

I am using this sample project found here https://github.com/vueschool/storybook-fundamentals/tree/master

The sample project has "eslint": "^6.7.2" installed and I have installed "eslint-plugin-mdx": "^1.8.2"

I have also included a bunch of the MDX VS code extension (MDX, VSCode MDX, MDX Inline).

My ESlint Config looks like this

{
  "extends": ["plugin:mdx/recommended"]
}

And my VS code settings look like this

      "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "eslint.options": {
            "extensions": [
                ".js",
                ".jsx",
                ".md",
                ".mdx",
                ".ts",
                ".tsx"
            ]
        }

but im getting no linting at all, any help would be appreciated.

[ChristianMurphy]

@ainsleybernard a few questions:

1. do lint rules work if you call eslint from the CLI, rather than from the VSCode IDE?
2. do you have a global install of eslint that vscode may be falling back to?
3. the usage instructions for earlier versions work? https://github.com/mdx-js/eslint-mdx#usage

[ainsleybernard]

I removed the other file eslint was trying to use. and in the project I have the following, is this your suggestion?

{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:mdx/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2015,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
},
"overrides": [
    {
        "files": "**/*.+(md|mdx)",
        "extends": [
            "plugin:mdx/recommended"
        ]
    }
]
}

[ChristianMurphy]

{
  "root": true,
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 2015,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "overrides": [
    {
      "files": "**/*.+(md|mdx)",
      "extends": ["plugin:mdx/recommended"]
    }
  ]
}

[ainsleybernard]

hmm get this output

[ChristianMurphy]

the first message looks like it relates to mdx-js/eslint-mdx#229
make sure you have eslint-plugin-react installed.

[ainsleybernard]

Wow, I thought about installing eslint-plugin-react for a second but was like 'nah' cant be lol.
As you predicted resolved my first issue when installing it. Had to also set the settings in the config too for React.

in the end I needed eslint config looked like this in my vue.js project with storybook addon installed.

    "root": true,
    "env": {
      "node": true
    },
    "extends": [
            "eslint:recommended", "plugin:mdx/recommended", "plugin:react/recommended"

    ],
  "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
     "settings": {
        "react": {
                "version": "detect"
        }

    }

for reference:

[ainsleybernard]

@ChristianMurphy thanks a tone!!! lol, this issue was making me go crazy lol