Atom で TypeScript の開発環境を構築する

前回 Angular 環境をしたので、引き続き Mac 環境での開発環境準備。

Atom のインストール

Angular 開発用環境としてのエディタは使い慣れていればなんでも良い。僕は atom で。atom は新規インストール後の起動時にコマンドラインツールのインストールを促されるのでそのままインストール。 因みにエディタの他候補として試してみたのは以下。

• Visual Studio Code -> 良い感じだったけど絶妙なところ（インデントやらコード補完の挙動）で馴染めず断念。単純に好みの問題。
• WebStorm -> なんか馴染めませんでした。これも単純に好みの問題。

という感じで、とりあえず普通に好みで選ぶことになるのかと。

Atom に TypeScript のインストール

Angular 開発での推奨言語ということで Atom に TypeScript のインストール。を、しようと思ったのだがよくよく考えると Angular CLI を利用する場合は TypeScript のコンパイルは Angular CLI がやってくれるので Atom に TypeScript のインストールはしなくても良い。折角なので入れておきたい場合は以下手順で。

Atom を開いて ⌘ + , で環境設定呼び出して Install の項目から TypeScript で検索すると atom-typescript が出てくるのでそこからインストールでも良いし、ターミナルで以下でも良い。

apm install atom-typescript

余談ですが TypeScript は単純なところで

• クラス構文が書ける
• 静的型付け

な点が便利で、コンパイルすると Javascript を生成してくれる訳ですが、最終的に js を吐いているというのはなかなか荒技だなぁと思っていたところ、その流れを @oishi さんとの雑談で「ゴミを綺麗に分別して最後に纏めて焼却している感じ」という表現を聞いて、神表現かよっ、と衝撃を受けました（誤解の無いように補足しておきますと TypeScript を dis っているという訳でなくあくまでも単なる面白雑談ということで^^:）。

静的コード解析ツールのインストール

静的コード解析がないと普通につらいのでインストール。

Linter のインストール

静的コード解析ツールの親玉。TypeScript のインストール時同様に環境設定の Install の項目から Linter で検索、もしくは、ターミナルで以下。

apm install linter

因みに親玉候補として Atom-Lint というのもあるらしいが使ったことが無いのでどちらが良いのかは不明。

tslint のインストール

Linter だけだと TypeScript を解析出来ないのでインストール。

apm install linter-tslint

Atom 再起動

Linter と tslint を入れたら ⌘ + Q で Atom を再起動。再起動後 Atom 上で Linter の各種表示に必要な

• linter-ui-default
• busy-signal

を入れるかダイアログが出るので Yes を選択して入れる。

設定ファイルとか

tslint を動作させる場合、解析ライブラリと解析ルールの json ファイルが必要。Angular CLI を利用する場合は ng new [アプリ名] で生成されるファイル一式に含まれるので基本的には意識しなくて良い。Angular CLI を抜きにして考えたい場合は このあたりの記事 を参照。

scss を使う場合で Linter 使用

scss を使う場合で linter を使用したい時の手順。

scss_lint のライブラリインストール

Ruby が必要だがデフォルトで入っているもので問題無いのでターミナルで Ruby のコマンドを実行。

sudo gem install scss_lint

linter-scss-lint をインストール

apm install linter-scss-lint

解析ルールファイル

scss の解析ファイルは yml 形式のファイルになる。とりあえず ここ の内容をコピペして Angular CLI で作成したアプリケーションのルートディレクトリに .scss-lint.yml というファイル名で設置。解析ルールを細かく調整したい場合は こちら を参照。

他 Atom パッケージ

入れておくと便利パッケージメモ。また改めて纏めようと思いますがとりあえず思いついたものを。

• atom-sublime-select
  短形選択の挙動追加プラグイン。挙動はここの記事参照。
• platformio-atom-ide-terminal
  Atom の画面でターミナル呼び出し。

とりあえず以上で Angular * Atom の最低限の環境は出来たはず。

次は GrapeCity の Wijmo の入れ方を整理 しようと思います。

2020/01/28 タイトルを「Angular 開発用環境として Atom を利用する」から「Atom で TypeScript の開発環境を構築する」に変更いたしました。