React、TypeScript 環境構築 その 2

Table of Contents
– その２ではwebpackを３から４へのバージョンアップをしたいと思う。バージョンアップの前にまずいろいろ、未設定なもの追加する。

.prettierrc ファイルを作成する

/react-ts-app/.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 2,
  "printWidth": 120,
  "trailingComma": "es5",
  "jsxBracketSameLine": false,
  "bracketSpacing": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "useTabs": true,
        "tabWidth": 2
      }
    }
  ]
}

~/Library/Application\ Support/Code/User/settings.json

    // TypeScriptで保存時フォーマットを有効化
    "[typescript]": {
        "editor.formatOnSave": true,
    },
    // TypeScript(tsx)で保存時フォーマットを有効化
    "[typescriptreact]": {
        "editor.formatOnSave": true,
    },
    // JavaScriptで保存時フォーマットを有効化
    "[javascript]": {
        "editor.formatOnSave": true,
    },
    // JavaScript(jsx)で保存時フォーマットを有効化
    "[javascriptreact]": {
       "editor.formatOnSave": true,
    },
    "[json]": {
        "editor.formatOnSave": true,
    },
    "[css]": {
      "editor.formatOnSave": true,
      "prettier.stylelintIntegration": true,
    },
    // prettierのシングルクオーテーションオプションをon
    // "prettier.singleQuote": true,
    // 空白を見やすくする。空白が「・」になる
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.wordWrap": "on",
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off"
    },
    "typescript.updateImportsOnFileMove.enabled": "always",

tslint もいろいろ追加

/react-ts-app/tslint.json

{
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ],
  "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "prettier": true,
    "no-console": false, // console のメソッドを許容しない
    "variable-name": [
      true, // 変数名をチェックする
      "ban-keywords", // 予約語の禁止
      "check-format", // lowerCamel と UPPER_SNAKE を許容
      "allow-pascal-case", // UpperCamel を許容
      "allow-leading-underscore" // 先頭の underscore を許容
    ],
    "import-name": false, // import 名の制約 #tslint-microsoft-contrib
    "ordered-imports": false, // import の順序指定
    "interface-name": false, // インターフェース名の制約(Iから始める)
    "no-empty-interface": false, // 空の Interface を許容しない
    "object-literal-sort-keys": false, // オブジェクトリテラルのキーをアルファベット順に並べることを強制する
    "object-literal-shorthand": false, // オブジェクトリテラルの省略記法を推奨する
    "jsx-no-lambda": false, // jsx 内での lambda の使用を許容しない
    "no-submodule-imports": [true, "redux-persist", "redux-saga"]
  }
}

webpack 3 から webpack 4 へアップデートする

/react-ts-app/config/webpack.config.dev.js
module.exports = {
+ mode: 'development',

===省略===

    {
     test: /\.css$/,
+    exclude: /node_modules/,
     use: [
-      require.resolve("style-loader"),
+      'style-loader',
       {

===省略===

/react-ts-app/config/webpack.config.dev.js
    plugins: [
        // Makes some environment variables available in index.html.
        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        // In development, this will be an empty string.
-       new InterpolateHtmlPlugin(env.raw),
+       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),

prettier、tslint を設定したので、各 src 配下のファイルを開き上書きしてタブやインデントなどを揃える

  • このファイルだけ import でエラーになる。型定義はインストールしているが、なんでエラーなのか不明。tslint で除外とかしてもいいが、とりまコメントでエラーにならないようtslint:disable:no-implicit-dependenciesを追加
/react-ts-app/src/components/Button.stories.tsx

// tslint:disable:no-implicit-dependencies
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';