fix: set prettier parser from file extension

Author: KaelWD

src/codemirror/CodeMirror.vue

@@ -15,6 +15,7 @@ export interface Props {
   mode?: string
   value?: string
   readonly?: boolean
+  extension?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -68,7 +69,7 @@ onMounted(() => {
       : props.mode === 'htmlmixed' ? 'html'
       : props.mode === 'javascript' ? 'babel'
       : props.mode === 'css' ? 'postcss'
-      : props.mode
+      : props.extension || props.mode
     emit('change', prettier.format(
       editor.getValue(),
       {

src/editor/Editor.vue

@@ -19,6 +19,11 @@ const activeMode = computed(() => {
     : filename.endsWith('.css') ? 'css'
     : 'javascript'
 })
+
+const extension = computed(() => {
+  const { filename } = store.state.activeFile
+  return filename.split('.').pop()
+})
 </script>
 
 <template>
@@ -28,6 +33,7 @@ const activeMode = computed(() => {
       @change="onChange"
       :value="store.state.activeFile.code"
       :mode="activeMode"
+      :extension="extension"
     />
     <Message :err="store.state.errors[0]" />
   </div>