Vue 2 - ESLint + 标准 + Prettier

Question

如何创建使用 ESLint + StandardJS + Prettier 的 Vue 2 项目？

StandardJS 的规则自然应该优先于 Prettier 的规则。

vue create 仅提供以下选项：

1. ESLint + 标准
2. ESLint + Prettier

我尝试了两件事：

1. 我混合了上述两个选项的 eslint 配置。它导致了依赖地狱，一旦解决了它并没有真正按预期工作。
2. 我将 prettier-standard 包添加到我的 eslintrc.js 中，它也没有按预期工作。值得一提的是，当从命令行手动执行时，prettier-standard 效果很好。

我当然希望在项目配置级别而不是 IDE 级别进行设置。

Answer 1

你能试试我刚刚创建的这个存储库吗？从我的测试来看，它看起来效果很好。

https://github.com/kissu/so-eslint-standard-prettier-config

笔记

• 我创建了2个项目并将其中一个的配置转储standard到第Prettier一个项目中，更改可以在这次提交中看到
• CLI 的当前版本@vue/eslint-config-standard会抛出错误 ( Environment key "es2021" is unknown)，因为它需要 ESlint 7 才能工作，如本变更日志所示
• 将 ESlint 升级到最新版本7.29.0，解决了该问题
• 要检查项目当前的 ESlint 版本，您可以运行npx eslint --version
• 当然，你需要启用 ESlint 扩展并禁用 Prettier one（如果使用 VScode），否则可能会发生冲突

我尝试@vue/prettier从中删除

extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', '@vue/prettier']

看看它是否成功删除了任何内容，;确实如此！

这些错误确实来自 ESlint（如果我们确实删除@vue/prettier），并且它们仅在保存时由 ESlint 修复（在 ESlint 服务器 + VScode 重新启动后）！

放Prettier回去当然很好用。

幸运的是，我有一台新电脑，因此有机会使用 VScode 尝试全新的配置。我只需安装ESlint并将这些设置放入我的settings.json

{
  "editor.codeActionsOnSave": {
      "source.organizeImports": false,
      "source.fixAll": true,
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
}

格式化工作完美，不需要任何其他操作。