苗条与漂亮/eslint答案

【问题标题】：Svelte with prettier/eslint苗条与漂亮/eslint
【发布时间】：2020-12-05 02:50:00
【问题描述】：

我正在尝试使用 svelte 制作一个应用。

我想设置 prettier 和 eslint，我为 VS Code 安装了这些依赖项和 Svelte 扩展。

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

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

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

我错过了什么吗？

【问题讨论】：

有一个扩展名：marketplace.visualstudio.com/…
@Daniel_Knights > 和 Svelte for VS Code 的扩展。我已经有了
@Bobby 你能试试这个.eslintrc 配置：github.com/johannchopin/gitmoji-browser-extension/blob/master/…

标签： eslint svelte prettier

【解决方案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 问题是因为插件名称错误并且您缺少告诉 ESLint 如何处理 Svelte 文件的 overrides 部分：

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

设置参考：https://github.com/sveltejs/eslint-plugin-svelte3#installation

【讨论】：