antd radio设置默认选中_搭建 Next.js + TS + Antd + Redux + Storybook 企业级项目脚手架

前言

⭐ Nextjs-TS-Antd-Redux-Storybook-Jest-Starter

之所以有该项目呢，是因为日常可能自己需要练手其他 Next.js 项目，又不想每次都重新配置一遍，但基于强迫症正常企业级项目该有的配置觉得不能少了，于是就想开搞一个通用脚手架模板。

说起 Next.js，8 月份写了一篇文章手把手带你入门 NextJs(v9.5)，主要是因为网上大部分 Next.js 是旧版本 v7.x 的教程，于是写个较新的 9.5 版，没想到 10 月就出了 Next.js 10，措手不及，不过更新部分主要是图片优化等，可以照样看。

该项目也是想把日常工作中我觉得实践比较好的点加进来，也打算根据该项目持续跟进良好规范和最新库版本。当然，到具体业务场景的话脚手架肯定多少需要改，但目标希望能降低修改的成本，起码基本配置得搞好。

该脚手架主要库和版本：

Next.js 10.x
React 17.x
TypeScript 4.x
Ant Design 4.x
Styled-components 5.x
Storybook 6.x

初始化 Next.js 模板

npx create-next-app nextjs-ts-redux-antd-starter

添加 TypeScript 支持

根目录下新建tsconfig.json文件，此时运行yarn dev，会看到它提示我们安装类型库

yarn add --dev typescript @types/react @types/node

顺便把@types/react-dom也装上

安装之后，再运行yarn dev, 会在根目录自动生成next-env.d.ts文件，且tsconfig.json有了默认配置，这里我再对配置稍加改动。

具体可以参考 TS 官网看配置项：

{
     
  "compilerOptions": {
     
    "baseUrl": ".",
    "paths": {
     
      "src/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "allowJs": true, // 允许编译js文件
    "jsx": "preserve", // 在 .tsx文件里支持JSX
    "noEmit": true, // 不输出文件
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], // TS需要引用的库，即声明文件
    "esModuleInterop": true, // 允许export=导出，由import from导入
    "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入
    "isolatedModules": true, // 将每个文件作为单独的模块
    "resolveJsonModule": true, // 允许把json文件当做模块进行解析
    "skipLibCheck": true, // 跳过所有声明文件的类型检查
    "forceConsistentCasingInFileNames": true // 不允许对同一文件使用不一致大小写的引用
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    ".next",
    "dist"
  ]
}

然后清除干净目录，把styles, pages只留下一个index.js即可， 并将index.js重命名为index.tsx

import { NextPage } from 'next'

const Home: NextPage = () => {
     
  return <div>Hello nextjs-ts-redux-antd-starterdiv>
}

export default Home

EditorConfig

作为项目代码风格的统一规范，我们需要借助第三方工具来强制

.editorconfig 是跨编辑器维护一致编码风格的配置文件，在 VSCode 中需要安装相应插件 EditorConfig for VS Code，安装完毕之后， 可以通过输入 Generate .editorcofig 即可快速生成 .editorconfig 文件，也可以自己新建文件。

在.editorcofig文件，就可以大家根据不同来设置文件了，比如我的是这样：

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Prettier

yarn add prettier -D

同样也需要安装 VSCode 插件Prettier - Code formatter

新建文件.prettierrc

{
     
  "singleQuote": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "avoid",
  "semi": false,
  "bracketSpacing": true,
  "overrides": [
    {
     
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

再添加忽略文件.prettierignore

**/*.png
**/*.svg
**/*.ico
package.json
lib/
es/
dist/
.next/
coverage/
LICENSE
yarn.lock
yarn-error.log
*.sh
.gitignore
.npmignore
.prettierignore
.DS_Store
.editorconfig
.eslintignore
**/*.yml

ESLint

yarn add eslint -D

安装完后运行 npx eslint --init，运行后有选项，选择如下(自行根据需要)：

• To check syntax, find problems, and enforce code style
• JavaScript modules (import/export)
• React
• TypeScript Yes
• Browser Node
• Use a popular style guide
• Airbnb: https://github.com/airbnb/javascript
• JavaScript
• Would you like to install them now with npm (Yes)

npm 安装后会出现package-lock.json，如果你默认想用yarn.lock，为了避免冲突就删掉它。

安装自动生成.eslintrc文件，还没完，为了写出来的代码更好更符合社区规范，我们再加一些不错的 eslint 插件