如何在 Vue 項目中添加 eslint 規則到 prettier on VsCode

Question

我想將規則添加到我現有的格式規則中

實際上，我使用的是.vscode/settings.json文件，其中包含以下內容

{
 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.style": false,
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "prettier",
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "octref.vetur",
  },
  "eslint.format.enable": true
} 

它運作良好，但假設我想為示例vue-script-indent添加規則

我不知道如何將此規則添加到我現有的配置中

Answer 1

vue/script-indent （ESLint 規則）

來自eslint-plugin-vue文檔：

創建.eslintrc.*文件來配置規則。 另請參閱： http://eslint.org/docs/user-guide/configuring 。

示例.eslintrc.js ：

 module.exports = { extends: [ // add more generic rulesets here, such as: // 'eslint:recommended', 'plugin:vue/essential' ], rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' } }

因此，在您的.eslintrc.js中，將script-indent規則添加到rules屬性中。 請注意eslint-plugin-vue規則名稱都以vue/為前綴，因此在下面的rules屬性中使用"vue/script-indent" ：

module.exports = {
  extends: [
    'plugin:vue/essential',
  ],
  rules: {
    'vue/script-indent': ['error', 2, {
      baseIndent: 0,
      switchCase: 0,
      ignores: []
    }]
  }
}

最后，確保安裝了ESLint VS Code 擴展以啟用來自 IDE 的格式化。

更漂亮

您的工作區設置指向 Prettier，因此請確保您的 Prettier 選項符合vue/script-indent規則。 也就是說，Prettier 中的tabWidth值應該與vue/script-indent中的制表符寬度匹配。

例如，要要求 4 個空格的制表符寬度，請使用以下 JSON 在項目的根目錄中創建.prettierrc ：

// .prettierrc
{             👇
  "tabWidth": 4
}

...並更新.eslintrc.js以匹配：

// .eslintrc.js
module.exports = {
  rules: {                         👇
    'vue/script-indent': ['error', 4, {
      baseIndent: 0,
      switchCase: 0,
      ignores: []
    }]
  }
}

還要確保安裝了 Prettier VS Code 擴展以啟用來自 IDE 的格式化。