初心者がVScodeでESLintを導入してみる

Lintとは

決められたルールに基づいて、自動的にコードのチェックを行うツールです。
この記事では、VScodeをあまり使ったことがない人に向けて、VScode初心者の私が説明をします。

インストール

拡張機能：VS Code ESLint extensionをインストールする

VS Code ESLint extensionをインストールする。

VScodeでターミナルを開く

ESLintを導入したいプロジェクトのフォルダを開いた状態で、
VScodeの「view」→「terminal」を選択して、ターミナルを開く

ESlintをインストールする

terminal

npm install -g eslint

上記コマンドにてインストールを完了します

terminal

eslint -v
v7.29.0

インストールがされている場合には、上記コマンドからversionの確認ができます。

package.jsonファイルを作成する

terminal

npm init

設定に関しての質問がありますが、全てEnterで良いです。

プロジェクト内にeslintの設定ファイルを作成する

terminal

eslint --init

設定についての質問があります。こちらはご自身のプロジェクトに適した形で質問に答えましょう。

terminal

✔How would you like to use ESLint? 
訳：ESLintをどのような目的で使いますか？
　　　 To check syntax only　　訳：構文チェックのため
　　 　To check syntax and find problems　　訳：構文チェックと問題発見のため
　　　 To check syntax, find problems, and enforce code style　　訳：構文チェック、問題発見、コーディングスタイルの統一のため
✔ What type of modules does your project use? 
訳：プロジェクトではどのタイプのモジュールを使っていますか？
　　　 JavaScript modules (import/export)
　　　 CommonJS (require/exports)
　　　 None of these
✔ Which framework does your project use?　
訳：プロジェクトではどのフレームワークを使っていますか？
 　 React
 　 Vue.js
　　　 None of these
✔ Does your project use TypeScript?
訳：プロジェクトでTypeScriptを使っていますか？
　　　 y/N
✔ Where does your code run? 
訳：実行環境はどこですか？
  Browser
  Node
✔ How would you like to define a style for your project?
訳：スタイル定義をどのようにしますか？
  Use a popular style guide.  訳：人気のスタイルガイド
  Answer questions about your style　　訳：スタイルについての質問へ進む
  Inspect your JavaScript file(s)　　　訳：JavaScriptファイルを検査する
✔ Which style guide do you want to follow?
訳：どのスタイルガイドに従いますか？
　　　　Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
✔ What format do you want your config file to be in? 
訳：コンフィグファイルはどのフォーマットにしますか？
　　　　JavaScript
  YAML
  JSON

これにて適用完了です。