(feat) bump prettier + config

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",
@@ -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",

packages/language-server/src/ls-config.ts

@@ -42,7 +42,18 @@ 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,
+                singleQuote: false
+            }
+        },
         completions: { enable: true },
         hover: { enable: true },
         codeActions: { enable: true },
@@ -149,6 +160,15 @@ export interface LSSvelteConfig {
     };
     format: {
         enable: boolean;
+        config: {
+            svelteSortOrder: string;
+            svelteStrictMode: boolean;
+            svelteAllowShorthand: boolean;
+            svelteBracketNewLine: boolean;
+            svelteIndentScriptAndStyle: boolean;
+            printWidth: number;
+            singleQuote: boolean;
+        };
     };
     rename: {
         enable: boolean;

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,17 @@ 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(
+                {}, // 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
+                    (options && {
+                        tabWidth: options.tabSize,
+                        useTabs: !options.insertSpaces
+                    }) ||
+                    {}
+            );
         // Take .prettierignore into account
         const fileInfo = await prettier.getFileInfo(filePath, {
             ignorePath: this.configManager.getPrettierConfig()?.ignorePath ?? '.prettierignore',

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
             });
         });
     });

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) 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`
+
+##### `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`
 

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",

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: {

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"