javascript - 如何在 VsCode 上的 Vue 项目中添加 eslint 规则以更漂亮

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添加一个规则

我不知道如何将此规则添加到我现有的配置中

标签： javascriptvue.jseslintprettier

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/，因此请"vue/script-indent"在下面的rules属性中使用：

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规则。也就是说，tabWidthPrettier 中的值应该与vue/script-indent.

例如，要要求 4 个空格的制表符宽度，.prettierrc请使用以下 JSON 在项目的根目录中创建：

// .prettierrc
{             
  "tabWidth": 4
}

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

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

还要确保您安装了Prettier VS Code 扩展以启用从 IDE 进行格式化。