🔨

Svelte3でTypeScript/Prettierをセットアップする[2021/09版]

2021/09/11に公開

ESLint

Svelte

Prettier

tech

背景

こちら記事を参考に*.svelteファイルでeslintとprettierをなんとか両立したい試み。
状況はおそらく大して進展しておらず公式っぽいeslintとprettierそれぞれのプラグインは両立できない状態にある。

Don't enable this either on Svelte components. If you want to use Prettier, just use it directly, along with appropriate plugins.

Svelte コンポーネントでこれを有効にしないでください。Prettier を使用したい場合は、適切なプラグインと一緒に直接使用してください。

最終形（妥協案）

コーディング中の*.svelteファイルにはeslintを適用
（CI用の）npm scriptで*.svelteファイルにはeslintとprettierを別々のコマンドで適用
非*.svelteファイルには常にeslint + prettierを適用

*.svelteファイルではeslintとprettierの同時利用がどうにも無理っぽいのでコーディング中はエディタ経由でprettierを適用する運用で回避しつつ、CIでは全てのコードにeslintとprettierが適用されることを保証しておく。

設定

関連箇所はこのような形。
上述の最終形になるようoverridesでファイルごとに設定を場合分けし、非*.svelteファイルにだけprettierがeslint経由で適用されるようにする。

.eslintrc.js

module.exports = {
  plugins: ['svelte3', '@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  overrides: [
    {
      files: ['**/*.ts'],
      extends: [
        'plugin:prettier/recommended',
      ],
    },
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3',
    },
  ],
  settings: {
    'svelte3/typescript': require('typescript'),
  },
  ...
}

そしてnpm scriptにはこんな感じのコマンドを用意しておく。

packages.json

{
  "scripts": {
    "lint": "yarn eslint --ext js,ts,svelte ./*.js ./*.ts ./src",
    "lint-format": "yarn prettier -c ./*.json **/*.svelte",
    "lint:fix": "yarn lint --fix && yarn lint-format -w"
  },
  ...
}

背景

最終形（妥協案）

設定

Discussion