Document language-overridable scope for Prettier settings in README (#3862)

Copilot · ntotten · web-flow · commit 09f61c5a16a3 · 2025-12-01T17:51:57.000-05:00
* Initial plan

* Add language-specific formatting documentation to README

Co-authored-by: ntotten &lt;282782+ntotten@users.noreply.github.com&gt;

* formatting

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: Nathan Totten &lt;nate@zuplo.com&gt;
Co-authored-by: ntotten &lt;282782+ntotten@users.noreply.github.com&gt;
diff --git a/.prettierignore b/.prettierignore
@@ -3,4 +3,6 @@ out/
 dist/
 test-fixtures/
 node_modules/
-package-lock.json
+package-lock.json
+.vscode-test/
+.vscode-test-web/
diff --git a/README.md b/README.md
@@ -249,6 +249,31 @@ prettier.objectWrap
 prettier.experimentalOperatorPosition
 ```
 
+#### Language-Specific Formatting
+
+All Prettier options above support language-specific overrides. This allows you to set different formatting rules for different file types directly in your VS Code settings, which are easily synchronized across machines and environments.
+
+To configure language-specific settings, use the `[language]` syntax in your VS Code `settings.json`:
+
+```json
+{
+  "[html]": {
+    "prettier.printWidth": 180
+  },
+  "[typescript]": {
+    "prettier.printWidth": 120,
+    "prettier.tabWidth": 4,
+    "prettier.semi": false
+  },
+  "[json]": {
+    "prettier.printWidth": 80,
+    "prettier.tabWidth": 2
+  }
+}
+```
+
+This feature is particularly useful when working in multi-language projects or when different languages have different formatting conventions. Language-specific settings will override the global Prettier settings when formatting files of that language type.
+
 ### Extension Settings
 
 These settings are specific to VS Code and need to be set in the VS Code settings file. See the [documentation](https://code.visualstudio.com/docs/getstarted/settings) for how to do that.
diff --git a/package-lock.json b/package-lock.json
diff --git a/scripts/update-browser-languages.mjs b/scripts/update-browser-languages.mjs
@@ -135,7 +135,9 @@ async function main() {
     console.log("\nLanguages included:");
     languages.forEach((lang) => {
       console.log(
-        `  - ${lang.name}: ${lang.vscodeLanguageIds.join(", ")} [${lang.parsers.join(", ")}]`,
+        `  - ${lang.name}: ${lang.vscodeLanguageIds.join(
+          ", ",
+        )} [${lang.parsers.join(", ")}]`,
       );
     });
   } else {
diff --git a/src/ModuleResolverWeb.ts b/src/ModuleResolverWeb.ts
@@ -89,13 +89,13 @@ export class ModuleResolver implements ModuleResolverInterface {
             {
               name: "CSS",
               vscodeLanguageIds: ["css"],
-              extensions: [".css",".wxss"],
+              extensions: [".css", ".wxss"],
               parsers: ["css"],
             },
             {
               name: "PostCSS",
               vscodeLanguageIds: ["postcss"],
-              extensions: [".pcss",".postcss"],
+              extensions: [".pcss", ".postcss"],
               parsers: ["css"],
             },
             {
@@ -113,13 +113,13 @@ export class ModuleResolver implements ModuleResolverInterface {
             {
               name: "GraphQL",
               vscodeLanguageIds: ["graphql"],
-              extensions: [".graphql",".gql",".graphqls"],
+              extensions: [".graphql", ".gql", ".graphqls"],
               parsers: ["graphql"],
             },
             {
               name: "Handlebars",
               vscodeLanguageIds: ["handlebars"],
-              extensions: [".handlebars",".hbs"],
+              extensions: [".handlebars", ".hbs"],
               parsers: ["glimmer"],
             },
             {
@@ -131,7 +131,15 @@ export class ModuleResolver implements ModuleResolverInterface {
             {
               name: "HTML",
               vscodeLanguageIds: ["html"],
-              extensions: [".html",".hta",".htm",".html.hl",".inc",".xht",".xhtml"],
+              extensions: [
+                ".html",
+                ".hta",
+                ".htm",
+                ".html.hl",
+                ".inc",
+                ".xht",
+                ".xhtml",
+              ],
               parsers: ["html"],
             },
             {
@@ -154,33 +162,82 @@ export class ModuleResolver implements ModuleResolverInterface {
             },
             {
               name: "JavaScript",
-              vscodeLanguageIds: ["javascript","javascriptreact","mongo","mongodb"],
-              extensions: [".js","._js",".bones",".cjs",".es",".es6",".gs",".jake",".javascript",".jsb",".jscad",".jsfl",".jslib",".jsm",".jspre",".jss",".mjs",".njs",".pac",".sjs",".ssjs",".xsjs",".xsjslib",".start.frag",".end.frag",".wxs"],
-              parsers: ["babel","acorn","espree","meriyah","babel-flow","babel-ts","flow","typescript"],
+              vscodeLanguageIds: [
+                "javascript",
+                "javascriptreact",
+                "mongo",
+                "mongodb",
+              ],
+              extensions: [
+                ".js",
+                "._js",
+                ".bones",
+                ".cjs",
+                ".es",
+                ".es6",
+                ".gs",
+                ".jake",
+                ".javascript",
+                ".jsb",
+                ".jscad",
+                ".jsfl",
+                ".jslib",
+                ".jsm",
+                ".jspre",
+                ".jss",
+                ".mjs",
+                ".njs",
+                ".pac",
+                ".sjs",
+                ".ssjs",
+                ".xsjs",
+                ".xsjslib",
+                ".start.frag",
+                ".end.frag",
+                ".wxs",
+              ],
+              parsers: [
+                "babel",
+                "acorn",
+                "espree",
+                "meriyah",
+                "babel-flow",
+                "babel-ts",
+                "flow",
+                "typescript",
+              ],
             },
             {
               name: "Flow",
               vscodeLanguageIds: ["javascript"],
               extensions: [".js.flow"],
-              parsers: ["flow","babel-flow"],
+              parsers: ["flow", "babel-flow"],
             },
             {
               name: "JSX",
               vscodeLanguageIds: ["javascriptreact"],
               extensions: [".jsx"],
-              parsers: ["babel","babel-flow","babel-ts","flow","typescript","espree","meriyah"],
+              parsers: [
+                "babel",
+                "babel-flow",
+                "babel-ts",
+                "flow",
+                "typescript",
+                "espree",
+                "meriyah",
+              ],
             },
             {
               name: "TypeScript",
               vscodeLanguageIds: ["typescript"],
-              extensions: [".ts",".cts",".mts"],
-              parsers: ["typescript","babel-ts"],
+              extensions: [".ts", ".cts", ".mts"],
+              parsers: ["typescript", "babel-ts"],
             },
             {
               name: "TSX",
               vscodeLanguageIds: ["typescriptreact"],
               extensions: [".tsx"],
-              parsers: ["typescript","babel-ts"],
+              parsers: ["typescript", "babel-ts"],
             },
             {
               name: "JSON.stringify",
@@ -191,13 +248,52 @@ export class ModuleResolver implements ModuleResolverInterface {
             {
               name: "JSON",
               vscodeLanguageIds: ["json"],
-              extensions: [".json",".4DForm",".4DProject",".avsc",".geojson",".gltf",".har",".ice",".JSON-tmLanguage",".json.example",".mcmeta",".sarif",".tact",".tfstate",".tfstate.backup",".topojson",".webapp",".webmanifest",".yy",".yyp"],
+              extensions: [
+                ".json",
+                ".4DForm",
+                ".4DProject",
+                ".avsc",
+                ".geojson",
+                ".gltf",
+                ".har",
+                ".ice",
+                ".JSON-tmLanguage",
+                ".json.example",
+                ".mcmeta",
+                ".sarif",
+                ".tact",
+                ".tfstate",
+                ".tfstate.backup",
+                ".topojson",
+                ".webapp",
+                ".webmanifest",
+                ".yy",
+                ".yyp",
+              ],
               parsers: ["json"],
             },
             {
               name: "JSON with Comments",
               vscodeLanguageIds: ["jsonc"],
-              extensions: [".jsonc",".code-snippets",".code-workspace",".sublime-build",".sublime-color-scheme",".sublime-commands",".sublime-completions",".sublime-keymap",".sublime-macro",".sublime-menu",".sublime-mousemap",".sublime-project",".sublime-settings",".sublime-theme",".sublime-workspace",".sublime_metrics",".sublime_session"],
+              extensions: [
+                ".jsonc",
+                ".code-snippets",
+                ".code-workspace",
+                ".sublime-build",
+                ".sublime-color-scheme",
+                ".sublime-commands",
+                ".sublime-completions",
+                ".sublime-keymap",
+                ".sublime-macro",
+                ".sublime-menu",
+                ".sublime-mousemap",
+                ".sublime-project",
+                ".sublime-settings",
+                ".sublime-theme",
+                ".sublime-workspace",
+                ".sublime_metrics",
+                ".sublime_session",
+              ],
               parsers: ["jsonc"],
             },
             {
@@ -209,7 +305,19 @@ export class ModuleResolver implements ModuleResolverInterface {
             {
               name: "Markdown",
               vscodeLanguageIds: ["markdown"],
-              extensions: [".md",".livemd",".markdown",".mdown",".mdwn",".mkd",".mkdn",".mkdown",".ronn",".scd",".workbook"],
+              extensions: [
+                ".md",
+                ".livemd",
+                ".markdown",
+                ".mdown",
+                ".mdwn",
+                ".mkd",
+                ".mkdn",
+                ".mkdown",
+                ".ronn",
+                ".scd",
+                ".workbook",
+              ],
               parsers: ["markdown"],
             },
             {
@@ -220,11 +328,21 @@ export class ModuleResolver implements ModuleResolverInterface {
             },
             {
               name: "YAML",
-              vscodeLanguageIds: ["yaml","ansible","home-assistant"],
-              extensions: [".yml",".mir",".reek",".rviz",".sublime-syntax",".syntax",".yaml",".yaml-tmlanguage",".yaml.sed",".yml.mysql"],
+              vscodeLanguageIds: ["yaml", "ansible", "home-assistant"],
+              extensions: [
+                ".yml",
+                ".mir",
+                ".reek",
+                ".rviz",
+                ".sublime-syntax",
+                ".syntax",
+                ".yaml",
+                ".yaml-tmlanguage",
+                ".yaml.sed",
+                ".yml.mysql",
+              ],
               parsers: ["yaml"],
-            }
-          
+            },
           ],
         };
       },
@@ -266,4 +384,3 @@ export class ModuleResolver implements ModuleResolverInterface {
     // nothing to do
   }
 }
-
diff --git a/src/PrettierDynamicInstance.ts b/src/PrettierDynamicInstance.ts
@@ -24,7 +24,10 @@ export const PrettierDynamicInstance: PrettierInstanceConstructor = class Pretti
   public async import(): Promise</* version of imported prettier */ string> {
     // Resolve to actual entry file since ESM doesn't support directory imports
     // modulePath is like /path/to/node_modules/prettier, resolve "prettier" from there
-    const entryPath = resolveModuleEntry(this.modulePath, path.basename(this.modulePath));
+    const entryPath = resolveModuleEntry(
+      this.modulePath,
+      path.basename(this.modulePath),
+    );
     const moduleUrl = pathToFileURL(entryPath).href;
     const imported = await import(moduleUrl);
     // Handle both ESM (Prettier v3+) and CJS (Prettier v2) modules
diff --git a/src/PrettierEditService.ts b/src/PrettierEditService.ts
@@ -70,23 +70,25 @@ async function resolvePluginPaths(
 
     // Absolute paths
     if (path.isAbsolute(plugin)) {
-      resolvedPlugins.push(
-        useFileUrls ? pathToFileURL(plugin).href : plugin,
-      );
+      resolvedPlugins.push(useFileUrls ? pathToFileURL(plugin).href : plugin);
       continue;
     }
 
     // Relative paths (./foo or ../foo) → resolve relative to file
     if (plugin.startsWith(".")) {
       const resolved = path.resolve(dir, plugin);
-      resolvedPlugins.push(useFileUrls ? pathToFileURL(resolved).href : resolved);
+      resolvedPlugins.push(
+        useFileUrls ? pathToFileURL(resolved).href : resolved,
+      );
       continue;
     }
 
     // Package names → resolve from file's directory using createRequire
     try {
       const resolved = resolveModuleEntry(dir, plugin);
-      resolvedPlugins.push(useFileUrls ? pathToFileURL(resolved).href : resolved);
+      resolvedPlugins.push(
+        useFileUrls ? pathToFileURL(resolved).href : resolved,
+      );
     } catch {
       // If resolution fails, pass through and let Prettier handle/report the error
       resolvedPlugins.push(plugin);
diff --git a/src/test/suite/ModuleResolverNode.test.ts b/src/test/suite/ModuleResolverNode.test.ts
@@ -3,7 +3,10 @@ import * as path from "path";
 import * as prettier from "prettier";
 
 import { getWorkspaceFolderUri } from "./formatTestUtils.js";
-import { ModuleResolver, PrettierNodeModule } from "../../ModuleResolverNode.js";
+import {
+  ModuleResolver,
+  PrettierNodeModule,
+} from "../../ModuleResolverNode.js";
 import { LoggingService } from "../../LoggingService.js";
 import {
   OUTDATED_PRETTIER_VERSION_MESSAGE,
