How to create a custom lint rule for Markdown and MDX using remark and ESLint

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The open-source backend cloud platform
  • InfluxDB - Collect and Analyze Billions of Data Points in Real Time
  • Onboard AI - Learn any GitHub repo in 59 seconds
  • Sonar - Write Clean JavaScript Code. Always.
  • Revelo Payroll - Free Global Payroll designed for tech teams
  • Gatsby

    The best React-based framework with performance, scalability and security built in.

    In the last years, modern web development architectures based on client-side JavaScript, reusable APIs and prebuilt Markup (JAMstack), and new web frameworks (Gatsby, Gridsome or Next.js), have gained increased popularity amongst developers, and even allowed us to start using JSX within our Markdown (MDX).

  • mdx

    Markdown for the component era

    In the last years, modern web development architectures based on client-side JavaScript, reusable APIs and prebuilt Markup (JAMstack), and new web frameworks (Gatsby, Gridsome or Next.js), have gained increased popularity amongst developers, and even allowed us to start using JSX within our Markdown (MDX).

  • Appwrite

    Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

  • Gridsome

    ⚡️ The Jamstack framework for Vue.js

    In the last years, modern web development architectures based on client-side JavaScript, reusable APIs and prebuilt Markup (JAMstack), and new web frameworks (Gatsby, Gridsome or Next.js), have gained increased popularity amongst developers, and even allowed us to start using JSX within our Markdown (MDX).

  • Next.js

    The React Framework

    In the last years, modern web development architectures based on client-side JavaScript, reusable APIs and prebuilt Markup (JAMstack), and new web frameworks (Gatsby, Gridsome or Next.js), have gained increased popularity amongst developers, and even allowed us to start using JSX within our Markdown (MDX).

  • blog-posts

    Fork this repository with the complete tutorial, if you don't want to start from scratch.

  • remark-lint

    plugins to check (lint) markdown code style

    With our dependencies all installed, we can start creating a .remarkrc.js, which will contain all the plugins that will be consumed by the remark processor. For details about alternative or advanced configurations, please refer to Configuring remark-lint.

  • remark

    markdown processor powered by plugins part of the @unifiedjs collective (by remarkjs)

    remark-lint: a plugin to lint markdown built on remark: (a markdown processor).

  • InfluxDB

    Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.

  • mdast

    Markdown Abstract Syntax Tree format

    Because we will be inspecting a mdast, which is a markdown abstract syntax tree built upon unist, we can take advantage of the many existing unist utilities to inspect our tree's nodes.

  • vfile

    Virtual file format for text processing used in @unifiedjs

    file (required): a virtual file format.

  • unist

    Universal Syntax Tree used by @unifiedjs

    Because we will be inspecting a mdast, which is a markdown abstract syntax tree built upon unist, we can take advantage of the many existing unist utilities to inspect our tree's nodes.

  • unist-util-visit

    utility to visit nodes

    For this example, we will use unist-util-visit to recursively inspect all the image nodes, and unist-util-generated to ensure we are not inspecting nodes that we have generated ourselves and do not belong to the doc.md.

  • unist-util-generated

    utility to check if a node is generated

    For this example, we will use unist-util-visit to recursively inspect all the image nodes, and unist-util-generated to ensure we are not inspecting nodes that we have generated ourselves and do not belong to the doc.md.

  • ESLint

    Find and fix problems in your JavaScript code.

    ESLint: the most popular tool for linting JavaScript code.

  • eslint-mdx

    ESLint Parser/Plugin for MDX

    ESLint MDX: an ESLint plugin/parser for MDX files.

  • Onboard AI

    Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts