How to get mdx file support (linting) in VS Code?

user_4190779 0
Viewed 2862

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. I have installed "eslint-plugin-mdx": "^1.8.2"

enter image description here

I have the following extensions installed

enter image description here

My ES lint config looks like this, as suggested by https://github.com/mdx-js/eslint-mdx

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

It seems like vs code is picking up the mdx file but no linting seems to be happening, I'm I doing something wrong?

enter image description here

Also I have added the following to VS Code settings but it does not seem to be doing much enter image description here

mdxjs storybook eslint vue.js visual-studio-code
1 Answers

If this helps anyone. there is a dependency on eslint-plugin-react for eslint-mdx to work.

check https://github.com/mdx-js/eslint-mdx/issues/229

my eslint config looks like this for reference.

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

    }
user_41907790
Related