Turborepo & SvelteKit Starter の モノレポ構成を確認する

packages/ui の package.json を 見ると eslint に関する 依存関係は 同じ packages/config-eslint だけを追加している。なのに scripts で、lintが実行できている。
また、packages/config-eslint の方も index.js で定義している lintの設定で使う依存関係しか追加していない

apps/docs には eslint などの依存関係が追加されていたけど、削除して実行してみたところ lintが実行できたので、eslintrs.cjs で定義している依存関係だけがあれば良さそう

同じ理由で、apps/docs の prettier を依存関係から削除しても prettierは正常に動作できた。さらに .prettierrc に prettier-plugin-svelte が使われているけどこれも apps/docs から削除しても prettier は正常に動作した。 rootに prettier-plugin-svelte があれば大丈夫っぽいな

この .eslintrc.cjs を削除しても各プロジェクトの lint は正常に動作されることを確認した

このプロジェクトのESLint設定は packages/config-eslint/index.js が請け負っている。rootではサブプロジェクトで eslint を実行するための依存関係をインストールしている

設定内容は rootを含む全サブプロジェクトを網羅する形の内容になっていた

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:svelte/recommended',
    'prettier',
    'turbo'
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte']
  },
  env: {
    browser: true,
    es2017: true,
    node: true
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  ]
};

apps/* と packages/* の各サブプロジェクトでは、次のように この eslintの設定を取り込み検証を実施している

module.exports = {
  extends: ['@repo/eslint-config/index.js']
};

消しちゃったけど、rootの eslintrc.cjs extends: ['custom'] の custom は、eslint-config-* の * に相当するpackageらしい。
つまり、packages/eslint-config-custom というサブパッケージを用意すればそれを参照する模様。（今回は作っていないので結局 参照されるわけではない）
この辺は TurboRepoの仕組みっぽい
https://turbo.build/repo/docs/handbook/linting/eslint

例えば apps/docs には 次のような .prettierrc があり このサブプロジェクト配下では rootの設定が上書きされる

rootでは useTabs は指定されていないので default の false になるのだが、apps/docs では タブが使われるようになっていた

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte"],
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

余談だけど、IntelliJ IDEAの prittierの機能 で、.svelte ファイルをフォーマットする scriptタグが不正な形に変換されるバグがあるんだけど、ここで rootにインストールした prettier パッケージを手動設定することで正しくフォーマット変換されるみたい。使いながら様子を見ないとなんとも言えないけど

https://github.com/sveltejs/prettier-plugin-svelte/issues/242#issuecomment-1942611707

IntelliJ IDEA で、このプロジェクトに typescriptで書いたコードちゃんと認識してくれるんだな。
Settings > Languages & Frameworks > Typescript で パッケージを指定しているからなんだろうな。
今は、apps/docs にインストールした パッケージを見ているけど rootとかベースになるプロジェクトを指してあげたほうが良さそう

IDE (IntelliJ)でも参照するためにrootにこんな感じで typescriptの設定を行うと良いかな？ CompilerOptionsは、Viteのビルドでトランスパイルを行うことを想定した設定にはした方が良さそう

• packages/config-ts みたいな tsconfig.json 管理プロジェクトを置く
  • 他のプロジェクトもここの設定ファイルを参照する
• Workspaceのroot に typescript パッケージ をインストールする
• root に tsconfig.json を追加し、config-ts パッケージの 設定ファイルを継承する
• IDEの Typescriptパスを root の typescript パッケージにする
• 必要に応じて、root の tsconfig.json に paths も指定する
  • "必要に応じて"とは、IDEが内部パッケージの参照エラーを出す場合という意味
• references (Project Referemce) は定義しなくて良いと考えてる
  • apps/* では個別に tsconfig.json, tsconfig.node.json を管理して vite でビルドするため
  • root にあるのは あくまでも IDE用の位置付けとし、アプリのビルド時のトランスパイルとは切り分ける