node

2022.11.05

ESLint の初期設定時、Airbnb のスタイルガイドが選択肢に表示されない – 手動インストールする

みなさんこんにちは、ウチイダです。

最近フロントエンドをきちんと学ぼうと思って、Reactのキャッチアップを進めています。

せっかくなのでTypeScriptで開発するようにしているのですが、その際の環境構築でつまづくことがあったので書き留めておきます。

環境

Windows 11 21H2
WSL2 Ubuntu20.04
Node.js v18.12.0
npm 8.19.3

事象：Airbnbのスタイルガイドを選択できない

JavaScriptのスタイルガイドとしてポピュラーなものに、Airbnb が作成しているものがあります。

これをESLintでのチェックに利用しようと思いました。

ESLint を導入する際、以下のコンフィグファイルの初期化コマンドを実行します。

$ npm init @eslint/config

手順を説明しているページなどを見ると、スタイルガイドの選択時にAirbnbが出てくるようだったのですが、ウチイダの環境だとそれが表示されませんでした。

原因：AirbnbのスタイルガイドがTypeScriptに対応していないため

初期設定を行うコマンド eslint-config で行われた修正が原因でした。

ここで、TypeScriptに標準で対応していないスタイルガイドを表示しないように変更されていました。

https://github.com/eslint/create-config/pull/33

自分の作業手順漏れを疑っていたのですが、仕様変更だったんですね。。。

ちなみに、これは最近参加しているコミュニティの方が調べて教えてくれました。感謝！

対応：手動でAirbnbのスタイルガイドを追加する

自動でインストールしてくれないのは仕方ないので、とりあえずeslintrc の生成を済ませて、あとからAirbnbのスタイルガイドを読み込ませるように設定していきます。

1. eslintrc を生成する

スタイルガイドでStandard を選択して、設定を進めます。

次に「依存パッケージをインストールするか」を聞かれるので、no を選んでおきます。

Standardのスタイルガイドのパッケージを後から削除するのであれば、yes でもよいです。

$ npm init @eslint/config
 How would you like to use ESLint? · style

 What type of modules does your project use? · esm

 Which framework does your project use? · react

 Does your project use TypeScript? · No / Yes

 Where does your code run? · browser

 How would you like to define a style for your project? · guide

 Which style guide do you want to follow? · standard-with-typescript

 What format do you want your config file to be in? · JavaScript

Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*

 Would you like to install them now? · No / Yes

A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.cjs file in /home/y-uchiida/develop/eslint_airbnb_none

2. Airbnb のスタイルガイドのパッケージを追加する

npm で、スタイルガイドのパッケージを導入します。

Airbnb のTypeScript のスタイルガイドは本家の設定の拡張なので、本家も含めてインストールします。

$ npm install --save-dev eslint-config-airbnb eslint-config-airbnb-typescript

3. eslintrc にスタイルガイドを読み込ませる

eslintrc を編集して、Airbnb のスタイルガイドを読み込みさせます。

    "extends": [
        "plugin:react/recommended",
        // "standard-with-typescript" // standard スタイルガイドは使わないので消す
        'airbnb', // 追加
        'airbnb-typescript' // 追加
    ],

ちなみに、Reactのプロジェクトかそうでないかによって、利用するパッケージが違うので注意が必要です。

詳しくはGitHubのREADMEをご確認ください…

https://github.com/iamturns/eslint-config-airbnb-typescript#setup

まとめ

ESLintの初期設定を自分でやったことがなかった＆比較的最近の変更で、見つかる情報と齟齬があった（Airbnbが出てくると書いてあるものが多かった）ことでハマってしまいました。

ツールチェイン周りのキャッチアップは大変です…

ちなみに、ウチイダと同じ疑問を持った人がGitHubでissueを立てていました。

やり方を覚えてしまえばなんてことはないですが、手作業インストールするのちょっとだけ面倒ですね…

上記のissueの中で、「将来的に –config オプションを実装する予定があるので、それができたら簡単になるよ」といった旨のコメントがついていました。

https://github.com/eslint/create-config/issues/35#issuecomment-1216457480

早く利用できるようになるといいですね。

それでは以上となります。あなたのお役に立てれば幸いです。

2021.10.14

WSL2 Ubuntu に、nodenv 環境を作る簡単な手順(作業時間１０分未満)

こんにちは、ウチイダです。

PCをセットアップするときにいつも調べている、nodeの環境構築。

そろそろ打ち止めにしたいので、メモリークリップに書き留めておきます。

今回の手順は、以下の環境で動作させました。

Windwos 11 Pro (21H2 ビルド 22000.194)
WSL カーネルバージョン: 5.10.60.1-microsoft-standard-WSL2
Windows Terminal バージョン: 1.10.2714.0
Ubuntu バージョン: 20.04.3 LTS (Focal Fossa)

nodenv installerを使うのがおすすめ

併せてanyenvを使う方法とか、homebrew経由でインストールする方法などが紹介されているサイトも多いですが、とにかく最短でnodeのマルチバージョン環境を整えたいのであれば、nodenv installerを利用するのが良いです。

必要に応じて、各種言語の管理ツールを入れるので良いかなーと思っています。

nodenv の公式リポジトリでも紹介されています。

https://github.com/nodenv/nodenv-installer#nodenv-installer

1. nodenv installer を実行する

使い方はとても簡単で、スクリプトをダウンロードしてきて、実行するだけです。

nodenv installerのgithubのREADMEでは、curlを使ったサンプルコマンドが紹介されているので、それの通りに実行します。

$ curl -fsSL https://raw.githubusercontent.com/nodenv/nodenv-installer/master/bin/nodenv-installer | bash
Installing nodenv with git...
Initialized empty Git repository in /home/y-uchiida/.nodenv/.git/

# ...(中略)...

Running doctor script to verify installation...
Checking for `nodenv' in PATH: /home/y-uchiida/.nodenv/bin/nodenv
Checking for nodenv shims in PATH: OK
Checking `nodenv install' support: /home/y-uchiida/.nodenv/plugins/node-build/bin/nodenv-install (node-build 4.9.59)
Counting installed Node versions: none
  There aren't any Node versions installed under `/home/y-uchiida/.nodenv/versions'.
  You can install Node versions like so: nodenv install 2.2.4
Auditing installed plugins: OK

All done!
Note that this installer doesn't yet configure your shell startup files:
1. You'll want to ensure that `~/.nodenv/bin' is added to PATH.
2. Run `nodenv init' to see instructions how to configure nodenv for your shell.
3. Launch a new terminal window to verify that the configuration is correct.

# nodenvがインストールできているか、バージョンを確認
$ /home/y-uchiida/.nodenv/bin/nodenv -v
nodenv 1.4.0+3.631d0b6

「All done」の表示が出たら、nodenvのインストールは完了です。

2. nodenvのインストールディレクトリにパスを通す

nodenv installerは、パスの追加までは行わないので、パスの追加を行います。

Ubuntuの初期設定であれば、ログインシェルはbashになっていると思いますので、ホームディレクトリの.bashrcの末尾に、以下を追記します。

# nodenv のインストールディレクトリをPATHに追記
export PATH="$HOME/.nodenv/bin:$PATH"

# nodenvを動作させるための設定を実行
eval "$(nodenv init -)"

追記が終わったら、bashを立ち上げなおすか、sourceコマンドで変更を反映します。

$ source ~/.bashrc

# コマンド名だけでバージョン確認できたら、パスの追加は完了
$ node -v
nodenv 1.4.0+3.631d0b6

3. node のインストール

nodenvがインストールできたので、nodeをインストールします。

とりあえずLTSの最新版を入れてみます。

LTSのバージョン情報は、下記のNode.js公式サイトのトップに書いてあるので、それを見るのが早いです。

https://nodejs.org/ja/

2,021年10月現在だと、ちょうどv14系からv16系に安定板が切り替わるタイミングです。

https://nodejs.org/ja/about/releases/

10月26日からがv16のLTSのスタートなので、ちょっと早いですが(執筆時点では10月14日です)、v16を入れておくことにします。

# nodenvで、最新版をインストール(公式サイトでバージョン番号を確認してください)
$ nodenv install 16.11.1
Downloading node-v16.11.1-linux-x64.tar.gz...
-> https://nodejs.org/dist/v16.11.1/node-v16.11.1-linux-x64.tar.gz
Installing node-v16.11.1-linux-x64...
Installed node-v16.11.1-linux-x64 to /home/y-uchiida/.nodenv/versions/16.11.1

# インストールしたバージョンを、システム全体で利用するように設定
$ nodenv global 16.11.1

# 設定できたか、バージョンを確認
$ node -v
v16.11.1

nodeがインストールできていれば、npmも入っています。

ちょっとした開発や検証なら、ここまでの設定で不自由することはないと思います。

バージョンを分けて管理したい場合は、nodenv local コマンドで、動作させるバージョンを切り替えてください。

もっと本格的に使うのであれば、Dockerなどを使って環境を分離することをお勧めします。

アンインストール

ホームディレクトリ内に追加されている「.nodenv」ディレクトリに関連データが入っていますので、それを削除すればOKです。

# nodenv のアンインストール、削除
$ rm -r ~/.nodenv

.nodenvディレクトリを削除すると、今までインストールしたnodeのバージョンとか設定とか全部まとめて消えてしまいます。

必要に応じてバックアップをしてください！

まとめと余談

以上でnodejs/nodenvの環境構築は完了です。

検索結果の上位に出てくる方法は、brewをインストールしたり、anyenvの中のnodenvを使うような網羅的な方法が出てくることが多いように思います。

ちょっとnodeのバージョン管理がしたいだけなのに手間が多いな～と思っていたので、シンプルな方法をまとめました。

ここからバリバリ開発していきましょう！

ちなみに、ウチイダは過去にanyenvをWSL Ubuntuで利用していて、起動がとても遅くなった経験をしたことがあります。

最近では、本格的に開発をする場合Dockerに環境を用意することが多いのではないでしょうか。

そのため、anyenvでまとめて管理しないといけないほど、WSL上で直接いろいろな言語の開発環境が必要になることは少ないと思っています。

起動時間のことなどもかんがみて、ホスト側（厳密には、WSLはホストじゃないですが…）の環境はシンプルに保っておきたいです。

以上です。あなたのお役に立てればうれしいです。