VisualStudioCodeとESLintを使用して保存時にリンティングを有効にする方法

投稿日: 2022-04-20 2022-04-20
タグ: javascript

序章

スタイルガイドを使用すると、一貫性があり、再利用可能で、クリーンなコードを記述できます。これらのルールは、リンターを使用して自動化および適用できます。これにより、インデントを手動でチェックしたり、一重引用符または二重引用符を使用したりする必要がなくなります。

Visual Studioコードは、保存のたびにリンティングをサポートできます。ワークフローは、コードのデプロイを遅らせる可能性のある多くの大きな問題に対処するのではなく、時間の経過とともに小さな問題に対処するために頻繁にlintチェックを実行することでメリットが得られる場合があります。

このチュートリアルでは、ESLintをインストールし、ルールを作成し、VisualStudioCodeでcodeActionsOnSaveを有効にします。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Visual StudioCodeの最新バージョンをダウンロードしてインストールします。
Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、ノードv16.6.2、npm v7.21.0、eslint v7.32.0、およびVisual StudioCodev1.59.1で検証されました。

ステップ1-プロジェクトの設定

さまざまな言語やプロジェクトの種類に応じて、さまざまなリンターがあります。このチュートリアルのニーズに応じて、ESLintをインストールして構成する必要があります。

まず、新しいプロジェクトディレクトリを作成します。

mkdir eslint-save-example

次に、プロジェクトディレクトリに移動します。

cd eslint-save-example

新しいプロジェクトを初期化します。

npm init -y

そして、eslintをインストールします。

npm install eslint@7.32.0

次に、eslintを初期化します。

npx eslint --init

次の選択肢でプロンプトに答えます。

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JavaScript

この時点で、package.jsonおよび.eslintrc.jsファイルを含む新しいプロジェクトが作成されます。

Visual Studio CodeでESLintを使用するには、VisualStudioCodeのマーケットプレイスで入手可能なESLint拡張機能をインストールする必要があります。

ステップ2–エラーのある例を作成する

次に、一貫性のない間隔やインデント、引用符、セミコロンなどの一般的なルールを意図的に破るJavaScriptファイルを作成します。

index.js

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

Visual Studio Codeでファイルを開き、ESLintルール違反の兆候を確認します。

Screenshot of the code with a squiggly line under helloYou.

helloYouには下線が引かれています。 Visual Studio Codeでこの行にカーソルを合わせると、次のツールチップメッセージが表示されます：'helloYou' is assigned a value but never used。これは、ルール.eslint(no-unused-vars)がeslint:recommendedによって有効になっているためです。

変数を使用してこの問題に対処できます。

index.js

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

console.log(helloYou)

他の問題に対処するには、ルールを追加する必要があります。

ステップ3–ルールの追加

eslint --initは、eslintrc.js（または、選択したオプションの場合は.ymlまたは.json）というファイルを作成しました。

.eslintrc.js

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': 'eslint:recommended',
  'parserOptions': {
    'ecmaVersion': 12,
    'sourceType': 'module'
  },
  'rules': {
  }
};

一貫した間隔とインデントのルールを追加しましょう。また、二重引用符よりも優先される一重引用符を適用します。また、行末に必須のセミコロンを適用します。

.eslintrc.js

module.exports = {
  // ...
  'rules': {
    'quotes': ['error', 'single'],
    // we want to force semicolons
    'semi': ['error', 'always'],
    // we use 2 spaces to indent our code
    'indent': ['error', 2],
    // we want to avoid extraneous spaces
    'no-multi-spaces': ['error']
  }
};

変更をファイルに保存します。

コードエディタで、前に作成したJavaScriptファイルを開きます。破られたルールがすべて表示されます。

ESLint拡張機能がインストールされている場合は、CTRL+SHIFT+Pを使用してコマンドパレットを開くことができます。次に、 ESLint：すべての自動修正可能な問題を検索し、ENTER（またはRETURN）を押します。

自動修正可能な問題は修正されます：

index.js

const helloYou = (name)=> {
  name = 'you' || name ;
  console.log('hello' + name + '!' );
};

console.log(helloYou());

インデントを数えたり、引用符やセミコロンをチェックしたりする必要はありません。

ステップ4–保存時にコードアクションを追加する

ESLintを手動で実行しようとすると、自動修正可能なすべての問題を定期的に修正することはあまり信頼できません。ただし、作業を保存するたびにlintルールを実行する方が、信頼性が高くなります。 CTRL+S（またはCOMMAND+S）を押すたびに自動修正を実行するようにESLintを設定できます。

ESLintが同じファイルで正しく機能するには、VisualStudioCodeの設定を変更する必要があります。 ファイル>設定>設定（またはコード>設定>設定）に移動します。

このチュートリアルでは、ワークスペース設定を変更します。これらの設定をすべてのプロジェクトに適用することもできます。 ワークスペースをクリックして、保存時のコードアクションを検索します。

Editor: Code Actions On Save
Code action kinds to be run on save.

Edit in settings.json

次に、settings.jsonをクリックします。

.vscode / settings.json

{
  "editor.codeActionsOnSave": null
}

settings.jsonに、次のコードを貼り付けます。

.vscode / settings.json

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

ここで、前に作成したJavaScriptファイルに加えた修正を元に戻します。次に、ファイルを保存します。自動修正可能な問題は自動的に解決されます。

結論

このチュートリアルでは、ESLintをインストールし、ルールを作成し、VisualStudioCodeでcodeActionsOnSaveを有効にしました。

getdocs

13036