优雅地使用TypeScript开发React Native应用

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": true,
    "jsx": "react-native",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": ["node_modules"]
}
复制代码

{
    "eslint.validate": [
          "javascript",
          "javascriptreact",
          {
              "language": "typescript",
              "autoFix": true
          },
          {
              "language": "typescriptreact",
              "autoFix": true
          },
          {
              "language": "vue",
              "autoFix": true
          },
          {
              "language": "html",
              "autoFix": true
          }
    ],
    "eslint.autoFixOnSave": true,
}
复制代码

module.exports = {
  env: {
    es6: true,
    node: true,
    jest: true,
    'react-native/react-native': true,
  },
  extends: [
    'airbnb',
    'plugin:react-native/all',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      impliedStrict: true,
    },
    ecmaVersion: 2018,
    project: './tsconfig.json',
    sourceType: 'module',
  },
  plugins: [
    'import',
    'react',
    'react-native'
  ],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  rules: {
    'global-require': 0,
    'linebreak-style': [2, 'unix'],
    'no-console': [
      'error',
      {
        allow: ['warn', 'error', 'info', 'log'],
      },
    ],
    'lines-between-class-members': [
      2,
      'always',
      {
        exceptAfterSingleLine: true,
      },
    ],
    'no-use-before-define': [
      2,
      {
        functions: true,
        classes: true,
        variables: false,
      },
    ],
    'prefer-destructuring': [
      2,
      {
        array: false,
        object: true,
      },
    ],
    'react/prefer-stateless-function': 0,
    'react/prop-types': 0,
    'react/jsx-filename-extension': [
      2,
      {
        extensions: ['.js', '.jsx', '.tsx'],
      },
    ],
    'jsx-a11y/accessible-emoji': 0,
    'react-native/no-color-literals': 0,
    '@typescript-eslint/no-use-before-define': [
      2,
      {
        functions: true,
        classes: true,
        variables: false,
      },
    ],
    '@typescript-eslint/explicit-function-return-type': {
      allowExpressions: true,
      allowTypedFunctionExpressions: true,
    },
  },
}
复制代码

# /node_modules/* and /bower_components/* ignored by default
复制代码

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[*.gradle]
indent_size = 4

[BUCK]
indent_size = 4
复制代码

Git pre-commit Hook

pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，不过你可以用 git commit --no-verify 来绕过这个环节。 你可以利用该钩子，来检查代码风格是否一致（运行类似 lint 的程序）、尾随空白字符是否存在（自带的钩子就是这么做的），或新方法的文档是否适当。

husky: 轻松使用 Git hooks

Husky 能阻止坏的 git commit , git push 和更多的:hankey:

$ yarn add -D husky
复制代码

配置文件

.huskyrc.js

module.exports = {
  hooks: {
    'pre-commit': 'node node_modules/eslint/bin/eslint.js --fix src/**/*.js',
  },
}
复制代码

注意：测试发现直接运行 eslint --fix 使用的是全局的模块。

只使用 husky 的问题

• 性能问题：对整个项目运行一个lint进程很慢，而且linting结果可能无关紧要。
• 效率问题：遗留代码仓库上工作的同学很快会遇到新的问题，开启 Lint 初期，你可能会面临成千上万的 Lint Error 需要修复。部分同学对下面这个图可能并不陌生：只改了文件 A，但是文件 B、C、D 中也有大量错误。

lint-staged: husky的好帮手

针对暂存的git文件运行linters并且不要让:hankey:滑入你的代码库！对暂存区概念不熟悉的同学可以看下git-简明指南

$ yarn add -D husky lint-staged
复制代码

• husky: 被用来添加一些 git 钩子，这里我们需要一个用 pre-commit 在每次 git commit 操作时执行 lint-staged 命令。
• lint-staged: 可以对 git 暂存区文件(也就是你想要 commit 的文件)执行一些操作，这样做即提高了性能又提高了效率。

配置文件

.huskyrc.js

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged',
  },
}
复制代码

lint-staged.config.js

module.exports = {
  "src/**/*.{js,jsx,ts,tsx}": ["eslint --fix", "git add"]
}
复制代码

相对于根目录引入组件

这部分不是必须的，配置也有些繁琐。这里我就只介绍下简单的配置，详细文档请请查阅 babel-plugin-root-import 。

安装

$ yarn add -D babel-plugin-root-import eslint-import-resolver-babel-plugin-root-import
复制代码

babel.config.js

module.exports = {
  ...
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathSuffix: 'src',
        rootPathPrefix: '~',
      },
    ],
  ],
  ...
}
复制代码

.eslintrc.js

{
  settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathSuffix: 'src',
        rootPathPrefix: '~',
      },
    },
  },
}
复制代码

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}
复制代码

支持 .jsx

React Native 都已经内置支持 TypeScript 了，但是却不支持 .jsx 文件后缀。如果你想要使用 .jsx 开发，可以配置 metro.config.js :

module.exports = {
  resolver: {
    sourceExts: ['ts', 'tsx', 'js', 'jsx', 'json', 'mjs']
  },
}
复制代码

相关资料

• Using ESLint and Prettier in a TypeScript Project : TypeScript、ESLint、Prettier、VSCode
• 使用 ESLint + Prettier 简化代码 Review 过程 : Zeit Now、DevOps
• 用Prettier和ESlint来统一提交代码 : ESLint、Prettier、husky、lint-staged
• 用 ESLint 和 Prettier 写出高质量代码 ：ESLint、Prettier、husky、lint-staged
• 使用ESLint+Prettier来统一前端代码风格 ：ESLint、Prettier
• 使用ESLint ＆ Prettier美化Vue代码 ：Vue、ESLint、Prettier、husky、lint-staged、填坑
• 用 husky 和 lint-staged 构建超溜的代码检查工作流 : husky、lint-staged