モダンなフロントエンド開発向けに、作業環境をサクッと整備して、ガンガン開発効率をあげましょう。
VSCode + TypeScript + React の構成を想定しています。
Visual Studio Code
圧倒的人気1を誇るテキストエディタ。略称 VSCode 。
- スピード（起動／実行速度）良し
- コスト（オープンソース／無料）良し
- 品質（強力なコード補完、見やすいUI 等々）良し
で三拍子揃ってるので言うことなし。
ESLint
JavaScript (EcmaScript) 用リンター。
GitHub Star 数 17.5k 。リントツールとして定番中の定番。
VSCode 拡張機能は VSCode Marketplace から ESLint で検索してインスール。
Prettier
コードフォーマッタ。
HTML 、CSS 、 JavaScript を始めとして様々なプログラミング言語をサポート。
VSCode はもちろん Vim や Emacs 、Sublime Text といったテキストエディタもサポート。
VSCode 拡張機能は VSCode Marketplace から Prettier で検索してインスール。
Node.js
JavaScript 実行環境。
サーバサイド JavaScript とも言われる。
インストール時に同梱されている npm（パッケージマネージャ）がもはやフロントエンド開発において必須になっている。npx も便利。
TypeScript
JavaScript 拡張言語。
静的型付け可能な JavaScript と言われる。みんな大好き、型。
React
UI 構築用の JavaScript ライブラリ。
Vue.js や Angular とともにフロントエンドフレームワークとして人気。
世界ではその他 2 つよりも圧倒的な人気2がある。
みんな React やろう！
最後に
VSCode のターミナルから以下コマンドを実行して、早速開発を始めましょう！
my-app は任意の名前を設定してください。
$ npx create-react-app [my-app] --template typescript
-
The State of JavaScript 2019 の Other Tools における Text Editors において
Which text editor(s) do you regularly use?で 56% 以上を取得 ↩ -
npm trends では React が Vue.js や Angular のダウンロード数を圧倒している。 ↩