|
| 1 | +========================== |
| 2 | +基本の環境構築 |
| 3 | +========================== |
| 4 | + |
| 5 | +環境構築の共通部分を紹介しておきます。 |
| 6 | +プロジェクトでのコーディングであれば、誰が書いても同じスタイルになるなど、コード品質の統一が大切になりますので、単なる個人用の設定ではなく、それをシェアできるというのも目的として説明していきます。 |
| 7 | +ここでは、基本的にすべてのプロジェクトでJest、ESLint、Prettierなどを選択しています。まあ、どれも相性問題が出にくい、数年前から安定して存在している、公式で推奨といった保守的な理由ですね。きちんと選べば、「JSはいつも変わっている」とは距離を置くことができます。 |
| 8 | + |
| 9 | +.. todo:: |
| 10 | + |
| 11 | + ESLintのTypeScript対応はまだまだ開発途上で厳しそうなのでTSLintに書き戻す? |
| 12 | + |
| 13 | +* Jest |
| 14 | + |
| 15 | + テスティングフレームワークはたくさんありますが、avaとJestがテスト並列実行などで抜きん出ています。JestはTypeScript用のアダプタが完備されています。avaはBabel/webpackに強く依存しており、単体で使うなら快適ですが、他のBabel Configと相性が厳しくなるのでJestにしています。 |
| 16 | + |
| 17 | +* ESLint |
| 18 | + |
| 19 | + 公式が押しているのでこれですね。 |
| 20 | + |
| 21 | + * @typescript-eslint/eslint-plugin |
| 22 | + |
| 23 | + ESLintにTypeScriptの設定を追加するプラグインです |
| 24 | + |
| 25 | +* Prettier |
| 26 | + |
| 27 | + TypeScript以外のSCSSとかにも対応していたりします。現在はシェアが伸びています。 |
| 28 | + |
| 29 | + * eslint-config-prettier |
| 30 | + |
| 31 | + eslint側で、Prettierと衝突する設定をオフにするプラグインです |
| 32 | + |
| 33 | +* npm scripts |
| 34 | + |
| 35 | + ビルドは基本的にMakefileとかgulpとかgruntとかを使わず、npm scriptsで完結するようにします。ただし、複数タスクをうまく並列・直列に実行する、ファイルコピーなど、Windowsと他の環境で両対応のnpm scriptsを書くのは大変なので、mysticateaさんのQiitaのエントリーのnpm-scripts で使える便利モジュールたちを参考に、いくつかツールを利用します。 |
| 36 | + |
| 37 | +* Visual Studio Code |
| 38 | + |
| 39 | + TypeScript対応の環境で、最小設定ですぐに使い始められるのはVisual Studio Codeです。しかも、必要な拡張機能をプロジェクトファイルで指定して、チーム内で統一した環境を用意しやすいので、推奨環境として最適です。EclipseなどのIDEの時代とは異なり、フォーマッターなどはコマンドラインでも使えるものを起動するケースが多いため、腕に覚えのある人はVimでもEmacsでもなんでも利用は可能です。 |
| 40 | + |
| 41 | +.. todo:: lyntのTypeScript対応状況を注視する |
| 42 | + |
| 43 | +作業フォルダの作成 |
| 44 | +------------------------- |
| 45 | + |
| 46 | +出力先フォルダの作成はプロジェクト構成ごとに変わってくるため、入力側だけをここでは説明します。 |
| 47 | +プロジェクトごとにフォルダを作成します。 |
| 48 | +ウェブだろうがライブラリだろうが、 ``package.json`` が必要なツールのインストールなど、すべてに必要になるため、 ``npm init`` でファイルを作成します。 |
| 49 | + |
| 50 | +.. code-block:: bash |
| 51 | +
|
| 52 | + $ mkdir projectdir |
| 53 | + $ cd projectdir |
| 54 | + $ npm init -y |
| 55 | + $ mkdir src |
| 56 | + $ mkdir __tests__ |
| 57 | +
|
| 58 | +外部に公開しないパッケージの場合には、 ``"private": true`` という設定を忘れずにいれましょう。 |
| 59 | + |
| 60 | +srcフォルダ以下に.tsファイルを入れて、出力先のフォルダ以下にビルド済みファイルが入るイメージです。仮にこれを ``dist`` とすると、これはGitでは管理しませんので ``.gitignore`` に入れておきます。 |
| 61 | + |
| 62 | +.. code-block:: text |
| 63 | + :caption: .gitignore |
| 64 | +
|
| 65 | + dist |
| 66 | + .DS_Store |
| 67 | + Thumbds.db |
| 68 | +
|
| 69 | +もし成果物を配布したい場合は、それとは逆に、配布対象はdistとルートのREADMEとかだけですので、不要なファイルは配布物に入らないように除外しておきましょう。これから作るTypeScriptの設定ファイル類も外して起きましょう。 |
| 70 | + |
| 71 | +.. code-block:: text |
| 72 | + :caption: .npmignore |
| 73 | +
|
| 74 | + dist |
| 75 | + .DS_Store |
| 76 | + Thumbds.db |
| 77 | + __tests__/ |
| 78 | + src/ |
| 79 | + tsconfig.json |
| 80 | + jest.config.json |
| 81 | + .eslintrc |
| 82 | + .travis.yml |
| 83 | + .editorconfig |
| 84 | + .vscode |
| 85 | +
|
| 86 | +ビルドのツールのインストールと設定 |
| 87 | +-------------------------------------- |
| 88 | + |
| 89 | +まず、最低限、インデントとかの統一はしたいので、editorconfigの設定をします。editorconfigを使えばVisual Studio、vimなど複数の環境があってもコードの最低限のスタイルが統一されます(ただし、各環境で拡張機能は必要)。また、これから設定するprettierもこのファイルを読んでくれます。 |
| 90 | + |
| 91 | +.. code-block:: ini |
| 92 | + :caption: .editorconfig |
| 93 | +
|
| 94 | + root = true |
| 95 | +
|
| 96 | + [*] |
| 97 | + indent_style = space |
| 98 | + indent_size = 4 |
| 99 | + end_of_line = lf |
| 100 | + charset = utf-8 |
| 101 | + trim_trailing_whitespace = true |
| 102 | + insert_final_newline = true |
| 103 | +
|
| 104 | +ツール群はこんな感じで入れました。 |
| 105 | + |
| 106 | +.. code-block:: bash |
| 107 | +
|
| 108 | + $ npm install --save-dev typescript prettier |
| 109 | + eslint @typescript-eslint/eslint-plugin |
| 110 | + eslint-plugin-prettier |
| 111 | + eslint-config-prettier npm-run-all |
| 112 | +
|
| 113 | +設定ファイルは以下のコマンドを起動すると雛形を作ってくれます。これを対象の成果物ごとに編集していきます。 |
| 114 | +詳細は各パッケージの種類の賞で取り扱います。 |
| 115 | + |
| 116 | +.. code-block:: bash |
| 117 | +
|
| 118 | + $ npx tsc --init |
| 119 | +
|
| 120 | +ESLintの設定も作ります。Prettierと連携するようにします。 |
| 121 | + |
| 122 | +.. code-block:: json |
| 123 | + :caption: .eslintrc |
| 124 | +
|
| 125 | + { |
| 126 | + "plugin": [ |
| 127 | + "prettier" |
| 128 | + ], |
| 129 | + "extends": [ |
| 130 | + "plugin:@typescript-eslint/recommended", |
| 131 | + "plugin:prettier/recommended" |
| 132 | + ], |
| 133 | + "rules": { |
| 134 | + "no-console": [ |
| 135 | + false |
| 136 | + ], |
| 137 | + "@typescript-eslint/indent": "ingore", |
| 138 | + "prettier/prettier": "error" |
| 139 | + } |
| 140 | + } |
| 141 | +
|
| 142 | +ESLintを起動するタスクを ``package.json`` に追加しましょう。 |
| 143 | +これで、 ``npm run lint`` や ``npm run fix`` でコードチェックをしたり、スタイル修正が行えます。 |
| 144 | + |
| 145 | +.. code-block:: json |
| 146 | + :caption: package.json |
| 147 | +
|
| 148 | + "scripts": { |
| 149 | + "lint": "eslint .", |
| 150 | + "fix": "eslint --fix ." |
| 151 | + } |
| 152 | +
|
| 153 | +テスト |
| 154 | +----------- |
| 155 | + |
| 156 | +ユニットテスト環境も作ります。TypeScriptを事前に全部ビルドしてからJasmineとかも見かけますが、公式でTypeScriptを説明しているJestにしてみます。 |
| 157 | + |
| 158 | +.. code-block:: bash |
| 159 | +
|
| 160 | + $ npm install --save-dev jest ts-jest @types/jest |
| 161 | +
|
| 162 | +scripts/testと、jestの設定を追加します。古い資料だと、transformの値がnode_modules/ts-jest等になっているのがありますが、今はts-jestだけでいけます。 |
| 163 | + |
| 164 | +.. code-block:: json |
| 165 | + :caption: package.json |
| 166 | +
|
| 167 | + { |
| 168 | + "scripts": { |
| 169 | + "test": "jest" |
| 170 | + } |
| 171 | + } |
| 172 | +
|
| 173 | +.. code-block:: js |
| 174 | + :caption: jest.config.js |
| 175 | +
|
| 176 | + module.exports = { |
| 177 | + transform: { |
| 178 | + "^.+\\.tsx?$": "ts-jest" |
| 179 | + }, |
| 180 | + moduleFileExtensions: [ |
| 181 | + "ts", |
| 182 | + "tsx", |
| 183 | + "js", |
| 184 | + "json", |
| 185 | + "jsx" |
| 186 | + ] |
| 187 | + }; |
| 188 | +
|
| 189 | +Visual Studio Codeの設定 |
| 190 | +-------------------------------- |
| 191 | + |
| 192 | +Visual Stuido Codeでフォルダを開いたときに、eslintの拡張と、editorconfigの拡張がインストールされるようにします。 |
| 193 | + |
| 194 | +.. code-block:: json |
| 195 | + :caption: .vscode/extensions.json |
| 196 | +
|
| 197 | + { |
| 198 | + "recommendations": [ |
| 199 | + "dbaeumer.vscode-eslint", |
| 200 | + "EditorConfig.editorconfig" |
| 201 | + ] |
| 202 | + } |
| 203 | +
|
| 204 | +ファイル保存時にeslint --fixが自動実行されるように設定しておきましょう。これでVisual Studio Codeを使う限り、誰がプロジェクトを開いてもコードスタイルが保たれます。eslintプラグインのautoFixOnSaveは、files.autoSaveがoffのときにしか効かないので、それも設定しておきます。 |
| 205 | + |
| 206 | +.. code-block:: json |
| 207 | + :caption: .vscode/settings.json |
| 208 | +
|
| 209 | + { |
| 210 | + "eslint.autoFixOnSave": true, |
| 211 | + "files.autoSave": "off" |
| 212 | + } |
| 213 | +
|
| 214 | +.. todo:: tsdocとかドキュメントツールを紹介 |
0 commit comments