2019. 07. 23 이머시브 수업 9주차 - 2일(react native + typescript set up)

react-native typescript set up

tslint.json set up

{
  "extends": [
    "tslint:latest",
    "tslint-eslint-rules",
    "tslint-react-recommended",
    "tslint-config-prettier",
    "tslint-config-airbnb",
    "tslint-react-native"
  ],
  "rules": {
    "import-name": [
      true,
      {
        "lodash": "_",
        "fp": "_",
        "server": "ReactDOMServer"
      }
    ],
    "ordered-imports": [true],
    "quotemark": [true, "single", "jsx-single", "avoid-escape"],
    "semicolon": [true, "always"],
    "member-access": [false],
    "member-ordering": [false],
    "trailing-comma": [
      true,
      {
        "singleline": "never",
        "multiline": "always"
      }
    ],
    "prettier": true,
    "no-empty": false,
    "no-submodule-imports": false,
    "no-implicit-dependencies": false,
    "no-constant-condition": false,
    "triple-equals": [true, "allow-undefined-check"],
    "ter-indent": [
      true,
      2,
      {
        "SwitchCase": 1
      }
    ],
    "no-duplicate-imports": false,
    "jsx-alignment": true,
    "jsx-no-bind": true,
    "jsx-no-lambda": false,
    "prefer-template": [true, "allow-single-concat"],
    "eofline": true,
    "max-line-length": [
      true,
      { "limit": 120, "ignore-pattern": "^import |^export {(.*?)}" }
    ],
    "rulesDirectory": ["node_modules/tslint-eslint-rules/dist/rules"],
    "ter-arrow-parens": [false, "as-needed", { "requireForBlockBody": true }]
  }
}

tscongit.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react-native",
    "outDir": "build",
    "rootDir": "src",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "skipLibCheck": true,
    "declaration": true,
    "noUnusedLocals": true,
    "sourceMap": true
  },
  "exclude": ["node_modules", "build", "__tests__", "index.js", "index.ios.js"]
}

eslintrc.json

{
  "parser": "babel-eslint",
  "parserOptions": { "ecmaVersion": 2018 },
  "env": { "node": true, "es6": true },
  "extends": ["airbnb", "airbnb-typescript/base"],
  "rules": {
    "no-console": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx", "./"] }
    ],
    "jsx-a11y/accessible-emoji": "off",
    "arrow-parens": [2, "as-needed"],
    "no-restricted-syntax": ["error", "ForInStatement"]
  }
}

rn-cli.config.js

/* eslint-disable comma-dangle */
module.exports = {
  getTransformModulePath() {
    // eslint-disable-next-line quotes
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    // eslint-disable-next-line quotes
    return ["ts", "tsx", "js", "jsx"];
  }
};

 

이렇게 기본설정을 완료했다 잘 모르겠다면 제일 상단의 link를 따라가보자