29

I am using VS Code 1.17.2 with the following extensions installed (Unfortuanetly i can't link them since i don't have enough reputation):

  • Angular 5 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
  • Angular Essentials
  • Angular Language Service
  • Angular v5 TypeScript Snippets
  • angular2-inline
  • Auto Import
  • Debugger for Chrome
  • EditorConfig for VS Code (since Angular Essentials depends on it)
  • HTML Snippets
  • IntelliSense for CSS class names
  • Material Icon Theme
  • Path Intellisense
  • PHP IntelliSense
  • Prettier - Javascript formatter
  • TSLint
  • Visual Studio Team Services
  • vscode-icons
  • Winter Is Coming Theme

When auto formatting a TypeScript file (Shift + Alt + F), it does the indent right, but it also changes all single quotation marks to double quotation marks, which makes TSLint complain. I am pretty certain the auto indent is not supposed to do that and it really is annoying.

Any help would be greatly appreciated.

Johannes Piontkowitz
  • 687
  • 1
  • 9
  • 18

2 Answers2

68

The extensions uses the settings that are set in your VS Code user settings file.

To change it, open your user settings file

Ctrl+Shift+P and type Open User Settings.

Search for prettier.singleQuote and change it to true like

"prettier.singleQuote": true

Daniel B
  • 8,770
  • 5
  • 43
  • 76
  • 3
    As the Settings in the left hand are readonly, place the "prettier.singleQuote": true on the right hand. – argoth May 09 '18 at 19:41
  • @Argoth I couldn't understand what you are saying, I am facing the permission issue can you please elaborate ? – Lalit Kushwah Jul 04 '18 at 06:17
  • 1
    @LalitKushwah You must edit the USER SETTINGS instead of DEFAULT USER SETTINGS, in other words, USER SETTINGS will always subscribe DEFAULT USER SETTINGS that can not be edited. – argoth Jul 04 '18 at 14:41
6

Daniel B's solution didnt help my case, I needed to follow this: https://github.com/praveenpuglia/angular-sanity/issues/4

VSCode

Auto imports are intelligent in VSCode to use tslint.json file in order to insert import statements based on your configuration. But if you are manually writing import statement and accidentally mess that up here's one thing to rescue.

In User Preferences set the following:

"tslint.autoFixOnSave": true

Edit: one more thing, I noticed after testing that my issue seemed to boil down to the formatter. I updated my typescript formatter to this: 
"[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
}

after I updated the formatter that - I believe - helped fix the part that was incorrectly updating my code to double quotes

Sam
  • 1,264
  • 14
  • 19