VisualStudioCodeでSvelte3をESLintする設定メモ

自分用のメモ

参考ページ

eslint-plugin-svelte3
https://github.com/sveltejs/eslint-plugin-svelte3

VSCodeの設定は↓に書いてあるので参考にする
https://www.npmjs.com/package/eslint-plugin-svelte3/v/1.0.0

VisualStudioCodeの拡張機能をインストール

• Svelte
• ESLint

ESLint系のパッケージをインストール

$ npm i -D eslint
$ npm i -D eslint-config-standard
$ npm i -D eslint-plugin-import
$ npm i -D eslint-plugin-node
$ npm i -D eslint-plugin-promise
$ npm i -D eslint-plugin-standard
$ npm i -D eslint-plugin-svelte3

.eslintrc.jsの設定

eslint-plugin-svelte3 に書いてあるサンプルを基本コピペ

ただし ここ に書いてあるように
eslint-plugin-importの一部ルールがあると上手く動作しないようなので
overridesで.svelteの時に無効にした。

module.exports = {
    root: true,
    parserOptions: {
        ecmaVersion: 2019,
        sourceType: 'module',
    },
    env: {
        es6: true,
        browser: true,
    },
    extends: [
        'standard',
    ],
    plugins: [
        'svelte3',
    ],
    rules: {
        indent: ['error', 4],
        'comma-dangle': ['error', 'always-multiline'],
    },
    settings: {
    },
    overrides: [
        {
            files: ['**/*.svelte'],
            processor: 'svelte3/svelte3',
            rules: {
                'import/first': 0,
                'import/no-duplicates': 0,
                'import/no-mutable-exports': 0,
            },
        },
    ],
}

2019/06/04更新内容のメモ

overridesのfilesが'*/*.svelte'になっていたが
以下のように階層深くするとFuga.svelteのlintが通らなかったので**/*.svelteに書き換えた。

./
├ hoge/
│  └ Fuga.svelte
└ Hoge.svelte

CLIから叩いて動作確認する

--extオプションでsvelteを対象にしてあげる。
テスト用に適当に未使用の変数hogeを作ってテストしてみただけ。

$ npm run lint

> svelte-app@1.0.0 lint /path/to
> eslint --ext svelte,js src/


/path/to/src/App.svelte
  23:11  error  'hoge' is assigned a value but never used  no-unused-vars

/path/to/src/main.js
  6:7  error  'hoge' is assigned a value but never used  no-unused-vars

package.jsonにlint用のscript書いておくと楽

  "scripts": {
    ....
    "lint": "eslint --ext svelte,js src/"
  }

VisualStudioCodeの設定

https://www.npmjs.com/package/eslint-plugin-svelte3/v/1.0.0
に書いてある通りにsettings.jsonに以下の記述を追加する。

設定したらVSCodeをリロードして完了。

  "files.associations": {
    "*.svelte": "html"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    }
  ],

画面ではこんな感じになる