如何在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

创建.eslintrc.*文件以配置规则。另请参阅：http://eslint.org/docs/user-guide/configuring。

示例.eslintrc.js：

module.exports ={扩展: //在这里添加更多通用的规则集，如: //‘eslint:推荐’，‘插件:vue/essential’，规则：{ //覆盖/在这里添加规则设置，如: //‘vue/no-unused vars’：'error‘}}

因此，在.eslintrc.js中，将script-indent rule添加到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 extension，以便从集成开发环境中启用格式化。

更漂亮

您的工作区设置指向更漂亮，因此请确保您的更漂亮的选项与vue/script-indent规则一致。也就是说，tabWidth value in Prettier应该与vue/script-indent中的选项卡宽度匹配。

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

// .prettierrc
{             
  "tabWidth": 4
}

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

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

还要确保您安装了Prettier VS Code extension，以便从集成开发环境中启用格式化。

​

​