如果.eslintrc和.prettierrc中的配置，ESLint运行两次漂亮的

如何解决如果.eslintrc和.prettierrc中的配置，ESLint运行两次漂亮的

我试图解决保存在VSCode中的格式问题。我没有安装更漂亮的独立扩展。我已经安装了eslint。我正在处理打字稿文件。

在我的编辑器中，我看到尾随逗号的警告，当我单击保存时，我看到尾随逗号消失，然后重新出现。我意识到，我的.eslintrc.js文件中的尾随逗号设置为“ none”，而在我的.prettierrc.js文件中设置为“ always”。它们都在下面。

我也安装了Vetur，但是我认为我只在保存时运行vetur，因为我的vsconfig 文件指定了以下内容：

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

但是更漂亮的肯定运行了两次。我应该寻找其他设置吗？还是eslint为找到的每套配置都运行漂亮的一次。

这是我的eslintrc文件：

module.exports = {
  root: true,env: {
    node: true,browser: true
  },extends: [
    'plugin:vue/strongly-recommended','@vue/airbnb','@vue/typescript','plugin:prettier/recommended'
  ],parserOptions: {
    ecmaVersion: 2020,parser: '@typescript-eslint/parser',sourceType: 'module'
  },rules: {
    'no-console': 'off','no-debugger': 'off','@typescript-eslint/no-empty-function': 'off','@typescript-eslint/no-namespace': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/no-non-null-asserted-optional-chain': 'off','vue/component-name-in-template-casing': ['error','PascalCase'],'vue/no-v-html': 'off','prettier/prettier': [
      'warn',{
        singleQuote: true,semi: true,trailingComma: 'none',printWidth: 100,tabWidth: 2,endOfLine: 'lf',arrowParens: 'always',bracketSpacing: true
      }
    ]
  },overrides: [
    {
      files: ['**/*.test.ts'],env: {
        jest: true
      }
    }
  ]
};

这是我的.pretterrc.js文件：

module.exports = {
  semi: true,trailingComma: 'all',singleQuote: true,bracketSpacing: true
};

我知道我可以使两个文件保持一致，并且我将获得正确的输出，但是我不希望格式运行两次。使用打字稿文件似乎很慢，因为它一直没有格式化两次。

我认为我的settings.json文件的相关部分是：

  "eslint.alwaysShowStatus": true,"eslint.validate": [
    "vue","html","javascript","typescript"
  ],"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },"[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },"[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },"editor.formatOnSave": true,"vetur.experimental.templateInterpolationService": true,"vetur.format.defaultFormatter.js": "prettier-eslint","vetur.format.defaultFormatter.ts": "prettier-tslint","vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },"prettyhtml": {
      "printWidth": 100,"singleQuote": false,"wrapAttributes": true,"sortAttributes": true
    },"vetur.grammar.customBlocks": {
      "docs": "md","i18n": "json"
    }
  },

任何要查看哪些设置的指针都将不胜感激。

解决方法

我相信我找到了答案。

第一轮美化工作由eslint完成，它使用eslintrc中更漂亮的配置。 vetur在vue文件的typescript部分进行第二轮修饰，并使用在prettierrc文件中找到的更漂亮的配置。

我要解决的问题是通过更改工作区的settings.json文件中的这两行来告诉vetur不要格式化打字稿代码：

  "vetur.format.defaultFormatter.js": "none","vetur.format.defaultFormatter.ts": "none",

这些以前很漂亮。一旦将它们更改为none，文件的打字稿部分将尾随的逗号删除，并将其删除。该文件的html模板部分仍被正确格式化。

我认为这将加快文件保存速度，因为vetur现在可以在保存时忽略文件的打字稿部分，因为eslint已经对其进行了处理。

您不需要将更漂亮的配置放入.eslintrc文件中，因为最新版本的ESLint-plugin-prettier将从.prettierrc加载