From 839e485a1607bb9f8d8087050384eaef668aef27 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 11 Jan 2023 16:48:09 +0800 Subject: [PATCH] docs: markdown eslint error fix (#40149) --- README-ja_JP.md | 1 + README-pt_BR.md | 1 + README-sp_MX.md | 1 + README-uk_UA.md | 1 + README-zh_CN.md | 1 + README.md | 1 + docs/react/migration-v5.en-US.md | 7 +++--- docs/react/migration-v5.zh-CN.md | 7 +++--- docs/react/practical-projects.en-US.md | 24 +++++++++++++++------ docs/react/practical-projects.zh-CN.md | 24 +++++++++++++++------ docs/react/use-custom-date-library.en-US.md | 2 +- docs/react/use-custom-date-library.zh-CN.md | 16 +++++++------- docs/react/use-in-typescript.en-US.md | 3 ++- docs/react/use-in-typescript.zh-CN.md | 3 ++- 14 files changed, 61 insertions(+), 31 deletions(-) diff --git a/README-ja_JP.md b/README-ja_JP.md index 6fcd8ce7b5..2fb1ce8f9b 100644 --- a/README-ja_JP.md +++ b/README-ja_JP.md @@ -79,6 +79,7 @@ yarn add antd ## 🔨 使い方 ```jsx +import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( diff --git a/README-pt_BR.md b/README-pt_BR.md index b890c91f37..582763ca5e 100644 --- a/README-pt_BR.md +++ b/README-pt_BR.md @@ -79,6 +79,7 @@ yarn add antd ## 🔨 Uso ```jsx +import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( diff --git a/README-sp_MX.md b/README-sp_MX.md index 1217941dff..66a1bf2065 100644 --- a/README-sp_MX.md +++ b/README-sp_MX.md @@ -79,6 +79,7 @@ yarn add antd ## 🔨 Uso ```jsx +import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( diff --git a/README-uk_UA.md b/README-uk_UA.md index 39a6b35668..d53baa4519 100644 --- a/README-uk_UA.md +++ b/README-uk_UA.md @@ -79,6 +79,7 @@ yarn add antd ## 🔨 Використання ```jsx +import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( diff --git a/README-zh_CN.md b/README-zh_CN.md index 0b86ef3996..8e2a22c868 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -79,6 +79,7 @@ yarn add antd ## 🔨 示例 ```jsx +import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( diff --git a/README.md b/README.md index 0ee7fadf01..503a80096a 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@ yarn add antd ## 🔨 Usage ```jsx +import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md index 66772f578f..1dc3cfe86c 100644 --- a/docs/react/migration-v5.en-US.md +++ b/docs/react/migration-v5.en-US.md @@ -203,14 +203,15 @@ const mapToken = defaultAlgorithm(defaultSeed); const v4Token = convertLegacyToken(mapToken); // Webpack Config -{ - loader: "less-loader", +module.exports = { + // ... other config + loader: 'less-loader', options: { lessOptions: { modifyVars: v4Token, }, }, -} +}; ``` Ant then remove antd less reference in your less file: diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md index 848e3e62c0..a6c5b75d94 100644 --- a/docs/react/migration-v5.zh-CN.md +++ b/docs/react/migration-v5.zh-CN.md @@ -195,14 +195,15 @@ const mapToken = defaultAlgorithm(defaultSeed); const v4Token = convertLegacyToken(mapToken); // Webpack Config -{ - loader: "less-loader", +module.exports = { + // ... other config + loader: 'less-loader', options: { lessOptions: { modifyVars: v4Token, }, }, -} +}; ``` 同时移除对 antd less 文件的直接引用： diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index 08911ea7da..18afb33a6b 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -69,6 +69,7 @@ Let's create a `ProductList` component that we can use in multiple places to sho Create `src/components/ProductList.tsx` by typing: ```tsx +import React from 'react'; import { Table, Popconfirm, Button } from 'antd'; const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({ @@ -82,7 +83,7 @@ const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: strin }, { title: 'Actions', - render: (text, record) => { + render(text, record) { return ( onDelete(record.id)}> @@ -112,8 +113,8 @@ export function queryProductList() { } */ // mock request service by setTimeout -export function queryProductList() { - return new Promise(resolve => { +export default function queryProductList() { + return new Promise((resolve) => { setTimeout(() => { resolve({ data: [ @@ -129,6 +130,7 @@ export function queryProductList() { Then you need to create a new file `src/models/useProductList.ts`. ```tsx +import { message } from 'antd'; import { useRequest } from 'umi'; import { queryProductList } from '@/services/product'; @@ -157,6 +159,7 @@ export default function useProductList(params: { pageSize: number; current: numb Edit `src/pages/products.tsx` and replace with the following: ```tsx +import React from 'react'; import { useModel } from 'umi'; import ProductList from '@/components/ProductList'; @@ -164,7 +167,7 @@ const Products = () => { const { dataSource, reload, deleteProducts } = useModel('useProductList'); return (
- reload()}>reload + reload
); @@ -188,6 +191,7 @@ And supports three modes of `side`, `mix`, and `top`, and it also has built-in m The method of use is also extremely simple, requiring only a few simple settings. ```tsx +import React from 'react'; import { Button } from 'antd'; import ProLayout, { PageContainer } from '@ant-design/pro-layout'; @@ -201,7 +205,12 @@ export default ( Main Operating , ]} - footer={[, ]} + footer={[ + , + , + ]} > {children} @@ -216,8 +225,9 @@ Click here [Quick Start](https://procomponents.ant.design/en-US/components/layou Many data in an admin page does not need to be shared across pages, and models are sometimes not needed. ```tsx +import React, { useRef } from 'react'; import ProTable from '@ant-design/pro-table'; -import { Popconfirm, Button } from 'antd'; +import { Popconfirm, Button, message } from 'antd'; import { queryProductList } from '@/services/product'; const Products = () => { @@ -240,7 +250,7 @@ const Products = () => { }, { title: 'Actions', - render: (text, record) => { + render(text, record) { return ( onDelete(record.id)}> diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index dc15c52a11..f9b304d664 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -63,6 +63,7 @@ export default defineConfig({ 然后新建 `src/components/ProductList.tsx` 文件： ```tsx +import React from 'react'; import { Table, Popconfirm, Button } from 'antd'; const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({ @@ -76,7 +77,7 @@ const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: strin }, { title: 'Actions', - render: (text, record) => { + render(text, record) { return ( onDelete(record.id)}> @@ -106,8 +107,8 @@ export function queryProductList() { } */ // 先用 setTimeout 模拟一个请求，正常的写法如上所示 -export function queryProductList() { - return new Promise(resolve => { +export default function queryProductList() { + return new Promise((resolve) => { setTimeout(() => { resolve({ data: [ @@ -123,6 +124,7 @@ export function queryProductList() { 然后新建文件 `src/models/useProductList.ts`。 ```tsx +import { message } from 'antd'; import { useRequest } from 'umi'; import { queryProductList } from '@/services/product'; @@ -151,6 +153,7 @@ export default function useProductList(params: { pageSize: number; current: numb 编辑 `src/pages/products.tsx`，替换为以下内容： ```tsx +import React from 'react'; import { useModel } from 'umi'; import ProductList from '@/components/ProductList'; @@ -158,7 +161,7 @@ const Products = () => { const { dataSource, reload, deleteProducts } = useModel('useProductList'); return (
- reload()}>reload + reload
); @@ -188,6 +191,7 @@ $ yarn start 使用方式也是极为简单，只需要进行几个简单的设置。 ```tsx +import React from 'react'; import { Button } from 'antd'; import ProLayout, { PageContainer } from '@ant-design/pro-layout'; @@ -201,7 +205,12 @@ export default ( Main Operating , ]} - footer={[, ]} + footer={[ + , + , + ]} > {children} @@ -216,8 +225,9 @@ export default ( 一个中后台页面中很多数据都不需要跨页面共享，models 在一些时候也是不需要的。 ```tsx +import React, { useRef } from 'react'; import ProTable from '@ant-design/pro-table'; -import { Popconfirm, Button } from 'antd'; +import { Popconfirm, Button, message } from 'antd'; import { queryProductList } from '@/services/product'; const Products = () => { @@ -240,7 +250,7 @@ const Products = () => { }, { title: 'Actions', - render: (text, record) => { + render(text, record) { return ( onDelete(record.id)}> diff --git a/docs/react/use-custom-date-library.en-US.md b/docs/react/use-custom-date-library.en-US.md index f2eeabb2d7..7fa4abebe4 100644 --- a/docs/react/use-custom-date-library.en-US.md +++ b/docs/react/use-custom-date-library.en-US.md @@ -98,7 +98,7 @@ We also provide another implementation, which we provide with `@ant-design/momen ```js // webpack-config.js -import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin'; +const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin'); module.exports = { // ... diff --git a/docs/react/use-custom-date-library.zh-CN.md b/docs/react/use-custom-date-library.zh-CN.md index e5c40374bc..7255e549ee 100644 --- a/docs/react/use-custom-date-library.zh-CN.md +++ b/docs/react/use-custom-date-library.zh-CN.md @@ -18,7 +18,7 @@ Ant Design 默认使用 [Day.js](https://day.js.org) 来处理时间日期问题 编写如下代码: ```tsx -import { Moment } from 'moment'; +import type { Moment } from 'moment'; import momentGenerateConfig from 'rc-picker/es/generate/moment'; import generatePicker from 'antd/es/date-picker/generatePicker'; @@ -34,16 +34,16 @@ export default DatePicker; 编写如下代码: ```tsx -import { Moment } from 'moment'; +import type { Moment } from 'moment'; import * as React from 'react'; +import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker'; import DatePicker from './DatePicker'; -import { PickerTimeProps } from 'antd/es/date-picker/generatePicker'; export interface TimePickerProps extends Omit, 'picker'> {} -const TimePicker = React.forwardRef((props, ref) => { - return ; -}); +const TimePicker = React.forwardRef((props, ref) => ( + +)); TimePicker.displayName = 'TimePicker'; @@ -57,7 +57,7 @@ export default TimePicker; 编写如下代码: ```tsx -import { Moment } from 'moment'; +import type { Moment } from 'moment'; import momentGenerateConfig from 'rc-picker/es/generate/moment'; import generateCalendar from 'antd/es/calendar/generateCalendar'; @@ -96,7 +96,7 @@ export { default as TimePicker } from './TimePicker'; ```js // webpack-config.js -import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin'; +const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin'); module.exports = { // ... diff --git a/docs/react/use-in-typescript.en-US.md b/docs/react/use-in-typescript.en-US.md index 13868544cf..f264141c53 100644 --- a/docs/react/use-in-typescript.en-US.md +++ b/docs/react/use-in-typescript.en-US.md @@ -43,7 +43,8 @@ $ yarn add antd Modify `src/App.tsx`, import Button component from `antd`. ```tsx -import React, { FC } from 'react'; +import React from 'react'; +import type { FC } from 'react'; import { Button } from 'antd'; import 'antd/dist/reset.css'; import './App.css'; diff --git a/docs/react/use-in-typescript.zh-CN.md b/docs/react/use-in-typescript.zh-CN.md index ca03a212a1..9fb30cce5e 100644 --- a/docs/react/use-in-typescript.zh-CN.md +++ b/docs/react/use-in-typescript.zh-CN.md @@ -43,7 +43,8 @@ $ yarn add antd 修改 `src/App.tsx`，引入 antd 的按钮组件。 ```tsx -import React, { FC } from 'react'; +import React from 'react'; +import type { FC } from 'react'; import { Button } from 'antd'; import 'antd/dist/reset.css'; import './App.css';