基于 Creat React App 创建项目使用 Create React App 初始化项目使用 prettier

概览：

使用 Create React App 初始化项目
使用 prettier 规定项目风格
使用 commitlint 规定 commit message
自定义 create-react-app 配置
引入 antd

Create React App

npx create react app [app-name] --template typescript

添加 Prettier

安装

安装 prettier：

yarn add --dev --exact prettier

创建配置文件：

echo {}> .prettierrc.json

创建忽略文件 .prettierignore：

# Ignore artifacts:
build
coverage

Pre-commit hook

在 Pre-commit 工具中使用 Prettier。

确保 prettier 已经在 devDependencies 中，且 devDependencies 不含 eslint-config-prettier，执行下面的命令：

npx mrm lint-staged

解决 eslint 和 prettier 冲突

安装 eslint-plugin-prettier：

yarn add --dev eslint-plugin-prettier

编辑 package.json 文件：

{
  ...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
	    "prettier" 
    ]
  },
	...
}

Commitlint

格式化 commit message。

安装、配置：

yarn add --dev @commitlint/{config-conventional,cli}

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

使用 Husky's commit-msg hook：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

自定义配置

使用 craco 对 create-react-app 创建的项目进行自定义配置。

安装：

yarn add --dev @craco/craco

修改 package.json 文件：

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

创建 craco.config.js 配置文件：

module.exports = {}

引入 antd

antd 的 js 代码默认支持 ES Modules 的 tree shaking。

安装：

yarn add antd

引入 antd 样式：

@import "~antd/dist/atnd.css";

自定义样式

使用 craco-less 加载 less 样式和修改变量。

引入 antd.less 样式：

- @import "~antd/dist/atnd.css";
+ @import "~antd/dist/atnd.less";

安装：

yarn add --dev craco-less

编辑 craco.config.js 文件：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

基于 Creat React App 创建项目