如何在 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 的格式化。