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

投稿日: 2022-04-20 2022-10-13
タグ: VS Code

序章

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、および eslint v8.3.0。

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

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

mkdir vscode-eslint-example

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

cd vscode-eslint-example

中にいる間 vscode-eslint-example ディレクトリ、名前でJavaScriptファイルを作成します app.js:

touch app.js

開ける app.js VisualStudioCodeで。次のJavaScriptコードを app.js ファイル：

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 プロジェクトを初期化するコマンドは、 package.json のファイル vscode-eslint-example ディレクトリ。 The 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 国旗。 The ./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）を開きます。

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

.vscode / settings.json

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

このコードを使用して settings.json ファイルの場合、ESLintはエラーを自動的に修正し、保存時にJavaScriptを検証します。

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

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

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

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

現状では、ESLintはすべての人に強調表示されたメッセージを生成します console.log() のステートメント app.js. 場合によっては、 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 キーとしてのルール名。入力 off の値として no-console:

.eslintrc.json

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

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

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

.eslintrc.json

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

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

結論

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

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

getdocs

13036