Skip to content

Commit

Permalink
feat: use eslint-plugin-markdown as processor! (#283)
Browse files Browse the repository at this point in the history
  • Loading branch information
JounQin authored Mar 14, 2021
1 parent 5052eb8 commit abe30cb
Show file tree
Hide file tree
Showing 44 changed files with 1,310 additions and 434 deletions.
31 changes: 31 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
],
}
64 changes: 50 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
}
}
```

Expand All @@ -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"],
Expand All @@ -100,6 +109,10 @@ npm i -D eslint-plugin-mdx
{
"files": ["*.mdx"],
"extends": ["plugin:mdx/overrides"]
},
{
"files": "**/*.{md,mdx}/**",
"extends": "plugin:mdx/code-blocks"
}
]
}
Expand All @@ -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'],
Expand All @@ -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
{
Expand All @@ -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][]_.
Expand Down
14 changes: 9 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -54,13 +55,16 @@
]
},
"eslintIgnore": [
"**/fixtures/**",
"coverage",
"fixtures",
"lib",
"CHANGELOG.md",
"!/.*.js"
],
"jest": {
"setupFiles": [
"eslint/lib/linter/linter"
],
"collectCoverage": true,
"coverageThreshold": {
"global": {
Expand Down Expand Up @@ -90,7 +94,7 @@
]
},
"typeCoverage": {
"atLeast": 99.76,
"atLeast": 99.7,
"cache": true,
"detail": true,
"ignoreAsAssertion": true,
Expand Down
64 changes: 50 additions & 14 deletions packages/eslint-mdx/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
}
}
```

Expand All @@ -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"],
Expand All @@ -100,6 +109,10 @@ npm i -D eslint-plugin-mdx
{
"files": ["*.mdx"],
"extends": ["plugin:mdx/overrides"]
},
{
"files": "**/*.{md,mdx}/**",
"extends": "plugin:mdx/code-blocks"
}
]
}
Expand All @@ -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'],
Expand All @@ -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
{
Expand All @@ -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][]_.
Expand Down
1 change: 0 additions & 1 deletion packages/eslint-mdx/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit abe30cb

Please sign in to comment.