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
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • 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).

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • 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

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • 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.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
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