create-react-app with typescript のセットアップメモ

npx create-react-app my-app --template typescript

あるべると

npx eslint --init

What type of modules does your project use?
JavaScript modules（import/export)

Which framework does your project use?
React

Does your project use TypeScript?
Yes

Where does your code run?
Browser

How would you like to define a style for your project?
Use a popular style guide

Which style guide do you want to follow?
Airbnb

What format do you want your config file to be in?
JSON

Would you like to install them now?
yes

Which package manager do you want to use?
npm

あるべると

.eslintrc.json

"extends": [
  "react-app",      // package.jsonのeslintConfig から移動
  "react-app/jest", // package.jsonのeslintConfig から移動
  "plugin:react/recommended",
  "airbnb",
]

あるべると

追記

.eslintrc.json

"rules": {
  "react/jsx-one-expression-per-line": 0,
  "react/jsx-filename-extension": ["warn", {"extensions": [ ".jsx", ".tsx" ]}]
}

あるべると

追記

.eslintrc.json

"extends": [
  "react-app",
  "react-app/jest",
  "plugin:react/recommended",
  "airbnb",
  "plugin:@typescript-eslint/recommended",
  "plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"parserOptions": {
  "project": "./tsconfig.json",
},

あるべると

拡張子なしimportの許可

eslintrc.json

"extends": [
  "react-app",
  "react-app/jest",
  "plugin:react/recommended",
  "airbnb",
  "plugin:@typescript-eslint/recommended",
  "plugin:@typescript-eslint/recommended-requiring-type-checking",
  "plugin:import/errors",     // 追加
  "plugin:import/warnings",   // 追加
  "plugin:import/typescript"  // 追加
],
"plugins": [
  "react",
  "@typescript-eslint",
  "import"                    // 追加
],
"rules": {
  // ... ...
  "import/extensions": [
    "error",
    "ignorePackages",
    {
      "js": "never",
      "jsx": "never",
      "ts": "never",
      "tsx": "never"
    }
  ]
}
"settings": {
  "import/resolver": {
    "node": {
      "extensions": [
        ".js",
        ".jsx",
        ".ts",
        ".tsx"
      ]
    }
  }
}

あるべると

アロー関数を許可

追記

.eslintrc.json

"rules": {
  "react/function-component-definition": [
    2,
    { "namedComponents": "arrow-function" }
  ]
}

あるべると

package.json

    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "lint": "eslint --fix --ext .jsx,.js,.tsx,.ts src/" // 追記
    },

npm run lint

あるべると

aliasによるimportのためにreact-app-rewiredを入れると良いらしいが公式非推奨&設定がめんどくさそうなので一旦保留

あるべると

npm install --save-dev  prettier eslint-config-prettier

eslintrc.json

"extends": [
  "react-app",
  "react-app/jest",
  "plugin:react/recommended",
  "airbnb",
  "plugin:@typescript-eslint/recommended",
  "plugin:@typescript-eslint/recommended-requiring-type-checking",
  "plugin:import/errors",
  "plugin:import/warnings",
  "plugin:import/typescript",
  "prettier" // 追加
]

.prettierrc.json

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

.prettierignore

build

package.json

"scripts": {
  "format": "prettier --write ./src/**/*.{ts,tsx}"
},

あるべると

commit前にformatとlintを実行

このスクラップは2022/09/22にクローズされました