项目规范先行(路径别名,prettier,eslint,commitlint)

225 阅读1分钟

创建一个项目: npx create-react-app test --template typescript

进入项目: cd test

编译器补全路径提示: 进入 tsconfig.json 添加 "baseUrl": "./src" 配置

首先,在本地安装 Prettier: yarn add --dev --exact prettier

然后,创建一个空的配置文件,让编辑器和其他工具知道您正在使用 Prettier: echo {}> .prettierrc.json

接下来,创建一个 .prettierignore 文件,让Prettier CLI 和编辑器知道哪些文件不能格式化。下面是一个例子:

# Ignore artifacts:
build
coverage

安装 lint-staged 使代码在commit前进行格式化 npx mrm lint-staged

添加文件扩展名,添加 "*.{js,css,md,ts,tsx}": "prettier --write"package.json 文件中的 lint-staged 对象。

安装 eslint-config-prettier: yarn add eslint-config-prettier --save-dev

然后,添加 "prettier"package.json 文件中的 extends 数组。确保把它放在最后,这样它就有机会覆盖其他配置,示例:

"extends": [
      "react-app",
      "react-app/jest",
      "prettier"
]

安装 commitlint cli 和常规配置: yarn add @commitlint/{config-conventional,cli} --save-dev

对于Windows系统: yarn add @commitlint/config-conventional @commitlint/cli --save-dev

配置 commitlint 使用常规配置: echo " module.exports = {extends: ['@commitlint/config-conventional']} " > commitlint.config.js

安装husky: yarn add husky --dev

激活hooks: yarn husky install

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