javascript - 如何在VsCode上的Vue项目中添加eslint规则到prettier

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 docs :

Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.

Example .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 rule到 rules 属性。请注意，eslint-plugin-vue规则名称均以vue/为前缀，因此在中使用“vue/script-indent”下面的 >rules 属性:

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

最后，确保您拥有 ESLint VS Code extension安装后可以从 IDE 进行格式化。

更漂亮

您的工作区设置指向 Prettier，因此请确保您的 Prettier 选项符合 vue/script-indent 规则。即tabWidth value in Prettier应与 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 extension安装后可以从 IDE 进行格式化。