Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VS Code Auto Indent / Code Formatting changes single quotation marks to double

Tags:

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.

like image 369
Johannes Piontkowitz Avatar asked Nov 03 '17 08:11

Johannes Piontkowitz


People also ask

How do I fix auto indentation VSCode?

Press Ctrl+Shift+P to open Command Palette. Type in settings and select Open User Settings. In Search settings box, input indent to search for settings related to indentation. Select full in Editor: Auto Indent section.

What is the difference between single and double quotation marks in coding?

As far as language syntax is concerned, there is no difference in single or double quoted string. Both representations can be used interchangeably. However, if either single or double quote is a part of the string itself, then the string must be placed in double or single quotes respectively.


2 Answers

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

like image 126
Daniel B Avatar answered Oct 10 '22 10:10

Daniel B


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

like image 27
Sam Avatar answered Oct 10 '22 08:10

Sam