关闭 vscode 自动格式化

1. 设置中搜索 format
2. 去除勾选 Format On Save

增加 husky

1. npm install husky --save-dev
2. 生成配置文件

• 在 package.json 文件的 scripts 下增加执行命令

{
  "scripts":{
    "prepare": "husky install"
  }
}

• 运行 npm run prepare 后会自动生成.husky 文件

增加 pretty-quick 自动格式化，项目中用 prettier 做格式化校验

1. npm install --save-dev prettier pretty-quick

2. 关闭 vscode 自动格式化，测试格式化是否生效

3. 测试流程

   • 在 package.json 文件的 scripts 下增加执行命令

   {
     "scripts":{
      "pretty-quick": "pretty-quick --staged"
     }
   }

   • 执行npm run pretty-quick 报错：经过排查，是代码没有变更记录，代码初始化提交之后，修改文件会出现文件变更

   🔍  Finding changed files since git revision null.
     internal/modules/cjs/loader.js:905
       throw err;
       ^
   
     Error: Cannot find module '@azz/prettier-config'

   • 执行发现会自动美化变更后的文件

结合 husky，prettier，pretty-quick 在提交前对代码做一些自动美化工作

1. 运行npx husky add .husky/pre-commit 创建一个 pre-commit 的 hook
2. 在.husky/pre-commit 文件中加入命令npm run pretty-quick
   • 报错：执行**npx husky add .husky/pre-commit "npm run pretty-quick"**无效，经过排查发现只有 window10 才会有这问题 issues 地址:https://github.com/typicode/husky/issues/1043
3. 在 package.json 文件中增加配置(这一步貌似加不加无所谓)

     "husky": {
       "hooks": {
         "pre-commit": "npm run pretty-quick"
       }
     }

格式化配置文件使用.prettierrc，不使用.prettierrc.js 貌似不生效

module.exports = {
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  singleAttributePerLine: false,
  bracketSameLine: false,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 一行最多 100 字符
  printWidth: 100,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 末尾不需要逗号
  trailingComma: 'es5',
  // 不使用缩进符，而使用空格
  useTabs: false,
};

项目中 tsconfig.json 文件配置说明

1. include 指定编译文件所在目录
2. exclude 指定不需要编译的目录
3. extends 指定要继承的配置文件
4. files 指定被编译的文件 详细中文配置说明https://blog.csdn.net/extremeexplorer/article/details/117606486

问题记录

1. 文件“d:/Desktop/antd/willow-hooks/hooks/useAsyncEffect/index.ts”不是模块。 问题原因：

• 确保 tsconfig.json 中 rootDir 路径正确
• useAsyncEffect/index.ts 文件下没有内容导出

2. implicitly has an 'any' type 问题原因：

• 参数中没有类型定义，会被类型推导为 any
• 举例

// 此时a会被类型推导为any，但是tsconfig.json中noImplicitAny：true，编译时会被认为不合法
function example(a) {}
// 合法写法
function example(a: any) {}

• 修改 tsconfig.json 配置

{
  "noImplicitAny": false
}