開発環境の構築に関して記載します。ここではスタイルairbnbを採用しまし。
- 作業０.前提条件
- 作業１.VSCodeにESLintを入れる（各自）
- 作業２.必要モジュールをインストールする（各自）
- 作業３.「.eslintrc.json」を作成する（代表者のみ）
- 作業４.VSCodeの設定ファイルを変更する（各自）
- 参考文献
作業０.前提条件
作業１.VSCodeにESLintを入れる（各自）
1-1. VSCodeを起動する
1-2. 「拡張機能」を開く（サイドバー、またはメインメニューの「表示」->「拡張機能」）
1-3. 表示された検索窓に「ESLint」と入力してください。
- 「ESLint(1.9.0)」（2019.5.15時点）が表示されます。（発行者名：Dirk Baeumer）
1-4. 「インストール」をクリックする。
1-5. 「有効」にする。
作業２.必要モジュールをインストールする（各自）
※ この作業を実施しないとESLintのライブラリーロードに失敗します。
（ESLintが有効になりません。）
※この作業（以下に記載するコマンドの実施）によって得られるの成果物は主に２つです。
①．Package.jsonへの追記（各コマンドで-Dオプションを有効にした場合）
②．「node-modules」への必要モジュールのインストール
2-1.コマンドプロンプト（macの場合はターミナル）を起動する
2-2.作業フォルダ（ディレクトリ）へ移動
コマンドプロンプト（macの場合はターミナル）のカレントディレクトリをESLintを導入するワークスペースフォルダ（「package.json」が存在するフォルダ）に変更する。
2−3. 以下のコマンドを実行する
2-3-1.eslintのインストール（-Dは代表者のみでOK）
// 代表者が実施するコマンド npm i -D eslint // その他の人が実施するコマンド npm i eslint
2-3-2.airbnbスタイルのインストール
// 代表者が実施するコマンド npm i -D eslint-config-airbnb-base eslint-plugin-import // その他の人が実施するコマンド npm i eslint-config-airbnb-base eslint-plugin-import
node-modulesフォルダが生成され、生成されたフォルダの内部に各種必要パッケージがインストールされます。
各種コマンドで「-D」をつけた場合、Package.jsonが更新されます。
作業３.「.eslintrc.json」を作成する（代表者のみ）
※ 共同開発する場合は、代表者が作成したファイルを（Git等で）共有すればOKです。
3-1. プロジェクトルートに.eslintrc.jsonを置き、設定とルールを書いていきます。
{
"extends": "airbnb-base"
}
{
"env": {
"node": true,
"browser": false,
"es6": true
},
"extends": "airbnb-base"
}
作業４.VSCodeの設定ファイルを変更する（各自）
4-0. VSCodeを起動する
4-1. メインメニューの「ファイル->基本設定->設定」で設定画面を開く。
（macの場合は「Code->基本設定->設定」）
4-2. UI上右上「｛ ｝」ボタン(設定（JSONを開く）) をクリックし、エディター表示に変更する。
4-3. 以下の記述を追加する
{
"eslint.enable": true,
"eslint.autoFixOnSave": true
}
ここまで作業を行うとソースコード上に赤波が多数出現するはずです ※ セーブに連動してフォーマットが修正される内容と、修正されない内容があります。
＜補足＞
※ 最後まで作業をやった段階で、 作業3のファイルの「"extends": "airbnb-base"」を削除する(ルール無しでESLintを動かした状態)と警告表示がなくなります。（->airbnbの設定が読み込めていそうです）
参考文献
- airbnbスタイルガイド（原文）JavaScript Style Guide
- airbnbスタイルガイド（日本語）javascript-style-guide
- 手軽にeslint-config-airbnbを導入
