使用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"]
}