VisualStudioCodeでESLintを使用してコードをリントおよびフォーマットする方法

序章

Visual Studio Code などのエディターを使用してJavaScriptを作成する場合、コードが構文的に正しく、現在のベストプラクティスに沿っていることを確認するさまざまな方法があります。これを行うには、リンターを使用できます。リンターは、コードの構文エラーをチェックし、エラーを強調表示して、エラーをすばやく見つけて修正できることを確認します。 ESLint は、コードの整合性を確保するためにVisualStudioCodeセットアップに統合できるリンターです。

ESLintは、コードのフォーマットと分析の両方を行って、改善のための提案を行うことができます。また、構成可能です。これは、コードの評価方法をカスタマイズできることを意味します。

このチュートリアルでは、Visual Studio CodeでESLintをセットアップし、デバッグでログステートメントを処理するためのカスタム構成を実装します。また、ファイルを保存するときに構文エラーを自動的に修正するようにESLintを構成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

マシンにインストールされている最新バージョンのVisualStudioCode。
マシンにインストールされているノードの最新バージョン。これを実現するには、 Node.jsのインストール方法と、マシンのローカル開発環境の作成を実行します。

このチュートリアルは、Visual Studio Code v1.62.3、ESLint Extension v2.2.2、Node.js v17.2.0、npm v8.1.4、およびeslintv8.3.0で検証されました。

ステップ1—JavaScriptスターターコードを作成する

デモプロジェクトから始める必要があります。次のコマンドを使用して、プロジェクトのディレクトリを作成します。

mkdir vscode-eslint-example

プロジェクトフォルダが作成されたので、vscode-eslint-exampleディレクトリに切り替えます。

cd vscode-eslint-example

vscode-eslint-exampleディレクトリ内で、app.jsという名前のJavaScriptファイルを作成します。

touch app.js

VisualStudioCodeでapp.jsを開きます。 app.jsファイルに次のJavaScriptコードを記述します。

app.js

const name = 'James'

const person = {first: name}

console.log(person)

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};

改善できるフォーマットの問題があることに気付いたかもしれません。

引用符の一貫性のない使用
セミコロンの一貫性のない使用
間隔

このJavaScriptファイルを配置すると、このプロジェクトを初期化できます。これを行うには、コマンドラインに戻り、vscode-eslint-exampleディレクトリで次のコマンドを実行します。

npm init --yes

npm initコマンドを使用してプロジェクトを初期化すると、vscode-eslint-exampleディレクトリにpackage.jsonファイルが作成されます。 package.jsonは、プロジェクトの依存関係およびプロジェクトの他の重要な構成設定を保存します。

JavaScriptプロジェクトが適切に設定されたので、ESLintを設定できます。

ステップ2—ESLintの設定

プロジェクトにESLintを設定する前に、まずESLintをインストールする必要があります。

npm install eslint --save-dev

--save-devフラグを含めることが重要です。これにより、パッケージが開発用の依存関係としてのみ保存されるためです。この場合、eslintは、プロジェクトに積極的に取り組んで変更を加えている場合にのみ必要なパッケージです。プロジェクトが起動するか本番環境に入ると、eslintは不要になります。 --save-devフラグを使用すると、eslintが開発依存関係としてのみpackage.jsonファイルにリストされます。

ESLintがインストールされたので、次のコマンドを使用してプロジェクトのESLint構成を初期化できます。

./node_modules/.bin/eslint --init

このコマンドの重要な部分は、--initフラグです。コマンドの./node_modules/.bin/eslintセクションは、プロジェクト内のESLintへのパスです。 --initフラグを使用すると、プロジェクトのESLintがアクティブになります。 ESLintをアクティブ化または初期化すると、ESLint構成ファイルが作成され、ESLintがプロジェクトでどのように機能するかをカスタマイズできます。

ESLint構成ファイルにアクセスする前に、プロジェクトに関するさまざまな質問が表示されます。これらの質問は、プロジェクト用に初期化された構成がニーズに最適であることを確認するために求められます。

最初のプロンプトは次のようになります。

? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

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

CommonJSグローバル変数を使用するには、CommonJSオプションを選択します。

次のプロンプトは次のようになります。

? Which framework does your project use? …
  React
  Vue.js
❯ None of these

None of theseオプションを選択します。

次のプロンプトは尋ねます：

? Does your project use TypeScript? › No / Yes

Noオプションを選択します。

次のプロンプトが表示されます。

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

Browserオプションを選択します。

次のプロンプトは次のようになります。

✔ 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)

Use a popular style guideオプションを選択します。

Which style guide do you want to follow?プロンプトで、Airbnb: https://github.com/airbnb/javascriptオプションを選択します。

次のプロンプトは尋ねます：

? What format do you want your config file to be in? …
  JavaScript
  YAML
❯ JSON

JSONオプションを選択します。

次に、次のメッセージが表示されます。

Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2

最後のプロンプトは次のように尋ねます。

? Would you like to install them now with npm? › No / Yes

Yesオプションを選択して、npmとの依存関係をインストールします。

また、追加のパッケージをインストールするように求められます。 yesを選択します。

すべてのプロンプトを完了すると、.eslintrc.jsonという名前のファイルがvscode-eslint-exampleディレクトリに追加されていることがわかります。これでESLintがインストールされました。 app.jsのコードはまだ変更されていません。これは、ESLintをVisualStudioCodeと統合する必要があるためです。

ステップ3—ESLint拡張機能のインストール

ESLintをVisualStudioCodeに統合するには、VisualStudioCode用のESLint拡張機能をインストールする必要があります。 Visual Studio Codeに戻り、ExtensionsタブでESLintを検索します。拡張機能を見つけたら、インストールをクリックします。

ESLintをVisualStudioCodeにインストールすると、app.jsファイルの強調表示エラーにカラフルな下線が表示されます。これらのマーカーは、重大度に基づいて色分けされています。下線付きのコードにカーソルを合わせると、エラーを説明するメッセージが表示されます。このように、ESLintは、コードと構文エラーを見つけて削除するのに役立ちます。

ESLintはあなたのためにさらに多くのことをすることができます。 ESLintは、ファイルが保存されるたびにエラーを自動的に修正するように変更できます。

ステップ4—保存時のフォーマット

保存するたびに構文とフォーマットの問題を自動的に修正するようにESLintを構成するには、設定メニューを開く必要があります。

Visual Studio Codeで設定を見つけるには、コマンドパレットを使用して環境設定：ワークスペース設定（JSON）を開きます。

settings.jsonファイルがコードエディタ内で開きます。 ESLintでファイルを保存するときにエラーを修正するには、settings.jsonに次のコードを記述する必要があります。

.vscode / settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
}

settings.jsonファイルにこのコードを含めると、ESLintはエラーを自動的に修正し、保存時にJavaScriptを検証します。

app.jsファイルに戻って保存します。カラフルでない下線など、いくつかの変更が表示されます。 ESLintで修正されたフォーマットの問題には、次のものがあります。

一重引用符の一貫した使用
関数内の適切なインデント
セミコロンの一貫した使用

app.jsを保存するたびに、ESLintは構文エラーを自動的に解決するようになりました。まだいくつかのエラーメッセージが残っています。これらは、ESLint構成をカスタマイズして、特定のエラーやフォーマットの問題をキャッチまたは無視することで修正できます。

ステップ5—ESLintルールのカスタマイズ

現状では、ESLintは、app.js内のすべてのconsole.log()ステートメントに対して強調表示されたメッセージを生成します。場合によっては、console.logステートメントの削除が優先されないことがあります。 ESLint構成をカスタマイズして、エラーメッセージを生成せずにconsole.logステートメントを許可できます。 ESLint構成ルールは、.eslintrc.jsonファイルで変更できます。

.eslintrc.jsonファイルを開きます。これは、そのファイルに表示されるコードです。

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    }
}

.eslintrc.jsonファイルの下部に、"rules"オブジェクトが表示されます。 ESLintをトリガーするエラーをカスタマイズしたり、特定のコードに対するESLintの応答を無効にしたりするには、"rules"オブジェクトにキーと値のペアを追加します。キーは、追加または変更するルールの名前と一致します。値は、問題の重大度レベルと一致します。重大度レベルには3つの選択肢があります。

error-赤い下線を生成します
warn-黄色の下線が生成されます
off-何も表示されません。

console.logステートメントのエラーメッセージを生成したくない場合は、no-consoleルール名をキーとして使用できます。 no-consoleの値としてoffを入力します。

.eslintrc.json

"rules" : {
    "no-console": "off"
}

これにより、app.jsのconsole.logステートメントからエラーメッセージが削除されます。

一部のルールでは、重大度レベルや値など、複数の情報が必要です。コードで使用する引用符のタイプを指定するには、選択した引用符のタイプと重大度レベルの両方を渡す必要があります。

.eslintrc.json

"rules" : {
    "no-console": "off",
    "quotes": [
        "error",
        "double"
    ]
}

これで、引用符に一重引用符を含めると、ESLintでエラーが発生します。

結論

このチュートリアルでは、VisualStudioCodeでESLintを使用してリンティングでできることのいくつかを紹介します。 ESLintのようなリンティングツールは、構文とベストプラクティスの検証方法を自動化および簡素化することにより、より複雑なタスクの時間を作成するのに役立ちます。

ルールの詳細と、ESLintルールのカスタマイズに使用できるキーと値のペアについては、このドキュメントを確認してください。