道阻且长，行而不辍，未来可期

1.安装react

yarn create react-app demo --template typescript
cd demo
yarn start

2.配置蓝图模版

2.1安装blueprint插件

https://github.com/shredor/blueprint-templates-cli#readme
yarn add blueprint-templates-cli

2.2创建一个blueprint-templates文件夹

创建文件的时候会出现New File from Template的选项

输入文件的名字，便会根据模版动态的创建文件

注意⚠️：在vscode中需要直接打开项目，而不能打开项目的父文件
error如下图所示

项目的名字叫template，父文件叫“未命名文件夹7”
vs打开的是父文件,然后创建文件夹的时候如果选New File from Template就会报错
错误如下。
错误：No templates found. Please see https://github.com/reesemclean/blueprint for information on setting up Blueprint in your project.
可以去仓库中查看我的蓝图模版：https://github.com/1linan/template

创建模版后：

找不到模块“react”或其相应的类型声明。

安装react的类型

yarn add @types/react --dev

3.配置less + less module

在react项目中如果我们想修改默认的webpack配置，我们可以通过eject导出默认配置文件进行修改
但是这样的操作是不可逆的。更推荐使用craco或者react-app-rewired这样的工具来达到修改webpack的目的。

我选择的是craco工具
3.1在工程中引入craco 和 craco-less

yarn add @craco/craco  
yarn add craco-less

3.2修改package.json
打开package.json文件，修改 package.json 里的 scripts 属性。

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3.3在项目根目录创建一个 craco.config.js 用于修改默认配置。

const CracoLessPlugin = require("craco-less");
const { loaderByName } = require("@craco/craco");module.exports = {plugins: [{plugin: CracoLessPlugin,options: {modifyLessModuleRule(lessModuleRule, context) {// Configure the file suffixlessModuleRule.test = /.module.less$/;// Configure the generated local ident name.console.log(lessModuleRule)const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));cssLoader.options.modules = {localIdentName: "[local]_[hash:base64:5]",};return lessModuleRule;},},},],
};

如果使用的是TypeScript编程，则在react-app-env.d.ts.文件中添加以下内容，解决模块问题

declare module '*.module.less' {const classes: {readonly [key: string]: string}export default classesdeclare module '*.less'
}

4.配置别名路径

4.1在craco.config.js 文件中添加如下配置

const path = require('path')
module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定：使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src'),// 约定：使用 @scss 表示全局 SASS 样式所在路径// 在 SASS 中使用'@scss': path.resolve(__dirname, 'src/assets/styles')}}
}

4.2在tsconfig.json中添加如下配置

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"],"@scss/*": ["src/assets/styles/*"]}}
}

4.3 在./tsconfig.json中新增一条配置, “extends”: “./path.tsconfig.json”

{"extends": "./path.tsconfig.json","compilerOptions": {"target": "es5","lib": ["dom","dom.iterable","esnext"],...
}

5.ESLint+Prettier

5.1 添加ESlint的配置

ESLint的主要功能包含代码格式和代码质量的校验。
Prettier 是一款代码格式化工具，用于检测代码中的格式问题，比如单行代码长度、tab长度、空格、逗号表达式等。更偏向于统一项目的编码风格。

yarn eslint --dev
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev
yarn add @typescript-eslint eslint-plugin-react --dev

prettier 需要用prettier对代码的格式进行检查和修正，下载prettier包
eslint-config-prettier:关闭不必要的或者可能和Prettier冲突的规则

eslint-plugin-react：插件–React 代码规范的校验规则

• react/jsx-key:用来检查是否声明了 key 属性
• no-array-index-key:用来检查是否使用了数组索引声明 key 属性

react-hooks：React hooks 代码规范的校验规则

• rules-of-hooks: 用来检查 Hook 的规则(不能 if/循环中使用 Hooks)
• exhaustive-deps 规则，此规则会在useEffct添加错误依赖时发出警告并给出修复建议

创建.eslintrc.cjs

module.exports = {env: {browser: true,es2021: true,node: true},extends: ["eslint:recommended", //作为基本规则集,继承eslint官方推荐的一些配置"plugin:react/recommended", //作为基本规则集"plugin:@typescript-eslint/recommended", //作为基本规则集,继承了一个由typesript官方提供的适合于ts代码检查的配置"prettier", //由于eslint和prettier都具备代码格式化的功能，并且可能出现冲突,所以继承eslint-config-prettier"plugin:prettier/recommended"],parser: "@typescript-eslint/parser", //作为ESlint的解析器，将Ts代码纳入ESLint校验范围,因为eslint默认的parser智能解析js,所以配置了parserparserOptions: {//对parser进行配置ecmaFeatures: {jsx: true},ecmaVersion: "latest",sourceType: "module"},plugins: ["react","@typescript-eslint","prettier", //注册eslint-plugin-prettier插件"import","eslint-plugin-react", //注册插件,React 代码规范的校验规则//react/jsx-key:用来检查是否声明了 key 属性//no-array-index-key:用来检查是否使用了数组索引声明 key 属性"react-hooks" //React hooks 代码规范的校验规则//rules-of-hooks: 用来检查 Hook 的规则(不能 if/循环中使用 Hooks)//exhaustive-deps 规则，此规则会在useEffct添加错误依赖时发出警告并给出修复建议],rules: {//开启eslint-plugin-prettier中的prettier规则//开启这条规则后，会将prettier的校验规则传递给eslint，这样eslint就可以按照prettier的方式来进行代码格式的校验"prettier/prettier": "error", //表示被prettier标记的地方抛出错误信息。quotes: ["error"], // // 字符串必须使用双引号，否则报错"react/jsx-boolean-value": 1,"react-hooks/rules-of-hooks": "error","react-hooks/exhaustive-deps": "warn","react/prop-types": "off",//Typescript 中,必须明确指定函数的返回值类型。并且函数中的return后的类型必须与指定的类型一致 参考文档/*下面是一个 "explicit-module-boundary-types" 规则的栗子// 会出现 explicit-module-boundary-types警告export default function () {return 1;}// 下面的函数不会出现警告export var fn = function (): number {return 1;};*/"@typescript-eslint/explicit-module-boundary-types": "off",//关闭explicit-module-boundary-types，TS 中可以通过类型推断判断出函数的返回值类型，因此可以关闭此 Lintsemi: ["error", "always"],"react/react-in-jsx-scope": "off","import/order": ["error",{alphabetize: {order: "asc"}}]}
};

添加 NPM 脚本

{"script": {"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ","lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src","lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx"}
}

lint-staged:js: 只校验后缀名为".js,.jsx,.ts,.tsx"的文件
lint:js: 只校验src目录下,后缀名为".js,.jsx,.ts,.tsx"的文件中,被修改过的文件。这会生成一个.eslintcache文件用来缓存已校验过的文件
lint:fix: 根据 .eslintcache文件，校验被修改过的文件。并且自动修复

创建.eslintignore
如果需要屏蔽不需要检测的文件或目录，可以在项目根目录添加 .eslintignore

build
output
node_modules
src/idl
lib
.temp/
mock.js
.eslintrc.js
idl/

5.2添加 Prettier 代码自动格式化工具

yarn add prettier  --dev

在项目根目录新建.prettierrc 并加入以下内容

module.exports = {printWidth: 100, //一行的字符数，如果超过会进行换行，默认为80tabWidth: 2, //一个tab代表几个空格数，默认为2useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减singleQuote: false, //字符串是否使用单引号，默认为false，使用双引号semi: true, //如果 semi 设置为 true，将在语句末尾加上; trailingComma: "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }endOfLine: "auto",//换行符使用lfproseWrap: "preserve",//使用默认的折行标准htmlWhitespaceSensitivity: "ignore",sxBracketSameLine: false, tsxBracketSameLine: false,jsxBracketSameLine: false,/**// true example<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here</button>// false example<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here</button>*/
};

为VSCode 安装 Prettier 插件

通过在“设置”中勾选“保存时进行格式化”选项， 就可以在文件保存时使用 Prettier 进行自动格式化

如果需要屏蔽不必要的文件，可以在项目根目录添加 .prettierignore并加入以下内容

*.svg
package.json
.DS_Store
.eslintignore
*.png
*.toml
.editorconfig
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
/build
/public

添加 npm 脚本

"script":{"lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto","prettier": "prettier -c --write \"src/**/*\""
}

lint:prettier:当想要检查文件是否已被格式化时，则可以使用–check标志（或-c）运行 Prettier。这将输出一条语义化的消息和未格式化文件的列表。上面脚本的意思是格式化src目录下的所有文件
prettier:重新格式化所有已被处理过的文件。类似于eslint --fix的工作。上面脚本的意思是重新格式化src目录下的所有文件

6.添加 stylelint

 "stylelint-config-prettier": "^9.0.5","stylelint-config-recess-order": "^4.0.0","stylelint-config-standard": "^30.0.1","stylelint-prettier": "^3.0.0",

新建 .stylelintrc.js并加入以下内容

module.exports = {// 继承一系列规则集合extends: ['stylelint-config-standard',],rules: {"indentation": 4,//# 缩进 4 个空格"string-quotes": "double",//使用双引号"declaration-block-trailing-semicolon": "always",//每个属性声明末尾都要加分号"declaration-empty-line-before": [//第一条属性声明前不允许有空行"never",{ ignore: [ "after-declaration" ] }],"rule-empty-line-before": [//每个样式规则前后都有空行，除了第一条规则与规则前有注释"always",{ except: [ "after-single-line-comment", "first-nested" ] }],"max-empty-lines": 1,//不允许超过一行的空行"no-eol-whitespace": true,//每行句末不允许有多余空格"no-missing-end-of-source-newline": true,//文件末尾需要有一个空行//大小写处理"unit-case": "lower","color-hex-case": "upper","value-keyword-case": "lower","function-name-case": "lower","property-case": "lower","at-rule-name-case": "lower","selector-pseudo-class-case": "lower","selector-pseudo-element-case": "lower","selector-type-case": "lower","media-feature-name-case": "lower",/****** */"block-opening-brace-newline-after": ["always"],"block-closing-brace-newline-before": ["always"],/*** demo * 正确* a{* color:red* }* * 错误* a{color:red}* a{color:red* }* a{* color:red}*//****** */// "selector-class-pattern":"^[a-z][a-zA-Z0-9]+$",//className命名为小驼峰},// 忽略其他文件，只校验样式相关的文件ignoreFiles: ["node_modules/**/*","public/**/*","build/**/*","**/*.js","**/*.jsx","**/*.tsx","**/*.ts",],
};

配置stylelint时常见问题

stylelint中className的命名

如果需要屏蔽不必要的文件，可以在项目根目录添加 .stylelintignore，并添加一下内容

node_modulesdist
public
docs
bin.husky
.local
.vscode
.idea
.cache*.md
*.woff
*.ttf

7.配置Git Hook
husky是一个gitHook工具，可以配置 git 的一些钩子，这里配置一个commit钩子。
在 git commit 命令运行时先校验 lint（eslint, stylelint 等）是否通过，未通过则不予提交。

lint-staged 是一个在 git 暂存文件上运行 lint 校验的工具，配合 husky 配置 commit 钩子，用于 git commit 前的强制校验

yarn add husky lint-staged --dev

{"scripts": {"precommit": "lint-staged","lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx"},"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"**/*.less": "stylelint --syntax less","**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js","**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]}
}

在每次 git commit 之前会进入工作区文件扫描，自动修复 eslint/stylelint 问题再使用 prettier 自动格式化，最后再提交到工作区。

注意⚠️：必选先使用git init 初始化 git 仓库，之后使用 husky 才能生效