Vue 2 - ESLint + 标准 + 更漂亮 [英] Vue 2 - ESLint + Standard + Prettier

问题描述

如何创建一个使用 ESLint + StandardJS + Prettier 的 Vue 2 项目?

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

vue create 只提供以下选项:

1. ESLint + 标准
2. ESLint + Prettier

我尝试了两件事:

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

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

解决方案

你能试试我刚刚创建的这个 repo 吗?从我的测试来看，它看起来效果很好.

把 Prettier 放回去当然没问题.

---

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

{editor.codeActionsOnSave":{source.organizeImports":假，source.fixAll":真，source.fixAll.eslint":真，source.fixAll.stylelint":真}}

格式完美无缺，不需要其他任何东西.

How do I create a Vue 2 project that uses ESLint + StandardJS + Prettier?

StandardJS's rules should naturally take precedence over Prettier's.

vue create only provides the following options:

1. ESLint + Standard
2. ESLint + Prettier

I tried 2 things:

1. I mixed the eslint configurations of both of the above options. It resulted in a dependency hell, and once that was solved it didn't really work as expected.
2. I added the prettier-standard package to my eslintrc.js, it didn't work as expected either. It's worth mentioning that prettier-standard works well when manually executing it from the command line.

I'm of course looking to set this up at the project config level and not at the IDE level.

解决方案

Can you try this repo I've just created? Looks like it's working great from what I've tested.

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

Notes

• I created 2 projects and dumped the configuration of the standard one into the Prettier one, the changes can be seen in this commit
• CLI's current version of @vue/eslint-config-standard is throwing an error (Environment key "es2021" is unknown) because it requires ESlint 7 to work, as shown in this changelog
• bumping ESlint to the latest version 7.29.0, fixed the issue
• to check your project's current version of ESlint, you can run npx eslint --version
• of course, you need to have the ESlint extension enabled and Prettier one disabled (if using VScode), otherwise it may conflict

---

I've tried to remove @vue/prettier from

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

and see if it's successfully removes any ; and it does!

The errors are indeed coming from ESlint (if we do remove @vue/prettier), and they're fixed by ESlint only upon save (after an ESlint server + VScode restart)!

Putting Prettier back works fine of course.

---

Luckly, I had a new PC, hence had the opportunity to try a whole fresh config with VScode. I had to install ESlint only and have those settings into my settings.json

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

The formatting works perfectly and nothing more is required.

这篇关于Vue 2 - ESLint + 标准 + 更漂亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！