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、およびeslint
v8.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ルールのカスタマイズに使用できるキーと値のペアについては、このドキュメントを確認してください。