[markdown] Fix lint errors in client
#45804
Conversation
matticbot
added
[Status] Needs Review
scinos
removed
the
[Status] Needs Review
matticbot
added
the
[Status] Needs Review
|
This PR does not affect the size of JS and CSS bundles shipped to the user's browser. Generated by performance advisor bot at iscalypsofastyet.com. |
scinos
added
Expedited Review
Markdown
and removed
[Status] Needs Review
| <NavItem path="/posts/drafts" selected={ false }>Drafts</NavItem> | ||
| <NavItem path="/posts/scheduled" selected={ false }>Scheduled</NavItem> | ||
| <NavItem path="/posts/trashed" selected={ false }>Trashed</NavItem> | ||
| <NavItem path="/posts" selected={ true }> |
There was a problem hiding this comment.
I'd love to write a codemod for those.
| <NavItem path="/posts" selected={ true }> | |
| <NavItem path="/posts" selected> |
There was a problem hiding this comment.
Maybe we can just enable https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
| @@ -57,19 +57,18 @@ Now we're ready to actually start writing our tour. | |||
| First we'll need to create a directory tour, under `tours`. In there, we create two files: `meta.js` and `index.js`. | |||
| `meta.js` contains the metadata for a tour. Here's an empty boilerplate: | |||
|
|
|||
| ```JavaScript | |||
| ```javascript | |||
There was a problem hiding this comment.
I wonder if we should be consistent and just use ```js everywhere.
There was a problem hiding this comment.
It is not the exactly same, but if/when leo-buneev/eslint-plugin-md#8 is merged, we will be able to enable https://github.com/remarkjs/remark-lint/tree/main/packages/remark-lint-fenced-code-flag that can limit the list of valid languages.
matticbot
added
the
[Status] Needs Review
|
@tyxla Thanks for the exhaustive review! Could you please have a look to the usage of |
There was a problem hiding this comment.
Could you please have a look to the usage of React.createRef() and check it is correct? I must admit I've never used it for real :(
Sure, I've left some comments.
In general, usage looks good. To completely fix it, we'd have to define a React.Component to wrap those 2 examples, so the usage makes complete sense - because the ref object receives the mounted instance of the component as its current. Since you didn't introduce these examples, feel free to ship already, I don't consider this a blocker.
| @@ -11,12 +11,12 @@ import { Button } from '@automattic/components'; | |||
| import CalendarPopover from 'blocks/calendar-popover'; | |||
|
|
|||
| const toggle = () => this.setState( { show: ! this.state.show } ); | |||
| let buttonRef; | |||
| const buttonRef = React.createRef(); | |||
There was a problem hiding this comment.
I'm assuming this code is in a React.Component context (because it has a render() function), so those const here are a bit odd. If we disregard this, usage seems good 👍
| @@ -57,25 +57,26 @@ that can trigger the opening and closing of the InfoPopover then you need to pas | |||
| ``` | |||
|
|
|||
| ```js | |||
| const refs = {}; | |||
| const infoPopRef = React.createRef(); | |||
There was a problem hiding this comment.
The same thing as above for the const here. Usually we define those as class instance properties, like this:
class ExampleComponent extends Component {
buttonRef = React.createRef();
render() {
return (
<Button ref={ this.buttonRef }>Something</Button>
);
}
}
* Disable some lint rules for codeblocks in markdown files * [markdown] Fix lint errors in `apps/notifications` (#45803) * [markdown] Fix lint errors in `client` (#45804) * [markdown] Fix lint errors in `packages/babel-plugin-transform-wpcalypso-async` (#45805) * [markdown] Fix lint errors in `packages/calypso-color-schemes` (#45807) * [markdown] Fix lint errors in `packages/calypso-polyfills` (#45808) * [markdown] Fix lint errors in `packages/components` (#45809) * [markdown] Fix lint errors in `packages/data-stores` (#45810) * [markdown] Fix lint errors in `packages/eslint-plugin-wpcalypso` (#45811) * [markdown] Fix lint errors in `packages/i18n-calypso` (#45812) * [markdown] Fix lint errors in `packages/i18n-calypso-cli` (#45813) * [markdown] Fix lint errors in `packages/material-design-icons` (#45814) * [markdown] Fix lint errors in `packages/media-library` (#45815) * [markdown] Fix lint errors in `packages/photon` (#45816) * [markdown] Fix lint errors in `packages/popup-monitor` (#45817) * [markdown] Fix lint errors in `packages/react-i18n` (#45818) * [markdown] Fix lint errors in `packages/request-external-access` (#45819) * [markdown] Fix lint errors in `packages/social-previews` (#45820) * [markdown] Fix lint errors in `packages/viewport` (#45821) * [markdown] Fix lint errors in `packages/viewport-react` (#45822) * [markdown] Fix lint errors in `packages/webpack-extensive-lodash-replacement-plugin` (#45823) * [markdown] Fix lint errors in `packages/webpack-inline-constant-exports-plugin` (#45824) * [markdown] Fix lint errors in `packages/wpcom.js` (#45825) * [markdown] Fix lint errors in `packages/wpcom-proxy-request` (#45826) * [markdown] Fix lint errors in `packages/calypso-build` (#45806)
Background
We want to lint the code blocks inside Markdown files to follow our coding style.
Changes
This PR fixes all markdown errors in
clientTesting instructions
Run
./node_modules/.bin/eslint --ext .md --ext .md.js --ext .md.javascript --ext .md.jsx client, there should be no errors