How can I make eslint-mdx run autoFixOnSave on Vim?

[isenaz]

I'm trying to setup eslint.autoFixOnSave on mdx files in vim, but I cannot make it work. Can please someone help me out in this? Or is there no way to make it work on vim currently?

What I want to do

• Make autoFixOnSave work on mdx file in vim

What I'm seeing now

• In vim, no autoFix running, even no lint error being shown
• eslint . --ext mdx does show lint error properly, meaning plugin itself is working

What I have done

• In my project (Next.js)
  • npm install eslint-mdx eslint-plugin-mdx
    • This made eslint . --ext mdx to work
  • (I already have eslint configuration working on ts/tsx files, so I will skip describing that)
• In my vim
  • I have coc.nvim and coc-eslint installed, so setup coc-settings.json as written below.
  • install jxnblk/vim-mdx-js
    • This made syntax highlighting work

Current environment and configurations

Project

packge.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    // ... some other additional extensions I added, which I assume unrelated
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-webpack5": "^6.5.10",
    "@storybook/manager-webpack5": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "babel-loader": "^8.2.5",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-mdx": "^2.0.2",
    "eslint-plugin-mdx": "^2.0.2",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-storybook": "^0.6.4",
    "prettier": "^2.7.1",
    "typescript": "4.7.4"
    // ... some other additional extensions I added, which I assume unrelated
  }
}

eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended",
    "plugin:storybook/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "overrides": [
    {
      "files": [
        "**/*.mdx"
      ],
      "parser": "eslint-mdx",
      "extends": [
        "plugin:mdx/recommended"
      ]
    }
  ]
}

Vim

coc-settings.json

{
  "coc.preferences.formatOnSaveFiletypes": [
    "json",
    "css",
    "markdown",
    "js",
    "mdx"
  ],
  "eslint.validate": [
    "markdown",
    "mdx",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "mdx"
  ],
  "eslint.autoFixOnSave": true,
  "eslint.options": {
    "extensions": [
      "mdx"
    ]
  }
}

Other Infomation

• I tried Visual Studio Code extension for MDX, and that worked fine in VSCode. I would like to do the same thing in vim.

[ChristianMurphy]

You may want to look into https://github.com/dense-analysis/ale
Which integrates ESLint, remark-lint, and any language server compatible tool, with vim and neovim.