水無瀬のプログラミング日記

プログラムの勉強した時のメモ

TypeScriptにeslint + prettierを導入する

はじめに

毎回新しいプロジェクトを作るたびにeslintとprettierの設定方法を忘れるので、
良い加減忘れないようにまとめておく。

インストール

# eslintとeslintのplugin
$ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# prettierとplugin
$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

設定ファイルの追加

.eslintrc.js

TypeScriptの対応に必要な箇所だけまとめる。
ルールはtslintとの対応表eslint公式のルールを見ながら好みのものを入れればOK。

module.exports = {
  'parser': '@typescript-eslint/parser',
  'env': {'browser': true, 'node': true, 'es6': true},
  'parserOptions': {
    'sourceType': 'module'
  },
  'plugins': ['@typescript-eslint'],
  'rules': {
    // 好みのルール
  }
};

.prettierrc

こちらも同じく好みのものを入れればOK。
設定項目は公式を参照。

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

まとめ

eslintとprettierの設定をまとめた。
eslintの設定とかはプロジェクトによると思うので、
詳細については都度覚えていこうと思う。

参考リンク