From 588cfe3ebf56300c4cc2b70e0630e7914a7efb6a Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 11 Jan 2021 17:42:46 +0100
Subject: [PATCH 1/4] (feat) bump prettier + config

Make some prettier options configurable

### BREAKING CHANGE
Bump to prettier-plugin-svelte 2.1.0 -> different formatting
---
 packages/language-server/package.json         |  2 +-
 packages/language-server/src/ls-config.ts     | 26 ++++++++++-
 .../src/plugins/svelte/SveltePlugin.ts        | 17 ++++---
 packages/svelte-vscode/README.md              | 30 ++++++++++++-
 packages/svelte-vscode/package.json           | 44 ++++++++++++++++++-
 packages/svelte-vscode/src/extension.ts       |  2 +-
 yarn.lock                                     |  8 ++--
 7 files changed, 114 insertions(+), 15 deletions(-)

diff --git a/packages/language-server/package.json b/packages/language-server/package.json
index cee54acab..256a118a6 100644
--- a/packages/language-server/package.json
+++ b/packages/language-server/package.json
@@ -51,7 +51,7 @@
         "estree-walker": "^2.0.1",
         "lodash": "^4.17.19",
         "prettier": "2.2.1",
-        "prettier-plugin-svelte": "~1.4.1",
+        "prettier-plugin-svelte": "~2.1.0",
         "source-map": "^0.7.3",
         "svelte": "3.31.0",
         "svelte-preprocess": "~4.6.1",
diff --git a/packages/language-server/src/ls-config.ts b/packages/language-server/src/ls-config.ts
index d5d01cf68..b52918619 100644
--- a/packages/language-server/src/ls-config.ts
+++ b/packages/language-server/src/ls-config.ts
@@ -42,7 +42,20 @@ const defaultLSConfig: LSConfig = {
         compilerWarnings: {},
         diagnostics: { enable: true },
         rename: { enable: true },
-        format: { enable: true },
+        format: {
+            enable: true,
+            config: {
+                svelteSortOrder: 'options-scripts-markup-styles',
+                svelteStrictMode: false,
+                svelteAllowShorthand: true,
+                svelteBracketNewLine: true,
+                svelteIndentScriptAndStyle: true,
+                printWidth: 80,
+                tabWidth: 2,
+                useTabs: false,
+                singleQuote: false
+            }
+        },
         completions: { enable: true },
         hover: { enable: true },
         codeActions: { enable: true },
@@ -149,6 +162,17 @@ export interface LSSvelteConfig {
     };
     format: {
         enable: boolean;
+        config: {
+            svelteSortOrder: string;
+            svelteStrictMode: boolean;
+            svelteAllowShorthand: boolean;
+            svelteBracketNewLine: boolean;
+            svelteIndentScriptAndStyle: boolean;
+            printWidth: number;
+            tabWidth: number;
+            useTabs: boolean;
+            singleQuote: boolean;
+        };
     };
     rename: {
         enable: boolean;
diff --git a/packages/language-server/src/plugins/svelte/SveltePlugin.ts b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
index 6a604cd18..b5075597b 100644
--- a/packages/language-server/src/plugins/svelte/SveltePlugin.ts
+++ b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
@@ -29,6 +29,7 @@ import { getHoverInfo } from './features/getHoverInfo';
 import { SvelteCompileResult, SvelteDocument } from './SvelteDocument';
 import { Logger } from '../../logger';
 import { getSelectionRange } from './features/getSelectionRanges';
+import { merge } from 'lodash';
 
 export class SveltePlugin
     implements
@@ -73,12 +74,16 @@ export class SveltePlugin
         // Try resolving the config through prettier and fall back to possible editor config
         const config =
             returnObjectIfHasKeys(await prettier.resolveConfig(filePath, { editorconfig: true })) ||
-            returnObjectIfHasKeys(this.configManager.getPrettierConfig()) ||
-            // Be defensive here because IDEs other than VSCode might not have these settings
-            (options && {
-                tabWidth: options.tabSize,
-                useTabs: !options.insertSpaces
-            });
+            merge(
+                this.configManager.get('svelte.format.config'),
+                returnObjectIfHasKeys(this.configManager.getPrettierConfig()) ||
+                    // Be defensive here because IDEs other than VSCode might not have these settings
+                    (options && {
+                        tabWidth: options.tabSize,
+                        useTabs: !options.insertSpaces
+                    }) ||
+                    {}
+            );
         // Take .prettierignore into account
         const fileInfo = await prettier.getFileInfo(filePath, {
             ignorePath: this.configManager.getPrettierConfig()?.ignorePath ?? '.prettierignore',
diff --git a/packages/svelte-vscode/README.md b/packages/svelte-vscode/README.md
index 9623ef67e..b7ca3c911 100644
--- a/packages/svelte-vscode/README.md
+++ b/packages/svelte-vscode/README.md
@@ -200,7 +200,35 @@ Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-u
 
 ##### `svelte.plugin.svelte.format.enable`
 
-Enable formatting for Svelte (includes css & js). _Default_: `true`
+Enable formatting for Svelte (includes css & js). You can set some formatting options through this extension. They will be ignored if there's a `.prettierrc` configuration file. _Default_: `true`
+
+##### `svelte.plugin.svelte.format.config.svelteSortOrder`
+
+Format: join the keys `options`, `scripts`, `markup`, `styles` with a - in the order you want. _Default_: `options-scripts-markup-styles`
+
+##### `svelte.plugin.svelte.format.config.svelteStrictMode`
+
+More strict HTML syntax. _Default_: `false`
+
+##### `svelte.plugin.svelte.format.config.svelteAllowShorthand`
+
+Option to enable/disable component attribute shorthand if attribute name and expression are the same. _Default_: `true`
+
+##### `svelte.plugin.svelte.format.config.svelteBracketNewLine`
+
+Put the `>` of a multiline element on a new line. _Default_: `true`
+
+##### `svelte.plugin.svelte.format.config.svelteIndentScriptAndStyle`
+
+Whether or not to indent code inside `<script>` and `<style>` tags. _Default_: `true`
+
+##### `svelte.plugin.svelte.format.config.printWidth`
+
+Maximum line width after which code is tried to be broken up. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead. _Default_: `80`
+
+##### `svelte.plugin.svelte.format.config.singleQuote`
+
+Use single quotes instead of double quotes, where possible. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead. _Default_: `false`
 
 ##### `svelte.plugin.svelte.hover.enable`
 
diff --git a/packages/svelte-vscode/package.json b/packages/svelte-vscode/package.json
index d81499578..180581412 100644
--- a/packages/svelte-vscode/package.json
+++ b/packages/svelte-vscode/package.json
@@ -255,7 +255,49 @@
                     "type": "boolean",
                     "default": true,
                     "title": "Svelte: Format",
-                    "description": "Enable formatting for Svelte (includes css & js)"
+                    "description": "Enable formatting for Svelte (includes css & js). You can set some formatting options through this extension. They will be ignored if there's a `.prettierrc` configuration file."
+                },
+                "svelte.plugin.svelte.format.config.svelteSortOrder": {
+                    "type": "string",
+                    "default": "options-scripts-markup-styles",
+                    "title": "Svelte Format: Sort Order",
+                    "description": "Format: join the keys `options`, `scripts`, `markup`, `styles` with a - in the order you want"
+                },
+                "svelte.plugin.svelte.format.config.svelteStrictMode": {
+                    "type": "boolean",
+                    "default": false,
+                    "title": "Svelte Format: Strict Mode",
+                    "description": "More strict HTML syntax"
+                },
+                "svelte.plugin.svelte.format.config.svelteAllowShorthand": {
+                    "type": "boolean",
+                    "default": true,
+                    "title": "Svelte Format: Allow Shorthand",
+                    "description": "Option to enable/disable component attribute shorthand if attribute name and expression are the same"
+                },
+                "svelte.plugin.svelte.format.config.svelteBracketNewLine": {
+                    "type": "boolean",
+                    "default": true,
+                    "title": "Svelte Format: Bracket New Line",
+                    "description": "Put the `>` of a multiline element on a new line"
+                },
+                "svelte.plugin.svelte.format.config.svelteIndentScriptAndStyle": {
+                    "type": "boolean",
+                    "default": true,
+                    "title": "Svelte Format: Indent Script And Style",
+                    "description": "Whether or not to indent code inside `<script>` and `<style>` tags"
+                },
+                "svelte.plugin.svelte.format.config.printWidth": {
+                    "type": "number",
+                    "default": 80,
+                    "title": "Svelte Format: Print Width",
+                    "description": "Maximum line width after which code is tried to be broken up. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead."
+                },
+                "svelte.plugin.svelte.format.config.singleQuote": {
+                    "type": "boolean",
+                    "default": false,
+                    "title": "Svelte Format: Quotes",
+                    "description": "Use single quotes instead of double quotes, where possible. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead."
                 },
                 "svelte.plugin.svelte.completions.enable": {
                     "type": "boolean",
diff --git a/packages/svelte-vscode/src/extension.ts b/packages/svelte-vscode/src/extension.ts
index 78a8b98f2..6b5a33ea3 100644
--- a/packages/svelte-vscode/src/extension.ts
+++ b/packages/svelte-vscode/src/extension.ts
@@ -86,7 +86,7 @@ export function activate(context: ExtensionContext) {
         documentSelector: [{ scheme: 'file', language: 'svelte' }],
         revealOutputChannelOn: RevealOutputChannelOn.Never,
         synchronize: {
-            configurationSection: ['svelte', 'javascript', 'typescript'],
+            configurationSection: ['svelte', 'javascript', 'typescript', 'prettier'],
             fileEvents: workspace.createFileSystemWatcher('{**/*.js,**/*.ts}', false, false, false)
         },
         initializationOptions: {
diff --git a/yarn.lock b/yarn.lock
index a49b2b207..2d429b615 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2120,10 +2120,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-svelte@~1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
-  integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
+prettier-plugin-svelte@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.0.tgz#61b930107cf4eb8bdae0e9d416e47fb36ee6b53c"
+  integrity sha512-AeGJWicKCU9CbPKj9Wzk7apdCJwB8gzFHOMMqJh1X4LiwkMLHUjjysowH+SZfHdg69Hjv5rw5M7uJn0WobFhRQ==
 
 prettier@2.2.1:
   version "2.2.1"

From 5d0f9143e4d0c8ec724479a162dfa28c27ce74e6 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 11 Jan 2021 17:43:22 +0100
Subject: [PATCH 2/4] bump ls because of breaking change

---
 packages/language-server/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/language-server/package.json b/packages/language-server/package.json
index 256a118a6..61d6f2545 100644
--- a/packages/language-server/package.json
+++ b/packages/language-server/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelte-language-server",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "description": "A language server for Svelte",
     "main": "dist/src/index.js",
     "typings": "dist/src/index",

From 2c95d9fe7ce5f2c1732a86175cce1c53d5916b63 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 11 Jan 2021 18:03:51 +0100
Subject: [PATCH 3/4] bugfix + testfix

---
 packages/language-server/src/ls-config.ts     |  4 ----
 .../src/plugins/svelte/SveltePlugin.ts        |  1 +
 .../test/plugins/svelte/SveltePlugin.test.ts  | 19 ++++++++++++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/language-server/src/ls-config.ts b/packages/language-server/src/ls-config.ts
index b52918619..2234485c0 100644
--- a/packages/language-server/src/ls-config.ts
+++ b/packages/language-server/src/ls-config.ts
@@ -51,8 +51,6 @@ const defaultLSConfig: LSConfig = {
                 svelteBracketNewLine: true,
                 svelteIndentScriptAndStyle: true,
                 printWidth: 80,
-                tabWidth: 2,
-                useTabs: false,
                 singleQuote: false
             }
         },
@@ -169,8 +167,6 @@ export interface LSSvelteConfig {
             svelteBracketNewLine: boolean;
             svelteIndentScriptAndStyle: boolean;
             printWidth: number;
-            tabWidth: number;
-            useTabs: boolean;
             singleQuote: boolean;
         };
     };
diff --git a/packages/language-server/src/plugins/svelte/SveltePlugin.ts b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
index b5075597b..21c975d7e 100644
--- a/packages/language-server/src/plugins/svelte/SveltePlugin.ts
+++ b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
@@ -75,6 +75,7 @@ export class SveltePlugin
         const config =
             returnObjectIfHasKeys(await prettier.resolveConfig(filePath, { editorconfig: true })) ||
             merge(
+                {}, // merge into empty obj to not manipulate own config
                 this.configManager.get('svelte.format.config'),
                 returnObjectIfHasKeys(this.configManager.getPrettierConfig()) ||
                     // Be defensive here because IDEs other than VSCode might not have these settings
diff --git a/packages/language-server/test/plugins/svelte/SveltePlugin.test.ts b/packages/language-server/test/plugins/svelte/SveltePlugin.test.ts
index afdad0658..78646827c 100644
--- a/packages/language-server/test/plugins/svelte/SveltePlugin.test.ts
+++ b/packages/language-server/test/plugins/svelte/SveltePlugin.test.ts
@@ -101,12 +101,23 @@ describe('Svelte Plugin', () => {
             });
         });
 
+        const defaultSettings = {
+            svelteSortOrder: 'options-scripts-markup-styles',
+            svelteStrictMode: false,
+            svelteAllowShorthand: true,
+            svelteBracketNewLine: true,
+            svelteIndentScriptAndStyle: true,
+            printWidth: 80,
+            singleQuote: false
+        };
+
         it('should use prettier fallback config for formatting', async () => {
             const formatStub = await testFormat(undefined, { fallbackConfig: true });
             sinon.assert.calledOnceWithExactly(formatStub, 'unformatted', {
                 fallbackConfig: true,
                 plugins: [],
-                parser: 'svelte'
+                parser: 'svelte',
+                ...defaultSettings
             });
         });
 
@@ -116,7 +127,8 @@ describe('Svelte Plugin', () => {
                 tabWidth: 4,
                 useTabs: false,
                 plugins: [],
-                parser: 'svelte'
+                parser: 'svelte',
+                ...defaultSettings
             });
         });
 
@@ -126,7 +138,8 @@ describe('Svelte Plugin', () => {
                 tabWidth: 4,
                 useTabs: false,
                 plugins: [],
-                parser: 'svelte'
+                parser: 'svelte',
+                ...defaultSettings
             });
         });
     });

From a843c74f8f6bba162576e895704f0c9f49dd1e32 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 13 Jan 2021 13:58:39 +0100
Subject: [PATCH 4/4] docs tweak

---
 packages/svelte-vscode/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte-vscode/README.md b/packages/svelte-vscode/README.md
index b7ca3c911..6f220ff83 100644
--- a/packages/svelte-vscode/README.md
+++ b/packages/svelte-vscode/README.md
@@ -200,11 +200,11 @@ Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-u
 
 ##### `svelte.plugin.svelte.format.enable`
 
-Enable formatting for Svelte (includes css & js). You can set some formatting options through this extension. They will be ignored if there's a `.prettierrc` configuration file. _Default_: `true`
+Enable formatting for Svelte (includes css & js) using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte). You can set some formatting options through this extension. They will be ignored if there's a `.prettierrc` configuration file. _Default_: `true`
 
 ##### `svelte.plugin.svelte.format.config.svelteSortOrder`
 
-Format: join the keys `options`, `scripts`, `markup`, `styles` with a - in the order you want. _Default_: `options-scripts-markup-styles`
+Format: join the keys `options`, `scripts`, `markup`, `styles` with a `-` in the order you want. _Default_: `options-scripts-markup-styles`
 
 ##### `svelte.plugin.svelte.format.config.svelteStrictMode`