mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-22 03:42:14 +00:00
Add local eslint rule to validate markdown codeblocks with React Compiler (#7988)
In https://github.com/facebook/react/pull/34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
This commit is contained in:
3
.github/workflows/site_lint.yml
vendored
3
.github/workflows/site_lint.yml
vendored
@@ -32,6 +32,9 @@ jobs:
|
||||
|
||||
- name: Install deps
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Install deps (eslint-local-rules)
|
||||
run: yarn install --frozen-lockfile
|
||||
working-directory: eslint-local-rules
|
||||
|
||||
- name: Lint codebase
|
||||
run: yarn ci-check
|
||||
|
||||
Reference in New Issue
Block a user