🔨

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

1 min read

背景

https://zenn.dev/miruoon_892/articles/f5e56b7fcc0702b4aef2

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

https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/OTHER_PLUGINS.md

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

ログインするとコメントできます