苗条和 ESLint

Question

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

一开始我决定配置eslint config。我花了大约 3 个小时找到了如何将 svelte 集成到 eslint 的答案，除了这个插件之外我什么也没找到

这是我的 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：

哪里包含我的苗条组件：

我有非格式化代码：

什么告诉我 eslint：

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

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

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

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

Answer 2

ESLint（以及一般的 linter）非常适合查找并可能修复违反某些规则的内容，但 ESLint 主要并不是一个格式化工具。

要自动格式化 Svelte 文件，您可以使用Prettier和Prettier 的 Svelte 插件。

如果您使用的是 Visual Studio Code，则可以安装Svelte for VS Code插件，该插件将能够在保存文件时自动格式化文件（假设您已打开 formatOnSave）。