Svelte和ESLint

Question

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

一开始，我决定配置eslint配置。我花了大约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: {
        // ...
    } 
};

这是dev。package.json的依赖关系：

​

其中is包含我的svelte组件：

​

我有未格式化的代码：

​

告诉我埃斯林特：

​

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

我肯定我做错了什么，希望你能帮助我。

Answer 1

要在svelte 3中使用eslint，您需要做的就是：

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"
  },

并在package.json文件旁边添加一个.eslintrc.js文件：

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来修复您的文件。

Answer 2

ESLint (以及一般的linters )对于查找和潜在地修复违反某些规则的内容很有用，但是ESLint主要不是一个格式化工具。

要自动格式化Svelte文件，使用Prettier和Svelte plugin for Prettier会更好。

如果你使用的是Visual Studio Code，你可以安装Svelte for VS Code插件，它将能够在你保存文件时自动格式化文件(假设你有formatOnSave turned on)。

Answer 3

我假设您通过查看屏幕截图来使用VSCode。在您提到的插件的文档页面上，有关于如何在代码编辑器中配置它的说明。( https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/INTEGRATIONS.md )

您需要安装ESLint扩展。

除非您对Svelte组件使用.html，否则您需要配置files.associations以将适当的文件扩展名与html语言相关联。例如，要关联.svelte，请在您的settings.json中添加以下内容

{
  "files.associations": {
    "*.svelte": "html"
  }
}

然后，您需要告诉ESLint扩展也使用html语言编写文件，并在可能的情况下启用自动修复功能。如果您尚未调整eslint.validate设置，则默认为[ "javascript", "javascriptreact" ]，因此请将其放入您的settings.json中

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

如果您正在使用提供Svelte语法突出显示的扩展，请不要将*.svelte文件与html语言相关联，而是在"language": "svelte"上启用ESLint扩展。

重新加载VS代码，试一试！