javascript - Svelte 和 ESLint

Question

几天前，我决定将前端应用程序从 Vanilla JS 迁移到 Svelte(具体原因)。

起初我决定配置 eslint config。我花了大约 3 个小时来找到如何将 svelte 集成到 eslint 的答案，除了 this plugin 之外我什么也没找到

这是我的 eslint 配置

module.exports = {
    extends: ['eslint:recommended', 'prettier'],
    parserOptions: {
        ecmaVersion: 2019,
        sourceType: 'module'
    },
    env: {
        es6: true,
        browser: true
    },
    plugins: [ 'svelte3' ],
    overrides: [
        {
            files: '*.svelte',
            processor: 'svelte3/svelte3'
        }
    ],
    globals: {
        "module": true,
        "process": true,
    },
    rules: {
        // ...
    },
    settings: {
        // ...
    } 
};

这里是开发。 package.json 的依赖关系:


哪里包含我的 slim 组件:


我有非格式化代码:


什么告诉我eslint:


之后 eslint .和 eslint . --fix命令 svelte 组件的代码仍然未格式化

我确定我做错了什么，希望你的帮助。

Answer 1

要将 eslint 与 svelte 3 一起使用，您所要做的就是:

npm install \
  eslint \
  eslint-plugin-import \
  eslint-plugin-node \
  eslint-plugin-promise \
  eslint-plugin-standard \
  eslint-plugin-svelte3 \
  --save-dev

将此脚本添加到 package.json :

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

并添加文件 .eslintrc.js在 package.json 旁边文件 :

module.exports = {
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  extends: [
    'eslint:recommended'
  ],
  plugins: [
    'svelte3'
  ],
  ignorePatterns: [
    'public/build/'
  ],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  rules: {
    // semi: ['error', 'never'] // uncomment if you want to remove ;
  },
  settings: {
    // ...
  }
}

然后你可以运行 npm run lint修复您的文件。