2

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

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

vue create 仅提供以下选项：

  1. ESLint + 标准
  2. ESLint + Prettier

我尝试了两件事：

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

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

4

2 回答 2

2

你可以试试我刚刚创建的这个仓库吗？从我测试的结果来看，它看起来效果很好。

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 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
    }
}

格式化工作完美，不需要更多。

于 2021-07-02T12:50:43.620 回答
0

我有 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"

希望这些对你有帮助！

于 2021-07-02T14:04:54.140 回答