eslint - slim 的更漂亮/eslint

Question

我正在尝试使用 svelte 制作一个应用程序来试用它。
我想设置 prettier 和 eslint，我安装了这些依赖项和 Svelte for VS Code 的扩展。

  "dependencies": {
    "eslint": "^7.7.0",
    "eslint-plugin-svelte3": "^2.7.3",
    "prettier": "^2.0.5",
    "prettier-plugin-svelte": "^1.1.0",
    "save-dev": "0.0.1-security",
    "sirv-cli": "^1.0.0",
    "stylelint": "^13.6.1"
  }

现在，我无法设置所有内容。
我做了
.eslintrc

{
  "plugins": ["eslint-plugin-svelte3"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error"
  }
}

.prettierrc

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es6"
}

我想在 .vscode 下使用 settings.json 自动保存

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.prettier": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "eslint.validate": ["svelte"]
}

现在我尝试使用它，但是保存时没有任何 react ，执行时也没有

"fix": "npx eslint --fix \"src/**/*.svelte\"",
"format": "npx prettier --write \"src/**/*.svelte\""

我错过了什么吗？

Answer 1

出现格式化问题是因为在您的设置中，您告诉 VSCode 使用 esbenp.prettier-vscode 扩展名格式化所有内容，该扩展名无法处理 Svelte 文件。将此添加到您的配置中，它应该可以工作。

  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

作为替代方案，您可以从 npm 安装 prettier-plugin-svelte。重新加载后，Prettier 会注意到这个插件是否在同一个 node_modules 文件夹中，并将 Svelte 文件的格式推迟到它。这也应该可以解决您的“运行 npm run format 时 Svelte 文件未格式化”的问题。
以供引用:
https://github.com/sveltejs/language-tools/tree/master/docs#my-code-does-not-get-formatted
ESLint 问题的发生可能是因为插件名称错误，并且您缺少 overrides 部分，该部分告诉 ESLint 如何处理 Svelte 文件:

module.exports = {
  plugins: [
    'svelte3'
  ],
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  ..
};

设置引用: https://github.com/sveltejs/eslint-plugin-svelte3#installation