Quick Fix actions in VS Code for TypeScript using Prettier

Question

I have a setup compiling TypeScript trough Babel. In addition I've set up ESLint and Prettier for linting/formatting. ESLint is configured to use the parser from @typescript-eslint/parser - no TSLint involved.

ESLint is correctly applying Prettier rules and showing me the squiggly lines in VS Code for both regular JavaScript and TypeScript. However, only regular JavaScript has any actions available under the "Quick Fix..." option in the VS Code tooltip. For TypeScript files it always says "No code actions available" for Prettier issues. Is there any way to make Prettier's quick fixes work with TypeScript files as well?

Here are my configuration files:

.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,
  };
};

Joey Joey · Accepted Answer · 2019-05-14T18:43:25

This worked for me, when added to my settings.json:

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

I'm not using Prettier in this project, so YMMV.

Update: If that doesn't do the trick, you may also need this:

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

Quick Fix actions in VS Code for TypeScript using Prettier

1 Answers