React Native 项目初始化工作

目录
React Native 项目初始化工作
一、目录结构
二、插件配置
eslint
prettier
husky
TypeScript

目录结构

demo
├── .buckconfig
├── .eslintrc.js
├── .gitattributes
├── .prettierrc.js
├── .watchmanconfig
├── android
├── babel.config.js
├── commitlint.config.js
├── index.js
├── ios
├── metro.config.js
├── package.json
├── src
|  ├── app.json
|  ├── App.tsx
|  ├── components
|  ├── reduxState
|  ├── routers
|  ├── screens
|  |  └── Navigation
|  ├── types
|  └── utils
├── tsconfig.json
└── yarn.lock

依赖配置

eslint

1. 配置.eslintrc.js 文件

   module.exports = {
     root: true,
     extends: '@react-native-community',
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint'],
     rules: {
    semi: ['error', 'never'],
    'linebreak-style': 'error',
    'comma-dangle': ['warn', 'never'],
    'no-unused-vars': 'warn',
    'react-native/no-inline-styles': 'off',
    'eslint-disable-next-line': 'off'
     }
   }
   

prettier

1. 配置.prettierrc.js 文件修改

   module.exports = {
     bracketSpacing: false,
     jsxBracketSameLine: true,
     singleQuote: true,
     endOfLine: 'lf',
     semi: false,
     trailingComma: 'none'
   }
   

stylelint

1. 安装

   yarn add --dev stylelint stylelint-config-standard stylelint-config-css-modules stylelint-config-prettier stylelint-config-rational-order       stylelint-declaration-block-no-ignored-properties stylelint-order
   

2. 配置 .stylelintrc文件

   // package.json  
   {
     "extends": [
       "stylelint-config-standard",
       "stylelint-config-css-modules",
       "stylelint-config-rational-order",
       "stylelint-config-prettier"
     ],
     "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
     "rules": {
       "no-descending-specificity": null,
       "plugin/declaration-block-no-ignored-properties": true,
       "at-rule-no-unknown": null
     }
   }
   

husky

1. 安装

   yarn add --dev husky
   npm global add lint-staged @commitlint/cli  @commitlint/config-conventional
   

2. 配置

   // package.json  
   {
     ...
     "lint-staged": {
       "*.{ts,tsx,js,jsx}": [
        "prettier -w",
         "eslint"
       ]
     },
     "husky": {
       "hooks": {
         "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
         "pre-commit": "lint-staged"
       }
     },
   ...
   }
   

3. 根目录下创建文件 commitlint.config.js

   module.exports = {
     extends: ['@commitlint/config-conventional']
   }
   

TypeScript

通过TypeScript使用自定义路径别名

1. 编辑您的文件tsconfig.json以具有自定义的路径映射。将的根目录中的任何内容设置src为可用，而无需前面的路径引用，并允许使用test/File.tsx以下命令访问任何测试文件：

       "target": "esnext",
   +     "baseUrl": ".",
   +     "paths": {
   +       "*": ["src/*"],
   +       "tests": ["tests/*"],
   +       "@components/*": ["src/components/*"],
   +     },
       }
   

2. 通过添加新的依赖项来配置Babel端babel-plugin-module-resolver：

   yarn add --dev babel-plugin-module-resolver
   

3. 最后，配置您的babel.config.js（请注意，您的语法与的语法babel.config.js不同tsconfig.json）：

   {
     plugins: [
   +    [
   +       'module-resolver',
   +       {
   +         root: ['./src'],
   +         extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
   +         alias: {
   +           "tests": ["./tests/"],
   +           "@components": "./src/components",
   +         }
   +       }
   +     ]
     ]
   }