Configure Single Quotes for TypeScript Auto Imports in WebStorm and PhpStorm

You will learn how JetBrains IDE code style settings control quote characters in generated TypeScript code, including auto-import statements. You will also see how to apply the style to existing files and keep formatting consistent across a team.

A code editor can generate code for you: imports, method bodies, type annotations, and more. Generated code follows the editor's code style configuration, not necessarily the style already visible in a file.

For TypeScript, the quote choice for newly generated string literals and module paths is controlled by the TypeScript code style settings. Set the IDE to use single quotes and auto-imports will be generated in the preferred form:

import { formatDate } from './date-utils';

This matters because consistent formatting makes code easier to scan, reduces noisy formatting-only changes in pull requests, and prevents conflicts with project formatters such as Prettier or ESLint.

Think of auto-import as a form filled in by a printer. The IDE knows the information to print—the exported name and its file path—but it uses a template to decide the presentation.

The TypeScript code style setting is that template. Choosing single quotes tells the IDE which quote marks to print whenever it creates a new import or string literal.

In TypeScript, both quote styles create string values:

const singleQuoted = 'Hello';
const doubleQuoted = "Hello";

For most ordinary strings, TypeScript treats these identically. The difference is convention and escaping.

const message = 'Don\'t forget to save.';
const label = "Don't forget to save.";

If your project convention is single quotes, configure the IDE as follows:

1. Open Settings on Windows/Linux or Preferences on macOS.
2. Go to Editor → Code Style → TypeScript.
3. Open the Punctuation tab.
4. Enable Use single quotes in new code.
5. Click Apply or OK.

After this, accepting an auto-import should produce:

import { parseUser } from './parse-user';

The wording and exact tab position can vary slightly between JetBrains IDE versions, but it is a TypeScript code-style option named Use single quotes in new code.

Consider a file that uses a function without importing it:

const displayName = formatUserName(user);

Assume formatUserName is exported from ./format-user-name.

1. The IDE detects that formatUserName is unresolved.
2. You invoke the quick-fix, often with Alt+Enter or Option+Enter.
3. You select the option to import the symbol.
4. The IDE determines the module path: ./format-user-name.
5. It consults TypeScript code style for how to write the module string.
6. With Use single quotes in new code enabled, it inserts:

import { formatUserName } from './format-user-name';

const displayName = formatUserName(user);

If the option is disabled, the same action may insert double quotes instead. The import target is unchanged; only its formatting differs.

• Frontend applications: Keep imports consistent in React, Angular, Vue, or plain TypeScript source files.
• Shared repositories: Match an agreed style so developers do not create quote-only diffs.
• Linted projects: Avoid ESLint violations when the project requires single quotes.
• Prettier-formatted projects: Align editor-generated imports with the formatter's configured singleQuote preference.
• Large refactors: Let IDE-generated imports follow the repository style while moving files or renaming exports.

In a real project, use more than one layer to keep formatting stable:

• Configure the JetBrains TypeScript code style so new imports look correct immediately.
• Commit shared IDE settings when the team uses JetBrains project settings.
• Use a formatter or linter in the repository as the final source of enforcement.

For example, Prettier can enforce single quotes with:

{
  "singleQuote": true
}

ESLint projects may use a quote rule such as:

{
  "rules": {
    "quotes": ["error", "single", { "avoidEscape": true }]
  }
}

If your project uses a formatter, run it on save or before committing. The IDE setting improves the editing experience, while the formatter ensures every contributor and CI job follows the same rule.

Changing JavaScript settings instead of TypeScript settings

TypeScript has its own code-style page. Changing Editor → Code Style → JavaScript may not affect TypeScript auto-imports.

Avoid it: Configure Editor → Code Style → TypeScript → Punctuation.

Expecting existing imports to change automatically

The setting applies to newly generated code. It does not necessarily rewrite every existing import immediately.

Avoid it: Reformat the file or project after changing the setting. Use Code → Reformat Code and review the changes.

Fighting a project formatter

You may configure single quotes in the IDE, but Prettier could be configured to use double quotes. Formatting on save then changes imports back.

Avoid it: Make the IDE setting, formatter configuration, and lint rules agree.

Manually editing every generated import

This works once but wastes time and makes mistakes likely.

// Generated by the IDE
import { getOrder } from "./orders";

// Manually changed repeatedly
import { getOrder } from './orders';

Avoid it: Fix the code-style configuration once rather than correcting each import.

Confusing TypeScript strings with HTML attribute quotes

The TypeScript quote setting controls TypeScript source code, including import paths. It does not mean every quote in HTML templates must use the same style.

Single and double quotes are usually equivalent for TypeScript string literals. Choose the project convention, then configure tools consistently.

• Setting path: Settings/Preferences → Editor → Code Style → TypeScript → Punctuation
• Enable: Use single quotes in new code
• Result: Auto-imports use module paths like from './module'.
• Existing files: Run Code → Reformat Code if you want to update them.
• Team consistency: Match IDE settings with Prettier and ESLint configuration.
• Important: TypeScript and JavaScript code-style settings can be separate.
• Quote choice: Single and double quotes usually have the same runtime meaning; this is primarily a formatting convention.

Why does WebStorm or PhpStorm use double quotes for auto-imports?

The IDE is following its current TypeScript code-style configuration. Enable Use single quotes in new code in the TypeScript Punctuation settings.

Where is the single-quote setting in JetBrains IDEs?

Open Settings/Preferences → Editor → Code Style → TypeScript → Punctuation, then enable Use single quotes in new code. The label may vary slightly by IDE version.

Will the setting change imports that are already in my project?

Not automatically in every file. Use Reformat Code on selected files or the project, then review the resulting changes.

Does this setting affect HTML templates?

No. This TypeScript code-style option affects TypeScript code generation, including import module strings. Template formatting is configured separately.

Why do imports switch back to double quotes after I save?

A formatter such as Prettier, or an ESLint auto-fix rule, is likely applying a conflicting project rule. Update that configuration to prefer single quotes.

Is there a technical difference between single and double quotes in TypeScript?

For normal string literals, no meaningful runtime difference exists. The practical difference is escaping and the formatting convention used by the project.

Should I rely only on IDE settings for a team project?

No. IDE settings help locally, but a shared formatter or lint rule provides consistent enforcement for every developer and CI environment.

• TypeScript code style settings — Control how the IDE generates and reformats TypeScript code.
• Auto-imports — IDE assistance that adds imports for unresolved symbols.
• Code formatting — Applies consistent whitespace, punctuation, and layout rules.
• Prettier — A formatter often used to enforce quote style across a repository.
• ESLint — A linter that can report or auto-fix quote-style violations.
• Import statements — TypeScript syntax for accessing exports from another module.
• Template literals — Backtick-delimited strings used for interpolation and multiline text.