Taming Auto-Imports: How to Use Single Quotes in WebStorm/PhpStorm for TypeScript

• When you use the auto-import functionality (usually by pressing Option + Enter on a symbol), WebStorm/PhpStorm automatically inserts an import statement to bring the referenced symbol into scope.
• By default, these auto-generated imports use double quotes (").

Configuring Quote Style for TypeScript Imports

If your project or coding style preference dictates using single quotes (') for imports, here's how to adjust WebStorm/PhpStorm's behavior:

1. Open the Settings/Preferences dialog (usually by pressing Ctrl + , or Cmd + ,).
2. In the search bar, type "Code Style."
3. Select "TypeScript" from the language options on the left.
4. Navigate to the "Punctuation" tab.
5. Under the "Generated code" section, look for the "Quote marks" setting.
6. Choose "Single quotes" from the dropdown menu.

Additional Considerations:

• This setting only affects future auto-generated imports. Existing code will remain unchanged unless you manually modify it or use a code reformatting tool.
• WebStorm/PhpStorm offers other code style customization options. You can explore the "Spaces" and "Wrapping and Braces" tabs to tailor code formatting to your liking.

Benefits of Consistent Quote Style:

• Enhances code readability and maintainability by enforcing a consistent style throughout your project.
• Aligns your code with project-specific coding conventions.

Example Code (Before Configuration)

// This is what WebStorm/PhpStorm might auto-generate by default (double quotes)
import { Component } from "react"; // Incorrect for your project's style

function MyComponent() {
  return <div>Hello World!</div>;
}

Example Code (After Configuration - Single Quotes)

// This is what WebStorm/PhpStorm will auto-generate after setting single quotes
import { Component } from 'react'; // Correct with single quotes

function MyComponent() {
  return <div>Hello World!</div>;
}

• Some code formatting tools like ESLint or Prettier can be integrated with WebStorm/PhpStorm. These tools can automatically reformat your code according to pre-defined rules, including enforcing single quotes for imports.
• By setting up your preferred code formatter and integrating it with the IDE, you can format your code on save or with a dedicated shortcut. While this won't directly affect auto-imports, it can maintain consistency for existing code.

ESLint/TSLint Integration (if applicable):

• If your project uses ESLint or TSLint for linting, you might be able to configure a rule related to quote style. While this wouldn't necessarily change the auto-import behavior, it would flag violations (double quotes in this case) during linting, prompting you to fix them.
• Explore the documentation of your chosen linter for specific rules related to quote style for imports.

Here's a summary of the options:

• Primary Method: Use the Settings menu within WebStorm/PhpStorm to configure the "Quote marks" setting under "Generated code" in the "Punctuation" tab for TypeScript code style (as explained earlier).
• Alternative 1: Utilize a code formatter like ESLint or Prettier integrated with your IDE to enforce single quotes for imports during code formatting (doesn't directly impact auto-imports).
• Alternative 2: If using ESLint/TSLint, explore linter-specific rules to enforce single quotes and receive warnings during linting (doesn't change auto-imports).