VS Code 中使用 Prettier 的 TypeScript 快速修复操作答案

【问题标题】：Quick Fix actions in VS Code for TypeScript using PrettierVS Code 中使用 Prettier 的 TypeScript 快速修复操作
【发布时间】：2019-09-24 05:13:20
【问题描述】：

我有一个通过 Babel 编译 TypeScript 的设置。此外，我还为 linting/formatting 设置了 ESLint 和 Prettier。 ESLint 配置为使用来自 @typescript-eslint/parser 的解析器 - 不涉及 TSLint。

ESLint 正确地应用了 Prettier 规则，并向我展示了 VS Code 中用于常规 JavaScript 和 TypeScript 的波浪线。但是，只有常规 JavaScript 在 VS Code 工具提示中的“快速修复...”选项下有任何可用的操作。对于 TypeScript 文件，对于 Prettier 问题，它总是显示“没有可用的代码操作”。有什么方法可以让 Prettier 的快速修复也适用于 TypeScript 文件？

这是我的配置文件：

.eslintrc

{
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint"],
  "env": {
    "browser": true,
    "jest": true
  }
}

.prettierrc.js

module.exports = {
  printWidth: 120,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
};

babel.config.js

module.exports = api => {
  api.cache.invalidate(() => process.env.NODE_ENV === 'production');

  const presets = ['@babel/env', '@babel/typescript', '@babel/react'];

  const plugins = ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread'];

  if (process.env.NODE_ENV === 'development') {
    plugins.push('react-hot-loader/babel');
  }

  return {
    presets,
    plugins,
  };
};

【问题讨论】：

标签： javascript typescript visual-studio-code eslint prettier

【解决方案1】：

当添加到我的 settings.json 时，这对我有用：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
],

我没有在这个项目中使用 Prettier，所以 YMMV。

更新：如果这不起作用，您可能还需要这个：

"eslint.options": {
  "extensions": [".js", ".jsx", ".ts", ".tsx"]
}

【讨论】：

这也对我有用。我正在为一个项目使用 Prettier，并将 "autoFix": true 添加到我的 "typescript" validate 条目就可以了！