feat: respect browser language

close #123

Author: johnsoncodehk

src/monaco/env.ts

@@ -7,7 +7,6 @@ import onigasmWasm from 'onigasm/lib/onigasm.wasm?url'
 import { editor, languages, Uri } from 'monaco-editor-core'
 import * as volar from '@volar/monaco'
 import { Store } from '../store'
-import { createJsDelivrDtsHost } from 'volar-service-typescript'
 import { getOrCreateModel } from './utils'
 import type { CreateData } from './vue.worker'
 
@@ -76,15 +75,30 @@ export class WorkerHost {
   }
 }
 
+async function fetchJson<T>(url: string) {
+  try {
+    const res = await fetch(url);
+    if (res.status === 200) {
+      return await res.json();
+    }
+  } catch {
+    // ignore
+  }
+}
+
 let disposeVue: undefined | (() => void)
 export async function reloadVue(store: Store) {
   disposeVue?.()
 
+  const locale = navigator.language.toLowerCase()
+  const tsLocalized = await fetchJson(`https://cdn.jsdelivr.net/npm/typescript/lib/${locale}/diagnosticMessages.generated.json`)
   const worker = editor.createWebWorker<any>({
     moduleId: 'vs/language/vue/vueWorker',
     label: 'vue',
     host: new WorkerHost(),
     createData: {
+      locale: locale,
+      tsLocalized: tsLocalized,
       tsconfig: store.getTsConfig?.() || {},
       dependencies: !store.vueVersion
         ? {}

src/monaco/vue.worker.ts

@@ -8,6 +8,8 @@ import { createLanguageService, createLanguageHost, createServiceEnvironment } f
 import type { WorkerHost } from './env'
 
 export interface CreateData {
+  locale: string
+  tsLocalized: any
   tsconfig: {
     compilerOptions?: ts.CompilerOptions
     vueCompilerOptions?: Partial<VueCompilerOptions>
@@ -19,7 +21,7 @@ self.onmessage = () => {
   worker.initialize(
     (
       ctx: monaco.worker.IWorkerContext<WorkerHost>,
-      { tsconfig, dependencies }: CreateData
+      { tsconfig, dependencies, locale, tsLocalized }: CreateData
     ) => {
       const { options: compilerOptions } = ts.convertCompilerOptionsFromJson(
         tsconfig?.compilerOptions || {},
@@ -30,6 +32,13 @@ self.onmessage = () => {
       const jsDelivrFs = createJsDelivrFs(ctx.host.onFetchCdnFile)
       const jsDelivrUriResolver = createJsDelivrUriResolver('/node_modules', dependencies)
 
+      if (locale) {
+        env.locale = locale
+      }
+      if (tsLocalized) {
+        host.getLocalizedDiagnosticMessages = () => tsLocalized
+      }
+
       decorateServiceEnvironment(env, jsDelivrUriResolver, jsDelivrFs)
 
       return createLanguageService(