从零开始学习React-4：用脚手架创建项目，配置Prettier规范项目

发表于 更新于 分类于 ，

有了前面的章节的学习，我们已经基本了解了 react 及组件等概念，但是我们之前都是直接在 html 中使用的 react，接下来，我们将通过 create-react-app 脚手架，来创建一个真正的 react 项目，开始深入学习 react 的其他知识。

1. CRA脚手架

如果你和我一样是一名 android 开发者，对脚手架这个概念可能有些陌生，其实我们在 AS 中新建的项目就可以看做是一个脚手架，他帮我们创建好了目录结构，安装好了基础的相关依赖。

React 没有类 AS 这样的专用开发工具，我们需要通过 create react app 脚手架（简称 cra）命令来帮我们创建好项目的基础结构，使用的指令如下：

1
2
3
4
5
6
//使用ts模板创建项目
npx create-react-app my-app-name --template typescript
//进入项目目录
cd my-app-name
//启动项目
yarn start

上面的 my-app-name 是项目名称，--template typescript 表示使用 ts 模板来创建 React 项目，如果使用 js 创建项目，则可以忽略该参数。

目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my-app
├── README.md
├── node_modules  //依赖的包
├── package.json  //包管理文件
├── .gitignore  //git忽略
├── public  //公共资源
│   ├── favicon.ico
│   ├── index.html  //spa的页面
│   └── manifest.json
└── src  //源代码
    ├── App.css
    ├── App.tsx  //默认创建的组件
    ├── App.test.ts
    ├── index.css
    ├── index.tsx  //项目入口
    ├── logo.svg
    └── setupTests.ts

2. 单页面应用

单页面应用(single-page application)，是一个应用程序，它可以加载单个 HTML 页面，以及运行应用程序所需的所有必要资源（例如 JavaScript 和 CSS）。与页面或后续页面的任何交互，都不再需要往返 server 加载资源，即页面不会重新加载。

你可以使用 React 来构建单页应用程序，但不是必须如此。React 还可用于增强现有网站的小部分，使其增加额外交互。用 React 编写的代码，可以与服务器端渲染的标记（例如 PHP）或其他客户端库和平共处。实际上，这也正是 Facebook 内部使用 React 的方式。

一般的无论是使用 React 还是 Vue，现在我们都是使用他们创建 spa 单页应用，通过路由实现组件切换，而不是创建真实的、不同的页面。

3. 使用 yarn

当然我们可以使用 npm 来进行包管理等操作，但是更推荐使用 yarn 来做这些事，简单的了解常用 yarn 指令：

在项目更目录安装所有依赖

1
yarn

添加新的依赖

1
2
3
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

升级依赖

1
2
3
yarn up [package]
yarn up [package]@[version]
yarn up [package]@[tag]

删除依赖项

1
yarn remove [package]

4. 安装、配置 Prettier，规范代码

开发时难免会有需要协同开发的场景，但是每个人的开发习惯、开发工具都不一样，因此我们需要统一代码风格，除了要求人员的自律以外，更好的方法是使用 Prettier 来规范。

安装

  1. yarn add --dev --exact prettier

  2. echo {}> .prettierrc.json 创建配置文件，并填写：

    1
    2
    3
    4
    5
    {
      "tabWidth": 2,
      "singleQuote": true,
      "semi": false
    }

    分别表示：1：tab宽度为两个空格；2：字符串使用单引号；3：语句行末不使用分号

  3. 创建 .prettierignore 文件 .prettierignore 并填写：

    1
    2
    3
    # Ignore artifacts:
    build
    coverage

现在只要运行 yarn prettier --write . ，我们就可以按照配置格式化全部代码了

配置eslint

prettier与eslint是有冲突的，需要安装 yarn add eslint-config-prettier -D ，需要修改 package.json 文件的 eslintConfig 增加 ：

1
2
3
4
5
6
7
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

代码提交时自动运行 Prettier

提交时自动使用Prettier需要安装lint-staged， npx mrm lint-staged，需要修改 package.json 文件的 lint-staged 增加tsx、jsx文件支持：

1
2
3
"lint-staged": {
    "*.{js,css,md,ts,jsx,tsx}": "prettier --write"
  }

WebStorm 中使用 prettier 的一些配置

webstorm 默认安装了prettier 插件，在设置中搜索 prettier，然后选择对应项目的prettier包

image-20220608173945618.png

勾选下面的两个复选框，将在格式化代码与保存时使用 prettier 帮助我们格式化代码。

引用时使用绝对路径

  1. 在 tsconfig.json 的 compilerOptions 下增加："baseUrl": "./src",

  2. 在 webstorm 搜索 imports 勾选 Use paths relative to tsconfig.json

image-20220608174737472.png