时间戳

首页 > 解决方案 > 如果在 .eslintrc 和 .prettierrc 中配置，ESLint 会更漂亮地运行两次

eslint - 如果在 .eslintrc 和 .prettierrc 中配置，ESLint 会更漂亮地运行两次

问题描述

我正在尝试解决在 VSCode 中保存格式时遇到的问题。我没有将 prettier 作为独立扩展安装。我已经安装了 eslint。我正在使用打字稿文件。

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

我也安装了 Vetur，但我认为我只有在保存时运行 vetur，因为我的 vsconfig 文件指定了这一点：

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

但是 prettier 肯定会运行两次。我应该寻找其他一些设置吗？或者 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,
  printWidth: 100,
  tabWidth: 2,
  endOfLine: 'lf',
  arrowParens: 'always',
  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"
    }
  },

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

标签： eslinttypescript-eslintveturprettier-eslint

解决方案

我相信我已经找到了答案。

第一轮美化是由 eslint 完成的，它使用 eslintrc 中的更漂亮的配置。第二轮美化由 vetur 在 vue 文件的 typescript 部分完成，它使用 prettierrc 文件中的 prettier 配置。

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

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

这些以前更漂亮。一旦我将这些更改为无，文件的打字稿部分删除了尾随逗号并将它们删除。文件的 html 模板部分的格式仍然正确。

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

推荐阅读