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

• Gatsby

  356 55,000 9.4 JavaScript

  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

  99 16,788 8.7 JavaScript

  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

  surveyjs.io sponsored

  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.

  

• Gridsome

  37 8,525 0.0 JavaScript

  ⚡️ 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

  2,039 120,313 10.0 JavaScript

  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

  1 0 0.0 JavaScript

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

• remark-lint

  3 911 7.7 JavaScript

  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

  42 7,187 6.9 JavaScript

  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).

• WorkOS

  workos.com sponsored

  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.

  

• mdast

  5 992 5.2

  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

  1 443 5.7 JavaScript

  Virtual file format for text processing used in @unifiedjs

  

file (required): a virtual file format.

• unist

  3 825 4.4

  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

  2 245 6.0 JavaScript

  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

  1 4 5.5 JavaScript

  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

  378 24,231 9.7 JavaScript

  Find and fix problems in your JavaScript code.

  

ESLint: the most popular tool for linting JavaScript code.

• eslint-mdx

  2 252 7.7 TypeScript

  ESLint Parser/Plugin for MDX

  

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

• InfluxDB

  www.influxdata.com sponsored

  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.

  

Suggest a related project