📚

Typescript環境で、ESLintとprettier入れてみた

2022/01/21に公開

TypeScript

ESLint

Prettier

tech

なぜESLintとprettierを入れようと思ったか。

・下記のtypescriptの本を読んでいた時に名前が出てきたのがきっかけ

・その後個人的に、Typescriptの勉強のため環境構築のやり方を調べていた際にも、色んなサイトで推奨されていて、ついでに入れてみようと思った
・自分の会社でもESLintとprettierはパッケージインストールされているがあまり使用したことはなかったので、余計に気になった

ESLintとprettierとは？

ESlint

JavaScriptのための静的検証ツール（コードを実行せずに解析を行うことができる）
構文エラーやコーディング規約を定義することができ、システム全体のコードの一貫性を維持することができる

prettier

決めたルールに従い、ソースコードを適切に整形してくれるツール
プロジェクトごとにルールを設定可能

実際に入れてみる

バージョン情報とディレクトリ階層

node：16.13.0
✳︎ESLintはnodeのバージョンが12.22.0より前のサポート終了した模様
typescript:4.5.4
webpack:5.65.0

パッケージインストール

$ npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

パッケージがどっさり入った。

package.json

"author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.1.7",
    "prettier": "^2.5.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"

入れたパッケージの一部説明

eslint-config-prettier
ESlintとprettierの設定を併用する時に使用する。
これを使うことでESLintのフォーマット関連のルールを全て無効にでき、prettierが整形した箇所に関してエラーを吐き出さなくなる
@typescript-eslint/eslint-plugin
ESLintでTypescriptのチェックを行えるプラグイン。ESLintは元々Javascript用のツールなので、Typescriptに適用させるためにはこれが必要
@typescript-eslint/parser
ESLintでTypescriptを解析できるようにするためのツール

prettierの設定

prettierの設定載ってた記事見てコピペ

prettierrc.json

{
    "printWidth": 120,
    "singleQuote": true,
    "semi": false
}

ESLintの設定

.jsonとか.ymlファイルでも書けるらしいが、今回はjsファイルで。

eslintrc.js

module.exports = {
    env: {
      browser: true,
      es6: true,
    },
    extends: [
      "eslint:recommended",
      // TypeScriptでチェックされる項目をLintから除外する設定
      "plugin:@typescript-eslint/recommended", 
      // prettierのextendsは他のextendsより後に記述する
      "prettier", 
      // 2021-02-21から記述不要
      // "prettier/@typescript-eslint",
    ],
    plugins: [
        "@typescript-eslint"
    ],
    // ESLintでTypescriptを解析する
    parser: "@typescript-eslint/parser",
    parserOptions: {
      "sourceType": "module",
      // TypeScriptのLint時に参照するconfigファイルを指定
      "project": "./tsconfig.json" 
    },
    // 上位ディレクトリにある親のeslintrcを参照しないようにする
    root: true, 
    rules: {}
  }

早速試してみる

package.jsonにコマンドを追加

ESLintとprettier両方を発動できるコマンド、lint-fixコマンドを、package.jsonのscriptsに記入

package.json

"scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development",
    "lint-fix": "eslint --fix './src/**/*.{js,ts}' && prettier --write './src/**/*.{js,ts}'"
  },

Typescriptファイル内でわざとエラーが出るようにし、更に全角スペース入れたり空白を多く作ったり、インデントをバラバラにしてみる。

export default class World {
private message: string;

constructor(message: string) {
      this.message = message;
    

  }

  public sayHello(elemant: HTMLElement | null　) {
      if (element) {
      element.innerText = this.message;
      }









  }









  
}

この状態で、さっき作ったコマンド$ npm run lint -fixを叩いてLintとprettierを起動してみると、、

> ts-basic@1.0.0 lint-fix
> eslint --fix './src/**/*.{js,ts}' && prettier --write './src/**/*.{js,ts}'


/Users/名前/Documents/ts-basic/src/World.ts
  10:19  warning  'elemant' is defined but never used  @typescript-eslint/no-unused-vars
  10:46  error    Irregular whitespace not allowed     no-irregular-whitespace

✖ 2 problems (1 error, 1 warning)

ESLintが発動し、メソッド内引数の命名ミスによるエラーと、全角スペースがあることを注意されました🙌🏻

注意されたところを直し、再び$ npm run lint -fixすると、、

export default class World {
  private message: string;

  constructor(message: string) {
    this.message = message;
  }

  public sayHello(element: HTMLElement | null) {
    if (element) {
      element.innerText = this.message;
    }
  }
}

prettierが発動し、コードを正しく整形してくれました！

参考にしたサイト、記事

https://eslint.org/