Zenn
🦧

WSL + VSC + Volta + eslintの設定でちょっとつまづいたのでその時の対応を書いておく

2023/03/17に公開
React
ESLint
WSL 2
Volta
vsc
tech

Environments

  • WSL2
  • Ubuntu 22.04.2 LTS
  • Volta 1.1.1
  • npm 9.5.0
  • node v18.14.2

事象

WSL上でViteを使いReactプロジェクトを作成し、VSCを開く。その後eslintの設定を施したが、なぜかVSCでeslintのワーニングなどが表示されず困った。
その時の解決方法を書く

手順

基本的にWSLでターミナルを開いてそこで作業をする。

最初にやっておくこと

まずは、いつもやるとは思うが、パッケージの更新をしておく

sudo apt-get update

次にnpmをglobalに入れようとしたらエラー

npm install -g eslint

今回最初に出たエラーは以下

errno UNABLE_TO_GET_ISSUER_CERT_LOCALLY
FetchError: request to https://registry.npmjs.org/eslint failed, reason: unable to get local issuer certificate

明らかに証明書周りで問題がありそうなので、そこをいったん調査してつぶすことにする。

証明書の追加

おそらくopensslの設定などから問題がありそうなので証明書をまずセットアップしたら、無事にダウンロードが成功した。
無理やり直している感はあるので、仮想環境でやった方がいいかなって思う。少なくともすぐ壊せるWSL2であれば特に問題はなかろう。

sudo apt-get install openssl
sudo update-ca-certificates --fresh
sudo mkdir -p $(npm config get prefix)/ssl/certs
sudo ln -s /etc/ssl/certs/ca-certificates.crt $(npm config get prefix)/ssl/certs/ca-certificates.crt
sudo ln -s /etc/ssl/certs/ca-certificates.crt $(npm config get prefix)/lib/node_modules/npm/ssl/certs/ca-certificates.crt
npm cache clean --force
npm config get cafile

npm install -g eslint
npm list -g

VSCやeslintのセットアップを簡単に書いておく

settings.json

  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

.eslintrc.json

  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },

問題なくVSCでreact-hoooksなどのワーニングが出るようになったので良かった。

Yarnについて

https://zenn.dev/ojin/scraps/d87a5673ce4e75
にスクラップを作った。気になったことをメモしておく

Discussion