# react-and-typescript-projects

**Repository Path**: rhyanne/react-and-typescript-projects

## Basic Information

- **Project Name**: react-and-typescript-projects
- **Description**: react & typescript 
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-03-05
- **Last Updated**: 2022-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript

## README

# REACT && TYPESCRIPT PROJECTS

## ESLint && Prettier

```
yarn add eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-prettier eslint-config-prettier -D
```

### `.eslintrc.js`

```js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    amd: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersions: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended'],
  plugins: ['react'],
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
  },
  settings: {
    react: {
      version: 'detect', // 探测当前 node_modules 安装的 react 版本
    },
  },
};
```

### `.prettierrc`

```json
{
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "printWidth": 100,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}
```

### `.editorconfig`

```ini
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
```

## husky && lint-staged

#### Automatic Install

```shell
# 1
npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2

# 2 lint-staged 检测提交暂存区的代码是否合规
yarn add lint-staged -D

# 3 commitlint  检测提交 commit 提交记录是否符合规范  (暂时不考虑)
yarn add @commitlint/config-conventional @commitlint/cli -D
```

```
# package.json 中添加 scripts ：
# npm set-script prepare "husky install"
"scripts": {
  "prepare": "husky install
}
```

执行 `yarn prepare`

```
# 在 .husky 添加文件 pre-commit
# npx husky add .husky/pre-commit "npx lint-staged -allow-empty $1"
```