柔和/柔和 [英] Svelte with prettier/eslint

问题描述

我正在尝试使用svelte开发一个应用.

I am trying to make an app using svelte to try it out.

我想设置漂亮的和eslint的文件，我安装了这些依赖项和Svelte for VS Code的扩展.

I would like to setup prettier and eslint, I installed those dependencies and the extension for 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"
  }

现在，我无法设置所有内容.

Now, I am having trouble setting everything up.

我做了

.eslintrc

.eslintrc

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

.prettierrc

.prettierrc

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

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

and I would like autosave with settings.json under .vscode

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

现在我尝试使用它，但是保存时什么也没有发生，执行时也没有

Now I tried to use this, but nothing happen when I save, neither when I execute

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

我想念什么吗?

推荐答案

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

The formatting problems occur because in your settings you tell VSCode to format everything with the esbenp.prettier-vscode extension, which cannot handle Svelte files. Add this to your config and it should work.

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

作为替代方案，您可以从npm安装 prettier-plugin-svelte .重新加载后，如果该插件在相同的 node_modules 文件夹中，并且将Svelte文件的格式推迟到该文件夹​​中，则Prettier会注意到该插件.这也应该解决您的"Svelte文件在运行 npm运行格式时不会格式化"的问题.问题.

As an alternative you can install prettier-plugin-svelte from npm. After a reload, Prettier will notice this plugin if it's in the same node_modules folder and defer formatting of Svelte file to it. This should also fix your "Svelte files do not get formatted when running npm run format" problem.

供参考: https://github.com/sveltejs/language-tools/tree/master/docs#my-code-does-not-get-formatted

ESLint问题可能是由于插件名称错误而引起的，您缺少了 overrides 部分，该部分告诉ESLint如何处理Svelte文件:

The ESLint problem likely occurs because the plugin name is wrong and you are missing the overrides section which tells ESLint how to treat Svelte files:

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

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

这篇关于柔和/柔和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！