Question

我试图解决保存在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,
  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"
    }
  },

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

Answer 1

我相信我找到了答案。

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

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

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

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

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

Answer 2

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

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

2 个答案: