Import Statements Single vs Double Quotes

Question

When using an import such as below:

import { Component, OnInit } from "@angular/core";

Is it convention to use single or double quotes around "@angular/core"?

TSLint complians saying:

[tslint] " should be ' (quotemark)

This seems odd as the file was created with the angular-cli command

ng g c someComponent 

so it would seem that it would create the imports to typescripts standards so now I'm not sure which format is correct.

Sit

afaik, it does not really matter. – Certified

Which version of the CLI are you using. I've never seen it enerate imports with double quotes. Are you sure it's not your IDE doing it automatically for you? Here's a diff of a project generated with version 1.0.0 ofthe CLI and the same project generated with the latest one: github.com/cexbrayat/angular-cli-diff/compare/1.0.0...1.5.2. It only has imports with single quotes. – Seedman

@JBNizet you were correct, I was using an outdated version of the angular-cli. Updating to a new version puts single quotes on the imports. Thanks! – Sit

Answer 1

The Google Style Guide has long said:

Prefer ' over "

And this has made its way into many tools, such as TSLint.

When everyone used to put lots of HTML inside strings in languages like JavaScript and PHP this used to be a big deal, as it meant you could use double-quoted HTML attributes inside a string without escaping the quotes.

This use case is less important these days, because we don't tend to concatenate HTML strings.

TSLint rules are over and above the TypeScript compiler and you can disable them or configure them to your liking. The team is more important than the tool - so bend it to the will of the team.

Ereshkigal

Is there a functional difference? When importing with single quotes in VS Code, Typescript cannot find the declaration file, but it seems fine with double quotes. – Pooch

a personal pet hate of mine but the Javascript world like to see ' instead of " – Carswell