Vue 2 - ESLint + 標准 + 更漂亮

Question

如何創建一個使用 ESLint + StandardJS + Prettier 的 Vue 2 項目？

StandardJS 的規則自然應該優先於 Prettier 的規則。

vue create 只提供以下選項：

1. ESLint + 標准
2. ESLint + 更漂亮

我嘗試了兩件事：

1. 我混合了上述兩個選項的 eslint 配置。 這導致了依賴地獄，一旦解決了它，它並沒有真正按預期工作。
2. 我在 eslintrc.js 中添加了 prettier-standard 包，它也沒有按預期工作。 值得一提的是，prettier-standard 在從命令行手動執行時效果很好。

我當然希望在項目配置級別而不是在 IDE 級別進行設置。

Answer 1

你能試試我剛剛創建的這個 repo 嗎？ 從我的測試來看，它看起來效果很好。

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 one（如果使用VScode），否則可能會發生沖突

---

我試圖從@vue/prettier刪除

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

並查看它是否成功刪除了任何內容; 確實如此！

錯誤確實來自 ESlint（如果我們確實刪除了@vue/prettier prettier ），並且它們僅在保存時由 ESlint 修復（在 ESlint 服務器 + VScode 重新啟動后）！

把Prettier放回去當然很好。

---

幸運的是，我有一台新 PC，因此有機會使用 VScode 嘗試全新的配置。 我只需要安裝ESlint並將這些設置放入我的settings.json

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

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

Answer 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 上的一些 devDependencies，那些是我的

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

希望那些會幫助你！