🔧

ESLint + Prettierを導入したTypeScript開発環境

2021/10/09に公開

概要

ESLint + Prettier を導入した TypeScript 開発環境の構築方法です。
静的検証を ESLint で行い、フォーマットを Prettier で行います。
エディターは VS Code を使用します。

環境

  • Node.js
  • npm
  • Windows 10
  • VS Code

構築方法

package.json の作成

作業ディレクトリに移動し、以下のコマンドでpackage.jsonを作成します。

npm init

TypeScript 導入 & 実行

1. TypeScript をインストール

npm install --save typescript

2. TypeScript のコンパイル設定ファイルであるtsconfig.jsonファイルの作成

npx tsc --init

tscは TypeScript のコンパイラです。

3. 実行

TypeScript ファイルをコンパイル&実行してみます。
作業ディレクトリ下に試験用ファイルとして、index.tsを作成し、以下のソースを書きます。

function outputHello(text: string): void {
  console.log(`Hello ${text}!`);
}

const textWorld: string = "World";

outputHello(textWorld);

コンパイルを実行します。

npx tsc index.ts

index.jsが作成されていることを確認します。

function outputHello(text) {
  console.log("Hello " + text + "!");
}
var textWorld = "World";
outputHello(textWorld);

index.jsを実行してみます。

node index.js

Hello World!と返ってきたら OK!

ESLint 導入 & 実行

1. ESLint のインストール

npm install --save-dev eslint

2. npx eslint --initコマンドで、対話的に ESLint 構成を作成する

npx eslint --initコマンドを実行し、ESLint の構成ファイルを作成しましょう。
今回は以下の構成で作業を進めていきます。

  • スタイルガイドを採用したいので、How would you like to use ESLint?To check syntax, find problems, and enforce code styleを選択。
  • 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?Yesを選択。
  • Where does your code run?BrowserNodeを選択。
  • How would you like to define a style for your project?Use a popular style guideを選択。
  • Which style guide do you want to follow?Standardを選択。
  • What format do you want your config file to be in?JavaScriptを選択。
  • Would you like to install them now with npm?Yesを選択し、必要なモジュールをインストール。

.eslintrc.jsが作成されます。

3. 実行

前述したindex.tsの状態でnpx eslint index.tsを実行します。
色々とエラーが表示されると思います。

Prettier 導入 & 実行

1. Prettier をインストール

npm install --save-dev prettier eslint-config-prettier

eslint-config-prettierは ESLint のコードフォーマットに関連するルールを無効化し、バグを検出するルールのみを有効にするプラグインです。

2. .eslintrc.jsに Prettier の項目を追加する

module.exports = {
  /* 中略 */
  extends: [
    /* 中略 */
    "prettier", // 追加。他の設定の上書きを行うために、必ず最後に配置する。
  ],
};

3. 実行

index.tsにて、文末のセミコロン等を消して、npx prettier --write index.tsを実行します。
コードがフォーマットされます。

VS Code の設定

拡張機能のインストール

ESLint(dbaeumer.vscode-eslint)と Prettier(esbenp.prettier-vscode) の拡張機能をインストールします。

設定

VS Code の.vscode/settings.jsonを作成し、ワークスペース用の設定ファイルを作成します。
ファイルの保存時にフォーマットがかかるように設定を追加します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // フォーマッターをPrettierにする
  "editor.formatOnSave": true // ファイル保存時にフォーマットを実行
}

ファイルのセーブ時にフォーマットが走ることを確認する。

参考文献

https://qiita.com/notakaos/items/85fd2f5c549f247585b1
https://multimineral-tech.com/entry/2020/04/13/192746
https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md
https://zenn.dev/ryusou/articles/nodejs-prettier-eslint2021
https://qiita.com/y-w/items/dcf5fb4af52e990109eb
https://blog.ojisan.io/prettier-eslint-cli/
https://github.com/prettier/eslint-config-prettier

Discussion