React导入声明的标准方法 [英] Standard Way for React Import Statements
问题描述
我想知道是否有一种标准的方法来编写import语句进行反应?例如，我有这个:
I was wondering if there's a standard way to write import statements in react? For example, I have this:
import React, { useState, FormEvent } from 'react';
import Avatar from '@material-ui/core/Avatar';
import {Grid, Checkbox, TextField, FormControlLabel, CssBaseline} from '@material-ui/core';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import { LOGIN } from '../../graphql/mutations/login';
import { schema } from '../../helpers/validations/login';
import { Redirect } from 'react-router-dom';
import { useMutation } from '@apollo/react-hooks';
import StatusMessage from '../../helpers/statusMessages/loginMessage';
import Copyright from '../../components/copyright/copyright';
import CustomButton from '../../components/button/button';
import { ExecutionResult } from 'graphql';
import { Wrapper, StyledLink, Form, StyledTypography, StyledBox, StyledContainer} from './styles';
import { store } from '../../store';
import { useDispatch } from 'react-redux';
import SignInResponse from '../../graphql/responses/login';
import { useFormik } from 'formik';
是否有关于我应该分别从'@material-ui/core';导入所有内容还是一起导入的规则?除了减少行数之外，还有其他区别吗?
Are there any rules about whether I should import everything from '@material-ui/core';separately or together? Does it make a difference apart from reducing the number of lines?
在React自己的库/内容之后是否应该导入其他本地文件/函数是否有任何规则?还有其他规则/建议吗?
Is there any rule about if I should import other local files/functions after react's own libraries/content? Any other rules/suggestions?
推荐答案
有已知的标准，其中大多数是意见而非必须做的事情.我建议您看看 eslint-plugin-import 因为它具有大量有关进口的标准/意见:
There are known standard, most of them are opinions rather than must-dos. I would recommend that you take a look at eslint-plugin-import as it has a extensive list of standards/opinions regarding imports:
- 确保所有导入都出现在其他语句([
first])之前- 确保所有导出都出现在其他语句([
exports-last])之后- 报告在多个位置重复导入同一模块([
no-duplicates])- 禁止命名空间(也称为通配符"
*)导入([no-namespace])- 确保在导入路径([
extensions])中一致使用文件扩展名- 按模块导入顺序([
order])实施约定- 在导入语句([
newline-after-import])之后强制换行- 如果模块导出单个名称([
prefer-default-export])，则首选默认导出- 限制模块可以具有的最大依赖项数量([
max-dependencies])- 禁止未分配的进口([
no-unassigned-import])- 禁止命名默认出口([
no-named-default])- 禁止默认导出([
no-default-export])- 禁止命名出口([
no-named-export])- 禁止匿名值作为默认导出([
no-anonymous-default-export])- 首选将命名的出口分组到一个出口声明([
group-exports])- 使用webpackChunkName对动态导入([
dynamic-import-chunkname])强制发表领先评论
- Ensure all imports appear before other statements ([
first])- Ensure all exports appear after other statements ([
exports-last])- Report repeated import of the same module in multiple places ([
no-duplicates])- Forbid namespace (a.k.a. "wildcard"
*) imports ([no-namespace])- Ensure consistent use of file extension within the import path ([
extensions])- Enforce a convention in module import order ([
order])- Enforce a newline after import statements ([
newline-after-import])- Prefer a default export if module exports a single name ([
prefer-default-export])- Limit the maximum number of dependencies a module can have ([
max-dependencies])- Forbid unassigned imports ([
no-unassigned-import])- Forbid named default exports ([
no-named-default])- Forbid default exports ([
no-default-export])- Forbid named exports ([
no-named-export])- Forbid anonymous values as default exports ([
no-anonymous-default-export])- Prefer named exports to be grouped together in a single export declaration ([
group-exports])- Enforce a leading comment with the webpackChunkName for dynamic imports ([
dynamic-import-chunkname])
