react18-代码规范-ts-仿网易云项目

项目创建

因为react创建项目不像vue会提示需要按照xxx，react默认创建出的项目是不包含其他东西的，我们想集成typescript时，可以追加参数
create-react-app yh_music --template typescript
删掉一些无用文件变成下图

我们会发现一个文件
react-app-env.d.ts文件有什么作用呢？

此文件引用特定于使用Create React App启动的项目的TypeScript类型声明。

这些类型声明添加了对导入资源文件的支持，如bmp、gif、jpeg、jpg、png、webp和svg。这意味着以下导入将按预期正常工作，不会出现错误：

import logo from './logo.svg';

它还添加了对导入CSS模块的支持。这与导入扩展名为.module.css、.module.scss和.module.sass的文件有关。

取消严格模式
在index.jsx中可将React.StrictMode删除掉，避免子组件刷新两次

配置别名，使用craco修改webpack的配置
配置同爱彼迎项目
注意这里配完会报错，使用@符号后ts报错

在tsconfig.json文件加两个字段即可解决
一个是baseUrl，一个是path

代码规范

 EditorConfig: 专注于统一编辑器编码风格配置
 Prettier: 专注于检查并自动更正代码风格，美化代码
 Eslint: 专注于 JavaScript 代码质量检查, 编码风格约束等

集成editconfig配置

Editconfig有助于为不同IDE编辑器上处理同一项目的多个开发人员提供维护一致的编码风格
npm install perttier -D
.editorconfig文件

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

然后安装这个插件

prettier配置

.prettierrc文件

{
   
   
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

配置项简介

在我们配置完后使用ctrl+s保存时就会发现已经触发prettier的规则了
我们现在在package.json里的script里面加上下面这句代码

"prettier":"prettier --write ."

然后配置一个.prettierignore文件，因为上面的命令是让所有的代码都执行prettier的格式化，但是对于nodemodules一些文件不需要格式化，所以要配置忽略文件
.prettierignore

/build/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

执行npm run perttier就会都格式化了。
还需配置一个东西，安装这个插件

在vscode的文件-首选项-设置中搜索editor default

找到格式化配置