Vue 2 - ESLint + 标准 + 更漂亮

Posted 2023-03-27

【中文标题】Vue 2 - ESLint + 标准 + 更漂亮

【英文标题】：Vue 2 - ESLint + Standard + Prettier

【发布时间】：2021-09-12 09:45:26

【问题描述】：

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

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

vue create 只提供以下选项：

ESLint + 标准 ESLint + Prettier

我尝试了两件事：

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

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

【问题讨论】：

您想要哪个作为格式化程序？您是否使用npx eslint --init 生成了eslintrc？尝试发布您的eslintrc

格式化程序应该更漂亮，只要有冲突，它应该被 eslint 覆盖（例如，StandardJS 的函数名后的空格应该覆盖 Prettier 的函数名后的无空格）。我使用 Vue CLI 的 ESLint + Standard 和 ESLint + Prettier 来生成我的配置并尝试使用它们，目前我的配置没有什么特别之处。从我造成的混乱开始可能弊大于利。

通常，ESlint 先于 Prettier。因为衬里总是在格式化之前。

即使 ESLint 比 prettier 更漂亮，也没关系。据我了解，应该删除与 StandardJS 冲突的更漂亮的规则（如果我没记错的话，这就是 standard-prettier 包所做的）。这在逻辑上绝对是可以解决的，我只是无法让现有的解决方案作为我的配置的一部分运行。

【参考方案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 1（如果使用 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
    

格式完美运行，无需任何其他内容。

【讨论】：

感谢您的彻底回复，我尝试测试您的存储库。在 vs 代码用户设置中，我按照建议禁用了格式化程序，并仅在保存“editor.codeActionsOnSave”时启用了 linting：“source.fixAll.eslint”：true。在它以某种方式做某事之前启用了更漂亮的功能。禁用 prettier 并启用 eslint 后，它不会在保存时执行任何操作。 npm run lint 似乎并没有摆脱 ; （所以我猜它没有使用standardjs运行eslint）。我错过了什么？

您的 VScode 设置可能有误。我可能会在我的电脑前（现在在电话上）发布让 ESlint 工作所需的线路。您至少在problems VScode 选项卡中有 ESlint 错误吗？只是没有格式化，对吧？

我现在在我的 Mac 上尝试使用 WebStorm，我知道我的首选项设置正确。这次甚至无法通过 npm install ，收到以下错误：ibb.co/X21ZdZT 我实际上是 git clone 然后 npm install。关于您的问题-在我的带有 VS Code 的 PC 上，我没有 ESLint 错误，不仅仅是没有格式化。

我使用了 yarn，而且正如我的回答中所建议的那样，我们确实存在冲突（CLI 正在生成较低的 ESlint 包版本）。

我目前无法测试，但看起来你已经做得足够多了。谢谢:)

【参考方案2】：

我有 eslint 7.8.1 和 Vue Prettier，我没有任何问题，也许你的 eslint 版本与 Prettier 不兼容，或者你的 eslint 有一些错误？

我会以各种方式放置我的 eslint 配置，也许它会对你有所帮助！

module.exports = 
    env: 
        'browser': true,
        'es6': true,
        'node': true
    ,
    parserOptions: 
        'parser': 'babel-eslint'
    ,
    extends: [
        '@vue/standard',
        'plugin:vue/recommended'
    ],
    rules: 
        "vue/html-indent": ["error", 4, 
            "attribute": 1,
            "closeBracket": 0,
            "switchCase": 0,
            "ignores": []
        ],

        "vue/max-attributes-per-line": [2, 
            "singleline": 10,
            "multiline": 
              "max": 1,
              "allowFirstLine": false
            
          ],
        'indent': ['error', 4],
        'vue/component-name-in-template-casing': ['error', 'kebab-case'],
        'vue/script-indent': [
            'error',
            4,
             'baseIndent': 1 
        ],
        'space-before-function-paren': ['error', 'never'],
        'semi': [2, "never"],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multiline-html-element-content-newline': 'off'
    ,
    overrides: [
        
            'files': ['*.vue'],
            'rules': 
                'indent': 'off'
            
        
    ]

也许你忘记了 package.json 上的一些 devDependecies，这些是我的

"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"

希望对你有所帮助！

【讨论】：

正如我在回答中所说，CLI 确实生成了一个eslint 版本<7。这可能就是 OP 没有有效解决方案的原因。

我无法在您的配置中找到更漂亮的任何地方。确定不只是 ESLint + Standard 没有 prettier？