vue.js - Vue 2 - ESLint + 标准 + Prettier

Question

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

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

vue create 只提供以下选项:

1. ESLint + 标准
2. ESLint + Prettier

我尝试了两件事:

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

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

Answer 1

你能试试我刚刚创建的这个 repo 吗？根据我的测试，它看起来运行良好。

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

注意事项

• 我创建了 2 个项目并将 standard 的配置转储到 Prettier 的配置中，更改可以在 this commit 中看到
• CLI 的当前版本 @vue/eslint-config-standard 抛出错误(Environment key "es2021"is unknown)因为它需要 ESlint 7 才能工作，如图this changelog
• 将 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 服务器 + VScode 重启后)它们才会被 ESlint 修复!

放回 Prettier 当然可以正常工作。

---

幸运的是，我有一台新 PC，因此有机会尝试使用 VScode 进行全新配置。我必须安装 ESlint仅并将这些设置放入我的 settings.json

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

格式完美无缺，无需更多。