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,
  };
};
Share Improve this question asked May 6, 2019 at 14:37 Martin WedvichMartin Wedvich 2,2662 gold badges23 silver badges42 bronze badges
Add a ment  | 

1 Answer 1

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