Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

VisualStudioCodeでSvelte3をESLintする設定メモ

More than 1 year has passed since last update.

自分用のメモ

参考ページ

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

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

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

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更新内容のメモ

overridesfiles'*/*.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
    }
  ],

画面ではこんな感じになる
スクリーンショット 2019-05-28 1.01.05.png

masakurapa
自分の作業メモ的なことを書く感じ。 PHP/Goで開発をしています。 家ではAWS/Svelte3/Goを触りながら色々作って遊んでます。
kaonavi
業界シェアNo.1のタレントマネジメントシステム『カオナビ』の開発・提供をするHRテクノロジーカンパニー
https://www.kaonavi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away