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

Question

我有一个编译TypeScript槽Babel的安装程序。 此外，我还设置了ESLint和Prettier进行掉毛/格式化。 ESLint配置为使用@typescript-eslint/parser -不涉及TSLint。

ESLint正确地应用了漂亮的规则，并向我展示了VS Code中针对常规JavaScript和TypeScript的波浪线。 但是，只有常规JavaScript才能在VS Code工具提示的“快速修复...”选项下进行任何操作。 对于TypeScript文件，对于更漂亮的问题，它始终显示“没有可用的代码操作”。 有什么方法可以使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,
  };
};

Answer 1

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

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

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

更新：如果不能解决问题，您可能还需要：

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