Skip to content

Commit f561e2c

Browse files
dummdidummdummdidumm
authored
(feat) bump prettier + config (#758)
Make some prettier options configurable ### BREAKING CHANGE Bump to prettier-plugin-svelte 2.1.0 -> different formatting #451 , #721
1 parent 20e56d0 commit f561e2c

File tree

8 files changed

+128
-19
lines changed

8 files changed

+128
-19
lines changed

‎packages/language-server/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-language-server",
3-
"version": "0.11.0",
3+
"version": "0.12.0",
44
"description": "A language server for Svelte",
55
"main": "dist/src/index.js",
66
"typings": "dist/src/index",
@@ -51,7 +51,7 @@
5151
"estree-walker": "^2.0.1",
5252
"lodash": "^4.17.19",
5353
"prettier": "2.2.1",
54-
"prettier-plugin-svelte": "~1.4.1",
54+
"prettier-plugin-svelte": "~2.1.0",
5555
"source-map": "^0.7.3",
5656
"svelte": "3.31.0",
5757
"svelte-preprocess": "~4.6.1",

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,18 @@ const defaultLSConfig: LSConfig = {
4343
compilerWarnings: {},
4444
diagnostics: { enable: true },
4545
rename: { enable: true },
46-
format: { enable: true },
46+
format: {
47+
enable: true,
48+
config: {
49+
svelteSortOrder: 'options-scripts-markup-styles',
50+
svelteStrictMode: false,
51+
svelteAllowShorthand: true,
52+
svelteBracketNewLine: true,
53+
svelteIndentScriptAndStyle: true,
54+
printWidth: 80,
55+
singleQuote: false
56+
}
57+
},
4758
completions: { enable: true },
4859
hover: { enable: true },
4960
codeActions: { enable: true },
@@ -153,6 +164,15 @@ export interface LSSvelteConfig {
153164
};
154165
format: {
155166
enable: boolean;
167+
config: {
168+
svelteSortOrder: string;
169+
svelteStrictMode: boolean;
170+
svelteAllowShorthand: boolean;
171+
svelteBracketNewLine: boolean;
172+
svelteIndentScriptAndStyle: boolean;
173+
printWidth: number;
174+
singleQuote: boolean;
175+
};
156176
};
157177
rename: {
158178
enable: boolean;

‎packages/language-server/src/plugins/svelte/SveltePlugin.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { getHoverInfo } from './features/getHoverInfo';
2929
import { SvelteCompileResult, SvelteDocument } from './SvelteDocument';
3030
import { Logger } from '../../logger';
3131
import { getSelectionRange } from './features/getSelectionRanges';
32+
import { merge } from 'lodash';
3233

3334
export class SveltePlugin
3435
implements
@@ -73,12 +74,17 @@ export class SveltePlugin
7374
// Try resolving the config through prettier and fall back to possible editor config
7475
const config =
7576
returnObjectIfHasKeys(await prettier.resolveConfig(filePath, { editorconfig: true })) ||
76-
returnObjectIfHasKeys(this.configManager.getPrettierConfig()) ||
77-
// Be defensive here because IDEs other than VSCode might not have these settings
78-
(options && {
79-
tabWidth: options.tabSize,
80-
useTabs: !options.insertSpaces
81-
});
77+
merge(
78+
{}, // merge into empty obj to not manipulate own config
79+
this.configManager.get('svelte.format.config'),
80+
returnObjectIfHasKeys(this.configManager.getPrettierConfig()) ||
81+
// Be defensive here because IDEs other than VSCode might not have these settings
82+
(options && {
83+
tabWidth: options.tabSize,
84+
useTabs: !options.insertSpaces
85+
}) ||
86+
{}
87+
);
8288
// Take .prettierignore into account
8389
const fileInfo = await prettier.getFileInfo(filePath, {
8490
ignorePath: this.configManager.getPrettierConfig()?.ignorePath ?? '.prettierignore',

‎packages/language-server/test/plugins/svelte/SveltePlugin.test.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,12 +101,23 @@ describe('Svelte Plugin', () => {
101101
});
102102
});
103103

104+
const defaultSettings = {
105+
svelteSortOrder: 'options-scripts-markup-styles',
106+
svelteStrictMode: false,
107+
svelteAllowShorthand: true,
108+
svelteBracketNewLine: true,
109+
svelteIndentScriptAndStyle: true,
110+
printWidth: 80,
111+
singleQuote: false
112+
};
113+
104114
it('should use prettier fallback config for formatting', async () => {
105115
const formatStub = await testFormat(undefined, { fallbackConfig: true });
106116
sinon.assert.calledOnceWithExactly(formatStub, 'unformatted', {
107117
fallbackConfig: true,
108118
plugins: [],
109-
parser: 'svelte'
119+
parser: 'svelte',
120+
...defaultSettings
110121
});
111122
});
112123

@@ -116,7 +127,8 @@ describe('Svelte Plugin', () => {
116127
tabWidth: 4,
117128
useTabs: false,
118129
plugins: [],
119-
parser: 'svelte'
130+
parser: 'svelte',
131+
...defaultSettings
120132
});
121133
});
122134

@@ -126,7 +138,8 @@ describe('Svelte Plugin', () => {
126138
tabWidth: 4,
127139
useTabs: false,
128140
plugins: [],
129-
parser: 'svelte'
141+
parser: 'svelte',
142+
...defaultSettings
130143
});
131144
});
132145
});

‎packages/svelte-vscode/README.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,35 @@ Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-u
204204

205205
##### `svelte.plugin.svelte.format.enable`
206206

207-
Enable formatting for Svelte (includes css & js). _Default_: `true`
207+
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`
208+
209+
##### `svelte.plugin.svelte.format.config.svelteSortOrder`
210+
211+
Format: join the keys `options`, `scripts`, `markup`, `styles` with a `-` in the order you want. _Default_: `options-scripts-markup-styles`
212+
213+
##### `svelte.plugin.svelte.format.config.svelteStrictMode`
214+
215+
More strict HTML syntax. _Default_: `false`
216+
217+
##### `svelte.plugin.svelte.format.config.svelteAllowShorthand`
218+
219+
Option to enable/disable component attribute shorthand if attribute name and expression are the same. _Default_: `true`
220+
221+
##### `svelte.plugin.svelte.format.config.svelteBracketNewLine`
222+
223+
Put the `>` of a multiline element on a new line. _Default_: `true`
224+
225+
##### `svelte.plugin.svelte.format.config.svelteIndentScriptAndStyle`
226+
227+
Whether or not to indent code inside `<script>` and `<style>` tags. _Default_: `true`
228+
229+
##### `svelte.plugin.svelte.format.config.printWidth`
230+
231+
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`
232+
233+
##### `svelte.plugin.svelte.format.config.singleQuote`
234+
235+
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`
208236

209237
##### `svelte.plugin.svelte.hover.enable`
210238

‎packages/svelte-vscode/package.json‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,49 @@
261261
"type": "boolean",
262262
"default": true,
263263
"title": "Svelte: Format",
264-
"description": "Enable formatting for Svelte (includes css & js)"
264+
"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."
265+
},
266+
"svelte.plugin.svelte.format.config.svelteSortOrder": {
267+
"type": "string",
268+
"default": "options-scripts-markup-styles",
269+
"title": "Svelte Format: Sort Order",
270+
"description": "Format: join the keys `options`, `scripts`, `markup`, `styles` with a - in the order you want"
271+
},
272+
"svelte.plugin.svelte.format.config.svelteStrictMode": {
273+
"type": "boolean",
274+
"default": false,
275+
"title": "Svelte Format: Strict Mode",
276+
"description": "More strict HTML syntax"
277+
},
278+
"svelte.plugin.svelte.format.config.svelteAllowShorthand": {
279+
"type": "boolean",
280+
"default": true,
281+
"title": "Svelte Format: Allow Shorthand",
282+
"description": "Option to enable/disable component attribute shorthand if attribute name and expression are the same"
283+
},
284+
"svelte.plugin.svelte.format.config.svelteBracketNewLine": {
285+
"type": "boolean",
286+
"default": true,
287+
"title": "Svelte Format: Bracket New Line",
288+
"description": "Put the `>` of a multiline element on a new line"
289+
},
290+
"svelte.plugin.svelte.format.config.svelteIndentScriptAndStyle": {
291+
"type": "boolean",
292+
"default": true,
293+
"title": "Svelte Format: Indent Script And Style",
294+
"description": "Whether or not to indent code inside `<script>` and `<style>` tags"
295+
},
296+
"svelte.plugin.svelte.format.config.printWidth": {
297+
"type": "number",
298+
"default": 80,
299+
"title": "Svelte Format: Print Width",
300+
"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."
301+
},
302+
"svelte.plugin.svelte.format.config.singleQuote": {
303+
"type": "boolean",
304+
"default": false,
305+
"title": "Svelte Format: Quotes",
306+
"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."
265307
},
266308
"svelte.plugin.svelte.completions.enable": {
267309
"type": "boolean",

‎packages/svelte-vscode/src/extension.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export function activate(context: ExtensionContext) {
8686
documentSelector: [{ scheme: 'file', language: 'svelte' }],
8787
revealOutputChannelOn: RevealOutputChannelOn.Never,
8888
synchronize: {
89-
configurationSection: ['svelte', 'javascript', 'typescript'],
89+
configurationSection: ['svelte', 'javascript', 'typescript', 'prettier'],
9090
fileEvents: workspace.createFileSystemWatcher('{**/*.js,**/*.ts}', false, false, false)
9191
},
9292
initializationOptions: {

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2120,10 +2120,10 @@ prelude-ls@^1.2.1:
21202120
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
21212121
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
21222122

2123-
prettier-plugin-svelte@~1.4.1:
2124-
version "1.4.1"
2125-
resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
2126-
integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
2123+
prettier-plugin-svelte@~2.1.0:
2124+
version "2.1.0"
2125+
resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.0.tgz#61b930107cf4eb8bdae0e9d416e47fb36ee6b53c"
2126+
integrity sha512-AeGJWicKCU9CbPKj9Wzk7apdCJwB8gzFHOMMqJh1X4LiwkMLHUjjysowH+SZfHdg69Hjv5rw5M7uJn0WobFhRQ==
21272127

21282128
[email protected]:
21292129
version "2.2.1"

0 commit comments

Comments
 (0)