style: format code

Author: sxzz

.prettierignore

@@ -0,0 +1,3 @@
+dist
+CHANGELOG.md
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -64,7 +64,7 @@ const store = new ReplStore({
   // specify the default URL to import Vue runtime from in the sandbox
   // default is the CDN link from jsdelivr.com with version matching Vue's version
   // from peerDependency
-  defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js'
+  defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js',
 })
 
 // persist state to URL hash
@@ -73,8 +73,8 @@ watchEffect(() => history.replaceState({}, '', store.serialize()))
 // pre-set import map
 store.setImportMap({
   imports: {
-    myLib: 'cdn link to esm build of myLib'
-  }
+    myLib: 'cdn link to esm build of myLib',
+  },
 })
 
 // use a specific version of Vue

index-dist.html

@@ -20,7 +20,7 @@
       import Monaco from './dist/monaco-editor'
       import './dist/style.css'
       createApp(Repl, {
-        editor: Monaco
+        editor: Monaco,
       }).mount('#app')
     </script>
   </head>

package.json

@@ -32,6 +32,7 @@
     "dev": "vite",
     "build": "vite build",
     "build-types": "vue-tsc -p tsconfig.build.json && api-extractor run -c api-extractor.json && node scripts/cleanup.js",
+    "format": "prettier --write .",
     "release": "bumpp -r",
     "prepublishOnly": "npm run build && npm run build-types"
   },

src/codemirror/CodeMirror.vue

@@ -17,7 +17,7 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   mode: 'htmlmixed',
   value: '',
-  readonly: false
+  readonly: false,
 })
 
 const emit = defineEmits<(e: 'change', value: string) => void>()
@@ -26,13 +26,15 @@ const el = ref()
 const needAutoResize = inject('autoresize')
 
 onMounted(() => {
-  const addonOptions = props.readonly ? {} : {
-    autoCloseBrackets: true,
-    autoCloseTags: true,
-    foldGutter: true,
-    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-    keyMap: 'sublime'
-  }
+  const addonOptions = props.readonly
+    ? {}
+    : {
+        autoCloseBrackets: true,
+        autoCloseTags: true,
+        foldGutter: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        keyMap: 'sublime',
+      }
 
   const editor = CodeMirror(el.value!, {
     value: '',
@@ -41,7 +43,7 @@ onMounted(() => {
     tabSize: 2,
     lineWrapping: true,
     lineNumbers: true,
-    ...addonOptions
+    ...addonOptions,
   })
 
   editor.on('change', () => {

src/codemirror/codemirror.css

@@ -539,6 +539,6 @@ span.CodeMirror-selectedtext {
   background: none;
 }
 
-.CodeMirror-dialog{
+.CodeMirror-dialog {
   background-color: var(--bg);
 }

src/editor/CodeMirrorEditor.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import type { PreviewMode } from './types'
 
 defineOptions({
-  editorType: 'monaco'
+  editorType: 'monaco',
 })
 
 const props = defineProps<{
@@ -26,17 +26,17 @@ const modes: Record<string, Props['mode']> = {
   css: 'css',
   html: 'htmlmixed',
   js: {
-    name: 'javascript'
+    name: 'javascript',
   },
   json: {
     name: 'javascript',
-    json: true
+    json: true,
   },
   ts: {
     name: 'javascript',
-    typescript: true
+    typescript: true,
   },
-  vue: 'htmlmixed'
+  vue: 'htmlmixed',
 }
 
 const activeMode = computed(() => {

src/editor/FileSelector.vue

@@ -60,7 +60,7 @@ function doneNameFile() {
 
   if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
     store.state.errors = [
-      `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`
+      `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
     ]
     return
   }
@@ -101,7 +101,7 @@ function horizontalScroll(e: WheelEvent) {
     Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
   const distance = 30 * (direction > 0 ? 1 : -1)
   el.scrollTo({
-    left: el.scrollLeft + distance
+    left: el.scrollLeft + distance,
   })
 }
 </script>

src/monaco/Monaco.vue

@@ -14,7 +14,7 @@ import {
   watchEffect,
   inject,
   watch,
-  computed
+  computed,
 } from 'vue'
 import * as monaco from 'monaco-editor-core'
 import { getOrCreateModel } from './utils'
@@ -30,7 +30,7 @@ const props = withDefaults(
     mode?: PreviewMode
   }>(),
   {
-    readonly: false
+    readonly: false,
   }
 )
 
@@ -96,13 +96,13 @@ onMounted(async () => {
     automaticLayout: true,
     scrollBeyondLastLine: false,
     minimap: {
-      enabled: false
+      enabled: false,
     },
     inlineSuggest: {
-      enabled: false
+      enabled: false,
     },
     'semanticHighlighting.enabled': true,
-    fixedOverflowWidgets: true
+    fixedOverflowWidgets: true,
   })
   editor.value = editorInstance
 
@@ -119,7 +119,7 @@ onMounted(async () => {
       }
 
       return false
-    }
+    },
   })
 
   // Support for semantic highlighting
@@ -147,7 +147,7 @@ onMounted(async () => {
   if (props.readonly) {
     watch(
       () => props.value,
-      value => {
+      (value) => {
         editorInstance.setValue(value || '')
         monaco.editor.setModelLanguage(editorInstance.getModel()!, lang.value)
       }
@@ -185,7 +185,7 @@ onMounted(async () => {
     emits('change', editorInstance.getValue())
   })
 
-  editorInstance.onDidChangeCursorSelection(e => {
+  editorInstance.onDidChangeCursorSelection((e) => {
     const selection = e.selection
     const file = store.state.files[props.filename]
     if (file) {