(feat) option disable emmet for html/css (#710)

#708, #677

Author: dummdidumm

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

@@ -24,7 +24,7 @@ const defaultLSConfig: LSConfig = {
         globals: '',
         diagnostics: { enable: true },
         hover: { enable: true },
-        completions: { enable: true },
+        completions: { enable: true, emmet: true },
         documentColors: { enable: true },
         colorPresentations: { enable: true },
         documentSymbols: { enable: true },
@@ -33,7 +33,7 @@ const defaultLSConfig: LSConfig = {
     html: {
         enable: true,
         hover: { enable: true },
-        completions: { enable: true },
+        completions: { enable: true, emmet: true },
         tagComplete: { enable: true },
         documentSymbols: { enable: true }
     },
@@ -106,6 +106,7 @@ export interface LSCSSConfig {
     };
     completions: {
         enable: boolean;
+        emmet: boolean;
     };
     documentColors: {
         enable: boolean;
@@ -128,6 +129,7 @@ export interface LSHTMLConfig {
     };
     completions: {
         enable: boolean;
+        emmet: boolean;
     };
     tagComplete: {
         enable: boolean;

packages/language-server/src/plugins/css/CSSPlugin.ts

@@ -165,15 +165,17 @@ export class CSSPlugin
             isIncomplete: true,
             items: []
         };
-        lang.setCompletionParticipants([
-            getEmmetCompletionParticipants(
-                cssDocument,
-                cssDocument.getGeneratedPosition(position),
-                getLanguage(type),
-                this.configManager.getEmmetConfig(),
-                emmetResults
-            )
-        ]);
+        if (this.configManager.getConfig().css.completions.emmet) {
+            lang.setCompletionParticipants([
+                getEmmetCompletionParticipants(
+                    cssDocument,
+                    cssDocument.getGeneratedPosition(position),
+                    getLanguage(type),
+                    this.configManager.getEmmetConfig(),
+                    emmetResults
+                )
+            ]);
+        }
         const results = lang.doComplete(
             cssDocument,
             cssDocument.getGeneratedPosition(position),

packages/language-server/src/plugins/html/HTMLPlugin.ts

@@ -75,15 +75,17 @@ export class HTMLPlugin implements HoverProvider, CompletionsProvider {
             isIncomplete: true,
             items: []
         };
-        this.lang.setCompletionParticipants([
-            getEmmetCompletionParticipants(
-                document,
-                position,
-                'html',
-                this.configManager.getEmmetConfig(),
-                emmetResults
-            )
-        ]);
+        if (this.configManager.getConfig().html.completions.emmet) {
+            this.lang.setCompletionParticipants([
+                getEmmetCompletionParticipants(
+                    document,
+                    position,
+                    'html',
+                    this.configManager.getEmmetConfig(),
+                    emmetResults
+                )
+            ]);
+        }
         const results = this.isInComponentTag(html, document, position)
             ? // Only allow emmet inside component element tags.
               // Other attributes/events would be false positives.

packages/svelte-vscode/README.md

@@ -80,35 +80,35 @@ If you experience crashes due to "port already in use", try setting the port.
 
 Enable the TypeScript plugin. _Default_: `true`
 
-##### `svelte.plugin.typescript.diagnostics`
+##### `svelte.plugin.typescript.diagnostics.enable`
 
 Enable diagnostic messages for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.hover`
+##### `svelte.plugin.typescript.hover.enable`
 
 Enable hover info for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.documentSymbols`
+##### `svelte.plugin.typescript.documentSymbols.enable`
 
 Enable document symbols for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.completions`
+##### `svelte.plugin.typescript.completions.enable`
 
 Enable completions for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.findReferences`
+##### `svelte.plugin.typescript.findReferences.enable`
 
 Enable find-references for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.definitions`
+##### `svelte.plugin.typescript.definitions.enable`
 
 Enable go to definition for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.codeActions`
+##### `svelte.plugin.typescript.codeActions.enable`
 
 Enable code actions for TypeScript. _Default_: `true`
 
-##### `svelte.plugin.typescript.selectionRange`
+##### `svelte.plugin.typescript.selectionRange.enable`
 
 Enable selection range for TypeScript. _Default_: `true`
 
@@ -128,51 +128,61 @@ Enable the CSS plugin. _Default_: `true`
 
 Which css files should be checked for global variables (`--global-var: value;`). These variables are added to the css completions. String of comma-separated file paths or globs relative to workspace root.
 
-##### `svelte.plugin.css.diagnostics`
+##### `svelte.plugin.css.diagnostics.enable`
 
 Enable diagnostic messages for CSS. _Default_: `true`
 
-##### `svelte.plugin.css.hover`
+##### `svelte.plugin.css.hover.enable`
 
 Enable hover info for CSS. _Default_: `true`
 
-##### `svelte.plugin.css.completions`
+##### `svelte.plugin.css.completions.enable`
 
 Enable auto completions for CSS. _Default_: `true`
 
-##### `svelte.plugin.css.documentColors`
+##### `svelte.plugin.css.completions.emmet`
+
+Enable emmet auto completions for CSS. _Default_: `true`
+If you want to disable emmet completely everywhere (not just Svelte), you can also set `"emmet.showExpandedAbbreviation": "never"` in your settings.
+
+##### `svelte.plugin.css.documentColors.enable`
 
 Enable document colors for CSS. _Default_: `true`
 
-##### `svelte.plugin.css.colorPresentations`
+##### `svelte.plugin.css.colorPresentations.enable`
 
 Enable color picker for CSS. _Default_: `true`
 
-##### `svelte.plugin.css.documentSymbols`
+##### `svelte.plugin.css.documentSymbols.enable`
 
 Enable document symbols for CSS. _Default_: `true`
 
-##### `svelte.plugin.css.selectionRange`
+##### `svelte.plugin.css.selectionRange.enable`
 
 Enable selection range for CSS. _Default_: `true`
 
 ##### `svelte.plugin.html.enable`
 
 Enable the HTML plugin. _Default_: `true`
 
-##### `svelte.plugin.html.hover`
+##### `svelte.plugin.html.hover.enable`
 
 Enable hover info for HTML. _Default_: `true`
 
-##### `svelte.plugin.html.completions`
+##### `svelte.plugin.html.completions.enable`
 
 Enable auto completions for HTML. _Default_: `true`
 
-##### `svelte.plugin.html.tagComplete`
+##### `svelte.plugin.html.completions.emmet`
+
+Enable emmet auto completions for HTML. _Default_: `true`
+If you want to disable emmet completely everywhere (not just Svelte), you can also set `"emmet.showExpandedAbbreviation": "never"` in your settings.
+
+##### `svelte.plugin.html.tagComplete.enable`
 
 Enable HTML tag auto closing. _Default_: `true`
 
-##### `svelte.plugin.html.documentSymbols`
+##### `svelte.plugin.html.documentSymbols.enable`
 
 Enable document symbols for HTML. _Default_: `true`
 
@@ -214,7 +224,7 @@ Enable selection range for Svelte. _Default_: `true`
 
 ### Usage with Yarn 2 PnP
 
-1. Run `yarn add -D svelte-language-server` to install svelte-language-server as a dev dependency 
+1. Run `yarn add -D svelte-language-server` to install svelte-language-server as a dev dependency
 2. Run `yarn dlx @yarnpkg/pnpify --sdk vscode` to generate or update the VSCode/Yarn integration SDKs. This also sets the `svelte.language-server.ls-path` setting for the workspace, pointing it to the workspace-installed language server.
 3. Restart VSCode.
 4. Commit the changes to `.yarn/sdks`

packages/svelte-vscode/package.json

@@ -160,6 +160,12 @@
                     "title": "CSS: Auto Complete",
                     "description": "Enable auto completions for CSS"
                 },
+                "svelte.plugin.css.completions.emmet": {
+                    "type": "boolean",
+                    "default": true,
+                    "title": "CSS: Include Emmet Completions",
+                    "description": "Enable emmet auto completions for CSS"
+                },
                 "svelte.plugin.css.documentColors.enable": {
                     "type": "boolean",
                     "default": true,
@@ -202,6 +208,12 @@
                     "title": "HTML: Auto Complete",
                     "description": "Enable auto completions for HTML"
                 },
+                "svelte.plugin.html.completions.emmet": {
+                    "type": "boolean",
+                    "default": true,
+                    "title": "HTML: Include Emmet Completions",
+                    "description": "Enable emmet auto completions for HTML"
+                },
                 "svelte.plugin.html.tagComplete.enable": {
                     "type": "boolean",
                     "default": true,