VUE2 -ESLINT +标准 + Prettier

Question

我如何创建一个使用ESLINT + Standardjs + Prettier的VUE 2项目？ tandardjs的规则自然应该优先优先。

vue创建仅提供以下选项：

eslint +标准

eSlint +Prettier
2. 我尝试了两件事：

I混合了上述两个选项的ESLINT配置。这导致了一个依赖地狱，一旦解决了，它并没有真正正常工作。

i我将漂亮的标准包添加到了我的eslintrc.js，它也没有正常工作。值得一提的是，从命令行手动执行它时，漂亮的标准效果很好。

我当然希望在项目配置级别而不是在IDE级别上进行设置。
2. 您可以尝试我刚创建的此仓库吗？从我的测试中看起来很棒。

https：//github.com/kissu/stackoverflow-eslint-standard-prettier-config

Answer 1

I创建了2个项目，并将

standard一个项目倾倒到Prettier

One

中

Cli的当前版本

@vue/eslint-config-standard
• 正在抛出错误（

  Environment key "es2021" is unknown

  ），因为它需要ESLINT 7才能工作，如ThisChangElog中所示
将ESLINT推向最新版本
• 7.29.0

  ，修复了问题

  要检查您的项目当前版本的ESLINT，您可以运行

  npx eslint --version
当然，您需要启用ESLINT扩展名，并且更漂亮的一个（如果使用VSCODE），否则可能会发生冲突
• 我试图从
删除
• @vue/prettierextends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', '@vue/prettier']
• 看看它是否成功地删除了任何
;

---

错误确实来自ESLINT（如果我们确实删除了

@vue/prettier

），并且仅在保存时通过ESLINT（ESLINT SERVER + VSCODE重新启动后）固定它们！

输入

Prettier

后背效果很好。

luckly，我有了一台新的PC，因此有机会尝试使用VSCODE进行完整的配置。
我必须只安装

eSlint

，然后将这些设置放入我的

settings.json

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

cormatting效果完美，不需要更多。

我的Eslint 7.8.1具有更漂亮的效果，我没有任何问题，也许您拥有的Eslint版本与漂亮或您的ESLINT不兼容，或者您的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'
            }
        }
    ]
}

也许您也忘记了包装上的一些DevDepdecies。

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

希望这些会帮助您！