優雅地使用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 和更多的?

$ 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並且不要讓?滑入你的程式碼庫！對暫存區概念不熟悉的同學可以看下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