javascript - Quick Fix actions in VS Code for TypeScript using Prettier - Stack Overflow

admin管理员组

文章数量:1325231

I have a setup piling 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/remended",
    "plugin:@typescript-eslint/remended",
    "plugin:prettier/remended",
    "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,
  };
};

I have a setup piling 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/remended",
    "plugin:@typescript-eslint/remended",
    "plugin:prettier/remended",
    "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

Share Improve this question Follow asked May 6, 2019 at 14:37 Martin WedvichMartin Wedvich 2,26622 gold badges2323 silver badges4242 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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

本文标签： javascriptQuick Fix actions in VS Code for TypeScript using PrettierStack Overflow