優雅地使用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