Getting Prettier 和 ES Lint 使用 Nuxt 3 进行保存

Question

我在 Nuxt 3 样板中进行 linting 设置是最困难的。

我的要求：

1. 更漂亮的格式和风格规则
2. ES Lint 用于修复有问题的模式和代码
3. Vue 推荐风格指南规则
4. 保存时修复
5. 我们使用 VS Code，所以假设需要一些插件？

您可以在这里看到我的尝试：https://github.com/funkhaus/fuxt

Antfu 的 PR 仍然不起作用：https://github.com/funkhaus/fuxt/pull/121

我能做的最好的事情似乎就是让它工作，只在保存时闪烁修复，然后返回到不正确的格式。 视频在这里。

我在 VS Code 中有两个插件，但我什至不确定它们是否是必需的...非常令人困惑如何才能使所有这些工作正常。

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

希望得到任何 linting 专业人士的指导！

是：

Answer 1

我有一个

eslint.config.mjs

文件，其中包含以下内容

import antfu from '@antfu/eslint-config';

export default antfu({
  vue: true,
  // typescript: true,
  formatters: {
    css: true,
    html: true,
    json: true,
    markdown: 'prettier',
  },
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: true,
  },
}, {
  rules: {
    'no-undef': 0,
    'vue/multi-word-component-names': 0,
    'unused-imports/no-unused-vars': 1,
  },
});

这在我的

package.json

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint --fix",
}

这些是我的开发依赖项：

• @antfu/eslint-config

• @vue/eslint-config-typescript

• eslint

• eslint-plugin-format

• eslint-plugin-vue

这是我的一些部分

settings.json

"javascript.validate.enable": true,
"eslint.debug": true,
"eslint.useFlatConfig": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": "never",
  "source.fixAll": "always",
  "source.fixAll.eslint": "explicit",
  "source.fixAll.stylelint": "always"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "vue",
  "html",
  "markdown",
  "json",
  "jsonc",
  "yaml",
  "toml"
],

我的 VScode 中也有 ESlint 扩展，但没有更漂亮。

当您使用 ESlint 修复它时，就会发生闪烁，然后 Prettier 会解决它，这就是这两个工具之间的冲突。通过不运行 Prettier，您几乎可以在 ESlint（使用 Stylistic）中完成所有操作。

此外，请随意打开 VScode 中的

Output

选项卡来检查一些潜在的详细问题。

这是我为 Nuxt2 提供的旧答案，重新启动 ESlint 服务器仍然非常相关，哈哈。