How to setup linting and formatting for VitePress?

Question

I have a VitePress project and would like to use Eslint and Prettier to lint and format code files and especially markdown files. I started with the following scripts and dependencies

{
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "lint": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix",
    "format": "prettier . --check",
    "format:fix": "prettier . --write"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "5.56.0",
    "@typescript-eslint/parser": "5.56.0",
    "eslint": "8.36.0",
    "eslint-config-prettier": "8.8.0",
    "prettier": "2.8.7",
    "vite-plugin-eslint": "1.8.1",
    "vitepress": "1.0.0-alpha.65"
  }
}

The prettierrc.json file contains {}. The .eslintrc.cjs file contains

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
};

As a sidenote, I know, the plugins for .vue files are missing, but since I don't havy any customizations with Vue yet I don't need it.

Running npm run format:fix seems to format my files ( markdown too ) but when running npm run lint:fix I get the following error

No files matching the pattern "." were found. Please check for typing mistakes in the pattern.

although it should find some files. At least the config.ts file in the /docs/.vitepress folder.

Do you have any ideas what's wrong or missing?

Are there any guides on how to setup Eslint and Prettier for VitePress projects?

Answer 1

I can't speak to VitePress in general but I can tell you how to lint Markdown using eslint:

• Add the package eslint-plugin-markdownlint
• Add the following to .eslintrc.cjs:

module.exports = {
  overrides: [
    {
      extends: ["plugin:markdownlint/recommended"],
      files: ["*.md"],
      parser: "eslint-plugin-markdownlint/parser"
    }
  ]
}

With this configuration you will want to ignore Markdown files with Prettier by adding the following to .prettierignore:

**/*.md