feat: use eslint-plugin-markdown as processor! (#283)

Author: JounQin

.eslintrc.js

@@ -9,4 +9,35 @@ module.exports = {
     // `strictNullChecks` is required
     '@typescript-eslint/no-unnecessary-condition': 0,
   },
+  settings: {
+    node: {
+      allowModules: ['@babel/types', 'estree', 'unist'],
+    },
+  },
+  overrides: [
+    {
+      files: '*.ts',
+      rules: {
+        '@typescript-eslint/consistent-type-imports': 2,
+      },
+    },
+    {
+      files: '**/*.{md,mdx}/**',
+      rules: {
+        'prettier/prettier': 0,
+        'unicorn/filename-case': 0,
+      },
+    },
+    {
+      files: '*.{md,mdx}',
+      // related to https://github.com/eslint/eslint/issues/14207
+      rules: {
+        'prettier/prettier': 0,
+        'unicorn/filename-case': 0,
+      },
+      settings: {
+        'mdx/code-blocks': true,
+      },
+    },
+  ],
 }

README.md

@@ -22,7 +22,8 @@
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org)
 [![codechecks.io](https://raw.githubusercontent.com/codechecks/docs/master/images/badges/badge-default.svg?sanitize=true)](https://codechecks.io)
 
-> [ESLint][] Parser/Plugin for [MDX][], helps you lint all ES syntaxes excluding `code` block of course.
+> [ESLint][] Parser/Plugin for [MDX][], helps you lint all ES syntaxes.
+> Linting `code` blocks can be enabled with `mdx/code-blocks` setting too!
 > Work perfectly with `eslint-plugin-import`, `eslint-plugin-prettier` or any other eslint plugins.
 > And also can be integrated with [remark-lint][] plugins to lint markdown syntaxes.
 
@@ -73,9 +74,13 @@ npm i -D eslint-plugin-mdx
 
    1. If you're using `eslint >= 6.4.0`, just add:
 
-      ```json
+      ```jsonc
       {
-        "extends": ["plugin:mdx/recommended"]
+        "extends": ["plugin:mdx/recommended"],
+        // optional, if you want to lint code blocks at the same time
+        "settings": {
+          "mdx/code-blocks": true
+        }
       }
       ```
 
@@ -84,6 +89,10 @@ npm i -D eslint-plugin-mdx
       ```jsonc
       {
         "extends": ["plugin:mdx/recommended"],
+        // optional, if you want to lint code blocks at the same time
+        "settings": {
+          "mdx/code-blocks": true
+        },
         "overrides": [
           {
             "files": ["*.md"],
@@ -100,6 +109,10 @@ npm i -D eslint-plugin-mdx
           {
             "files": ["*.mdx"],
             "extends": ["plugin:mdx/overrides"]
+          },
+          {
+            "files": "**/*.{md,mdx}/**",
+            "extends": "plugin:mdx/code-blocks"
           }
         ]
       }
@@ -112,6 +125,10 @@ npm i -D eslint-plugin-mdx
 
       module.exports = {
         extends: ['plugin:mdx/recommended'],
+        // optional, if you want to lint code blocks at the same time
+        settings: {
+          'mdx/code-blocks': true,
+        },
         overrides: [
           {
             files: ['*.md'],
@@ -125,25 +142,27 @@ npm i -D eslint-plugin-mdx
               ],
             },
           },
-          Object.assign(
-            {
-              files: ['*.mdx'],
-            },
-            configs.overrides,
-          ),
+          {
+            files: ['*.mdx'],
+            ...configs.overrides,
+          },
+          {
+            files: '**/*.{md,mdx}/**',
+            ...configs.codeBlocks,
+          },
         ],
       }
       ```
 
-2. Make sure ESLint knows to run on `.mdx` files:
+2. Make sure ESLint knows to run on `.md` or `.mdx` files:
 
    ```sh
-   eslint . --ext js,mdx
+   eslint . --ext js,md,mdx
    ```
 
 ## Parser Options
 
-1. `parser` (`string | ParserConfig | ParserFn`): Custom parser for ES syntax is supported, although `@typescript-eslint/parser` or `babel-eslint` will be detected automatically what means you actually do not need to do this:
+1. `parser` (`string | ParserConfig | ParserFn`): Custom parser for ES syntax is supported, although `@typescript-eslint/parser` or `@babel/eslint-parser` or `babel-eslint` will be detected automatically what means you actually do not need to do this:
 
    ```json
    {
@@ -166,18 +185,35 @@ _Fixable_: HTML style comments in jsx block is invalid, this rule will help you
 
 ### mdx/no-unescaped-entities
 
-Inline JSX like `Inline <Component />` is supported by [MDX][], but rule `react/no-unescaped-entities` from [eslint-plugin-react][] is incompatible with it, `mdx/no-unescaped-entities` is the replacement.
+Inline JSX like `Inline <Component />` is supported by [MDX][], but rule `react/no-unescaped-entities` from [eslint-plugin-react][] is incompatible with it, `mdx/no-unescaped-entities` is the replacement, so make sure that you've turned off the original `no-unescaped-entities` rule.
 
 ### mdx/no-unused-expressions
 
-[MDX][] can render `jsx` block automatically without exporting them, but [ESLint][] will report `no-unused-expressions` issue which could be unexpected, this rule is a replacement of it, so make sure that you've turned off the original `no-unused-expressions` rule.
+[MDX][] can render `jsx` block automatically without exporting them, but [ESLint][] will report `no-unused-expressions` issue which could be unexpected, this rule is the replacement, so make sure that you've turned off the original `no-unused-expressions` rule.
 
 ### mdx/remark
 
 _possible fixable depends on your remark plugins_:
 
 Integration with [remark-lint][] plugins, it will read [remark's configuration](https://github.com/remarkjs/remark/tree/master/packages/remark-cli#remark-cli) automatically via [cosmiconfig][]. But `.remarkignore` will not be respected, you should use `.eslintignore` instead.
 
+If you want to disable or change severity of some related rules, it won't work by setting rules in eslint config like `'remark-lint-no-duplicate-headings': 0`, you should change your remark config instead like following:
+
+```jsonc
+{
+  "plugins": [
+    "@1stg/remark-config",
+    // change to error severity, notice `[]` is required
+    ["lint-no-duplicate-headings", [2]],
+    // disable following plugin
+    [
+      "lint-no-multiple-toplevel-headings",
+      [0] // or false
+    ]
+  ]
+}
+```
+
 ## Prettier Integration
 
 If you're using [remark-lint][] feature with [Prettier][] both together, you can try [remark-preset-prettier][] which helps you to _turn off all rules that are unnecessary or might conflict with [Prettier][]_.

package.json

@@ -13,6 +13,7 @@
     "build": "run-p build:*",
     "build:r": "r -p",
     "build:ts": "tsc -b",
+    "clean": "rimraf packages/*/{lib,*.tsbuildinfo} node_modules/@1stg/eslint-config/node_modules",
     "lint": "run-p lint:*",
     "lint:es": "cross-env PARSER_NO_WATCH=true eslint . --cache --ext js,md,ts -f friendly",
     "lint:ts": "tslint -p . -t stylish",
@@ -23,11 +24,11 @@
     "typecov": "type-coverage"
   },
   "devDependencies": {
-    "@1stg/lib-config": "^1.1.9",
-    "@1stg/tslint-config": "^1.1.0",
+    "@1stg/lib-config": "^1.2.0",
+    "@1stg/tslint-config": "^1.2.0",
     "@types/eslint": "^7.2.7",
     "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.33",
+    "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
     "@types/rebass": "^4.0.8",
     "@types/unist": "^2.0.3",
@@ -54,13 +55,16 @@
     ]
   },
   "eslintIgnore": [
-    "**/fixtures/**",
     "coverage",
+    "fixtures",
     "lib",
     "CHANGELOG.md",
     "!/.*.js"
   ],
   "jest": {
+    "setupFiles": [
+      "eslint/lib/linter/linter"
+    ],
     "collectCoverage": true,
     "coverageThreshold": {
       "global": {
@@ -90,7 +94,7 @@
     ]
   },
   "typeCoverage": {
-    "atLeast": 99.76,
+    "atLeast": 99.7,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,

packages/eslint-mdx/README.md

@@ -22,7 +22,8 @@
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org)
 [![codechecks.io](https://raw.githubusercontent.com/codechecks/docs/master/images/badges/badge-default.svg?sanitize=true)](https://codechecks.io)
 
-> [ESLint][] Parser/Plugin for [MDX][], helps you lint all ES syntaxes excluding `code` block of course.
+> [ESLint][] Parser/Plugin for [MDX][], helps you lint all ES syntaxes.
+> Linting `code` blocks can be enabled with `mdx/code-blocks` setting too!
 > Work perfectly with `eslint-plugin-import`, `eslint-plugin-prettier` or any other eslint plugins.
 > And also can be integrated with [remark-lint][] plugins to lint markdown syntaxes.
 
@@ -73,9 +74,13 @@ npm i -D eslint-plugin-mdx
 
    1. If you're using `eslint >= 6.4.0`, just add:
 
-      ```json
+      ```jsonc
       {
-        "extends": ["plugin:mdx/recommended"]
+        "extends": ["plugin:mdx/recommended"],
+        // optional, if you want to lint code blocks at the same time
+        "settings": {
+          "mdx/code-blocks": true
+        }
       }
       ```
 
@@ -84,6 +89,10 @@ npm i -D eslint-plugin-mdx
       ```jsonc
       {
         "extends": ["plugin:mdx/recommended"],
+        // optional, if you want to lint code blocks at the same time
+        "settings": {
+          "mdx/code-blocks": true
+        },
         "overrides": [
           {
             "files": ["*.md"],
@@ -100,6 +109,10 @@ npm i -D eslint-plugin-mdx
           {
             "files": ["*.mdx"],
             "extends": ["plugin:mdx/overrides"]
+          },
+          {
+            "files": "**/*.{md,mdx}/**",
+            "extends": "plugin:mdx/code-blocks"
           }
         ]
       }
@@ -112,6 +125,10 @@ npm i -D eslint-plugin-mdx
 
       module.exports = {
         extends: ['plugin:mdx/recommended'],
+        // optional, if you want to lint code blocks at the same time
+        settings: {
+          'mdx/code-blocks': true,
+        },
         overrides: [
           {
             files: ['*.md'],
@@ -125,25 +142,27 @@ npm i -D eslint-plugin-mdx
               ],
             },
           },
-          Object.assign(
-            {
-              files: ['*.mdx'],
-            },
-            configs.overrides,
-          ),
+          {
+            files: ['*.mdx'],
+            ...configs.overrides,
+          },
+          {
+            files: '**/*.{md,mdx}/**',
+            ...configs.codeBlocks,
+          },
         ],
       }
       ```
 
-2. Make sure ESLint knows to run on `.mdx` files:
+2. Make sure ESLint knows to run on `.md` or `.mdx` files:
 
    ```sh
-   eslint . --ext js,mdx
+   eslint . --ext js,md,mdx
    ```
 
 ## Parser Options
 
-1. `parser` (`string | ParserConfig | ParserFn`): Custom parser for ES syntax is supported, although `@typescript-eslint/parser` or `babel-eslint` will be detected automatically what means you actually do not need to do this:
+1. `parser` (`string | ParserConfig | ParserFn`): Custom parser for ES syntax is supported, although `@typescript-eslint/parser` or `@babel/eslint-parser` or `babel-eslint` will be detected automatically what means you actually do not need to do this:
 
    ```json
    {
@@ -166,18 +185,35 @@ _Fixable_: HTML style comments in jsx block is invalid, this rule will help you
 
 ### mdx/no-unescaped-entities
 
-Inline JSX like `Inline <Component />` is supported by [MDX][], but rule `react/no-unescaped-entities` from [eslint-plugin-react][] is incompatible with it, `mdx/no-unescaped-entities` is the replacement.
+Inline JSX like `Inline <Component />` is supported by [MDX][], but rule `react/no-unescaped-entities` from [eslint-plugin-react][] is incompatible with it, `mdx/no-unescaped-entities` is the replacement, so make sure that you've turned off the original `no-unescaped-entities` rule.
 
 ### mdx/no-unused-expressions
 
-[MDX][] can render `jsx` block automatically without exporting them, but [ESLint][] will report `no-unused-expressions` issue which could be unexpected, this rule is a replacement of it, so make sure that you've turned off the original `no-unused-expressions` rule.
+[MDX][] can render `jsx` block automatically without exporting them, but [ESLint][] will report `no-unused-expressions` issue which could be unexpected, this rule is the replacement, so make sure that you've turned off the original `no-unused-expressions` rule.
 
 ### mdx/remark
 
 _possible fixable depends on your remark plugins_:
 
 Integration with [remark-lint][] plugins, it will read [remark's configuration](https://github.com/remarkjs/remark/tree/master/packages/remark-cli#remark-cli) automatically via [cosmiconfig][]. But `.remarkignore` will not be respected, you should use `.eslintignore` instead.
 
+If you want to disable or change severity of some related rules, it won't work by setting rules in eslint config like `'remark-lint-no-duplicate-headings': 0`, you should change your remark config instead like following:
+
+```jsonc
+{
+  "plugins": [
+    "@1stg/remark-config",
+    // change to error severity, notice `[]` is required
+    ["lint-no-duplicate-headings", [2]],
+    // disable following plugin
+    [
+      "lint-no-multiple-toplevel-headings",
+      [0] // or false
+    ]
+  ]
+}
+```
+
 ## Prettier Integration
 
 If you're using [remark-lint][] feature with [Prettier][] both together, you can try [remark-preset-prettier][] which helps you to _turn off all rules that are unnecessary or might conflict with [Prettier][]_.

packages/eslint-mdx/package.json

@@ -33,7 +33,6 @@
     "eslint": ">=5.0.0"
   },
   "dependencies": {
-    "espree": "^7.3.1",
     "remark-mdx": "^1.6.22",
     "remark-parse": "^8.0.3",
     "tslib": "^2.1.0",