3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

yarnを用いてのESLintの初期設定方法(備忘録)

Posted at

#はじめに

Qiita初投稿です。
ESLintはこれからもお世話になると思うので、自分用の備忘録としてESLintの初期設定の方法を記録しておこうと思います。

#前提
この後の話は、yarnがインストールされていることを前提として話が進みます。

#設定ファイルの作成(package.json)
まずは設定ファイルである「package.json」を作成するため、プロジェクトフォルダ内に移動します。プロジェクトフォルダ上で以下のコマンドを打ち「package.json」作成します。
「-y」オプションは「yarn init」を打つとターミナル側から質問される項目に対して、自動で「yes」と返してくれるオプションになります。

yarn init -y

上記コマンドによって、プロジェクトフォルダ内に「package.json」ファイルが作成されました。

#ESLintのインストール
次にESLintのインストールを行います。プロジェクトフォルダ内で以下のコマンドを実行してESLintのインストールを行います。
「-D」オプションは開発環境用にのみインストールするという意味です。

yarn add -D eslint

#PATHを通す
先程の工程でESLint自体のインストールは完了していますが、eslintのコマンドを直接打ってもPATHが通っていないためにエラーとなるため「PATHを通す」という作業を行って、「eslint」でコマンドを使えるようにします。
しかし、今回自分はPATHを通さずに実行していたためすみませんがここは割愛させてください。下の方に、今回参考にさせていただいた記事を引用しています。そちらに詳しく載っているのでそちらをご参照下さい。

今回私はPATHを通していませんが、PATHが通ってない状態でも「./node_modules/.bin/eslint 打ちたいコマンド」で、eslintのコマンドを実行することが出来ます。

#ESLintの初期設定
ESLintの初期設定をします。そのためにプロジェクトフォルダ上で以下のコマンドを打ちます。
以下は前の手順でPATHを通した人用です。PATHを通すのが面倒臭い人はその下のコマンドを打つことで同じことを実行することが出来ます。

PATHを通している人
eslint --init
PATHを通していない人
./node_modules/.bin/eslint --init

このコマンドの細かな設定については、以下のQiita記事がとても参考になりました。
ESLint簡単導入 × VSCode
eslintの設定からprettierとの併用までの流れ

あくまで自分用の備忘録なので今回はこの辺で。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?