※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。


【TypeScript】VSCodeでESLintによる自動フォーマット設定

VSCode TypeScript ESLint Prettier

投稿日:2020年11月28日

このエントリーをはてなブックマークに追加
ESLintはコードを検証、フォーマットするパッケージです。コードに明らかな問題がある場合や、コードスタイルと異なる書き方について、指摘・修正をしてくれます。この記事ではTypeScriptのプロジェクトにおけるESLintのインストール・設定方法・使い方、VSCodeの拡張機能について解説しています。

はじめに

この記事について

この記事ではTypeScriptのプロジェクトにおけるESLintのインストール・設定方法・使い方、VSCodeの拡張機能について解説しています。

この記事の実践は以下の環境でおこなわれました。

  • npm version 6.14.8

ESLintとは

ESLintはコードを検証、フォーマットするパッケージです。コードに明らかな問題がある場合や、コードスタイルと異なる書き方について、指摘・修正をしてくれます。

非常に便利なパッケージなのですが、デフォルトではTypeScriptのフォーマットは対応していないためいくつか設定が必要になります。


実践

実際にサンプルのプロジェクトを作成して、そこでeslintを使う設定をしてみましょう。

まずはプロジェクトを作成して初期化します。

ターミナル
$ mkdir eslint_ts # プロジェクトのディレクトリを作成
$ cd eslint_ts
$ npm init # 全てデフォルト値を選択

次に必要なnpmのパッケージをインストールします。ここではeslintと言語パッケージのtypescriptだけをインストールします。

ESLintはデフォルトではtypescriptには対応しておらず、typescript用のパーサーやプラグインも必要になるのですが、ESLintのプロジェクト初期化コマンドでそれら必要パッケージはインストールできるのでそちらに任せることにします。

初期化コマンドについてはこの後解説します。

ターミナル
$ npm install --save-dev typescript eslint

ここでESLintの設定ファイル.eslintrcを作成します。今回この設定ファイルはeslintの初期化コマンドから作成します。

ESLintの初期化コマンドはeslint --init、今回はglobalではなくローカルにインストールしましたがnpmのバージョンが5.2以降ならnpx run eslint --initで直接このコマンドを呼び出せます。

コマンドを打つと設定ファイルの自動作成のためにいくつか質問をされるので、自分のプロジェクト、コードスタイルに合わせて答えましょう。

今回は以下のように回答しました。

  • ✔ How would you like to use ESLint? · style
  • ✔ What type of modules does your project use? · esm
  • ✔ Which framework does your project use? · none
  • ✔ Does your project use TypeScript? · No / Yes
  • ✔ Where does your code run? · browser
  • ✔ How would you like to define a style for your project? · guide
  • ✔ Which style guide do you want to follow? · google
  • ✔ What format do you want your config file to be in? · JSON
  • ✔ Would you like to install them now with npm? · Yes
ターミナル
$npx eslint --init

これで.eslintrc.jsonファイルが作成されたはずです。

次にeslintのフォーマットのチェック対象から外すファイルの設定をしましょう。

おそらくほとんどのTypeScriptのプロジェクトではnode_modulesとトランスパイル後のコードは外しておくと良いでしょう。今回はトランスパイル後のコードはdistというディレクトリに出力することを仮定して設定してみます。

eslintの除外ファイルは.eslintignoreで設定します。

.eslintignore
dist
node_modules

eslintコマンド

ESLintが正しく動くか確認してみましょう。

適当なTypeScriptのコードを作成します。

index.ts
const a=10
console.log(a)

eslintでファイルを指定すると問題箇所をエラーで表示してくれます。

ターミナル
$ npx eslint *.ts
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3292/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> eslint_ts@1.0.0 eslint /home/ogihara/ts/eslint_ts
> eslint "index.ts"


/home/ogihara/ts/eslint_ts/index.ts
  1:11  error  Missing semicolon                              semi
  2:15  error  Newline required at end of file but not found  eol-last
  2:15  error  Missing semicolon                              semi

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

問題箇所がエラーで表示されました。

表示された問題箇所のうち修正可能な問題については--fixオプションで修正できます。

ターミナル
$ npx eslint -- --fix
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3292/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> eslint_ts@1.0.0 eslint /home/ogihara/ts/eslint_ts
> eslint "--fix"

VSCodeの設定

ここではVSCode側がESLintを利用できるように設定しましょう。

まずは拡張機能ESLintをインストールします。エディタの拡張機能でdbaeumer.vscode-eslintを検索してインストールしましょう。

この状態でエディターの右下の【ESLint】をクリックするとESLintのサーバーが起動しコードの問題箇所を波線で指摘してくれるようになります。

ただし今の状態では見つけた問題箇所を自分で手動で修正する必要があります。

ファイルが保存した際に自動でフォーマットするように設定しましょう。

VSCodeでCtrl + ,で設定を開き右上の設定(UI)を開くをクリックしてsettings.jsonを開きます。

settings.jsoneditor.codeActionsOnSaveの行を追加しましょう。

settings.json
[...]

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

[...]

これでTypeScriptのコードの保存時に自動的にESLintでフォーマットされるようになりました!!

このエントリーをはてなブックマークに追加


関連記事

記事へのコメント
    
検索