feat: add prettier for snippets formatting (#22)

Author: antonreshetov

package.json

@@ -64,6 +64,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/node": "^17.0.4",
+    "@types/prettier": "^2.6.0",
     "@types/sanitize-html": "^2.6.2",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.8.0",

src/main/menu/main.ts

@@ -200,6 +200,15 @@ const editorMenu: MenuItemConstructorOptions[] = [
       )
     }
   },
+  {
+    label: 'Format',
+    accelerator: 'Shift+CommandOrControl+F',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:format-snippet'
+      )
+    }
+  },
   {
     label: 'Preview Markdown',
     accelerator: 'Shift+CommandOrControl+M',

src/main/store/module/preferences.ts

@@ -19,7 +19,10 @@ export default new Store<PreferencesStore>({
       fontFamily: 'SF Mono, Consolas, Menlo',
       fontSize: 12,
       showInvisibles: false,
-      tabSize: 2
+      tabSize: 2,
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
     }
   }
 })

src/renderer/App.vue

@@ -24,7 +24,8 @@ import {
   onAddNewSnippet,
   onAddNewFragment,
   onAddNewFolder,
-  onCopySnippet
+  onCopySnippet,
+  emitter
 } from '@/composable'
 
 // По какой то причине необходимо явно установить роут в '/'
@@ -115,12 +116,20 @@ ipc.on('main-menu:preview-markdown', async () => {
 ipc.on('main-menu:copy-snippet', () => {
   onCopySnippet()
 })
+
+ipc.on('main-menu:format-snippet', () => {
+  emitter.emit('format-snippet', true)
+})
 </script>
 
 <style lang="scss">
 body {
   margin: 0;
 }
+#app {
+  height: 100vh;
+  overflow: hidden;
+}
 .app {
   &-title-bar {
     position: absolute;

src/renderer/components/editor/TheEditor.vue

@@ -37,6 +37,15 @@ import { languages } from './languages'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
 import { track } from '@/electron'
+import prettier from 'prettier/standalone'
+import parserTypescript from 'prettier/parser-typescript'
+import parserBabel from 'prettier/parser-babel'
+import parserHtml from 'prettier/parser-html'
+import parserGraphql from 'prettier/parser-graphql'
+import parserMarkdown from 'prettier/parser-markdown'
+import parserPostcss from 'prettier/parser-postcss'
+import parserYaml from 'prettier/parser-yaml'
+import { emitter } from '@/composable'
 
 interface Props {
   lang: Language
@@ -148,6 +157,54 @@ const setValue = () => {
   }
 }
 
+const format = () => {
+  const availableLang: Language[] = [
+    'javascript',
+    'typescript',
+    'json',
+    'json5',
+    'yaml',
+    'html',
+    'markdown',
+    'graphqlschema',
+    'css',
+    'sass',
+    'scss',
+    'less'
+  ]
+
+  if (!availableLang.includes(props.lang)) return
+
+  let parser = props.lang as string
+
+  if (props.lang === 'javascript') parser = 'babel'
+  if (props.lang === 'graphqlschema') parser = 'graphql'
+
+  try {
+    const formatted = prettier.format(props.modelValue, {
+      parser,
+      plugins: [
+        parserTypescript,
+        parserBabel,
+        parserHtml,
+        parserMarkdown,
+        parserPostcss,
+        parserGraphql,
+        parserYaml
+      ],
+      tabWidth: appStore.editor.tabSize,
+      trailingComma: appStore.editor.trailingComma,
+      semi: appStore.editor.semi,
+      singleQuote: appStore.editor.singleQuote
+    })
+
+    // Обновляем напрямую без debounce
+    snippetStore.patchCurrentSnippetContentByKey('value', formatted)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
 const setLang = () => {
   editor.session.setMode(`ace/mode/${localLang.value}`)
   track('snippets/set-language', localLang.value)
@@ -213,6 +270,8 @@ watch(
   }
 )
 
+emitter.on('format-snippet', () => format())
+
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })

src/renderer/components/preferences/EditorPreferences.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="editor-preferences">
     <AppForm>
+      <h4>Editor</h4>
       <AppFormItem label="Font Size">
         <AppInput
           v-model="appStore.editor.fontSize"
@@ -30,6 +31,25 @@
           name="showInvisibles"
         />
       </AppFormItem>
+      <h4>Prettier</h4>
+      <AppFormItem label="Trailing Comma">
+        <AppSelect
+          v-model="appStore.editor.trailingComma"
+          :options="trailingCommaOptions"
+        />
+      </AppFormItem>
+      <AppFormItem label="Semi">
+        <AppCheckbox
+          v-model="appStore.editor.semi"
+          name="semi"
+        />
+      </AppFormItem>
+      <AppFormItem label="Single Quote">
+        <AppCheckbox
+          v-model="appStore.editor.singleQuote"
+          name="semi"
+        />
+      </AppFormItem>
     </AppForm>
   </div>
 </template>
@@ -46,6 +66,12 @@ const wrapOptions = [
   { label: 'Off', value: 'off' }
 ]
 
+const trailingCommaOptions = [
+  { label: 'None', value: 'none' },
+  { label: 'All', value: 'all' },
+  { label: 'ES6', value: 'es6' }
+]
+
 watch(
   () => appStore.editor,
   v => {
@@ -55,4 +81,11 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+h4 {
+  &:first-child {
+    margin-top: 0;
+  }
+  margin-bottom: 0;
+}
+</style>

src/renderer/components/ui/menu/AppMenu.vue

@@ -11,8 +11,13 @@
         {{ i.name }}
       </div>
     </div>
-    <div class="body">
-      <slot />
+    <div
+      ref="bodyRef"
+      class="body"
+    >
+      <PerfectScrollbar>
+        <slot />
+      </PerfectScrollbar>
     </div>
   </div>
 </template>
@@ -39,9 +44,12 @@ const props = defineProps<Props>()
 
 const items = ref<Item[]>([])
 const value = computed(() => props.modelValue)
+const bodyRef = ref<HTMLElement>()
 
 const onClickItem = (item: Item) => {
   emit('update:modelValue', item.value)
+  const el = bodyRef.value?.querySelector('.ps')
+  if (el) el.scrollTop = 0
 }
 
 const update = (value: string) => {
@@ -55,15 +63,22 @@ provide('items', items.value)
 
 <style lang="scss" scoped>
 .menu {
+  width: 100%;
+  height: 300px;
   display: grid;
   grid-template-columns: 150px 1fr;
   gap: var(--spacing-sm);
-}
-.name {
-  padding: var(--spacing-xs);
-  &.is-selected {
-    border-radius: 5px;
-    background-color: var(--color-contrast-lower-alt);
+  .name {
+    padding: var(--spacing-xs);
+    &.is-selected {
+      border-radius: 5px;
+      background-color: var(--color-contrast-lower-alt);
+    }
+  }
+  .body {
+    :deep(.ps) {
+      height: calc(100vh - 80px);
+    }
   }
 }
 </style>

src/renderer/store/app.ts

@@ -8,7 +8,10 @@ const EDITOR_DEFAULTS: EditorSettings = {
   fontSize: 12,
   showInvisibles: false,
   tabSize: 2,
-  wrap: 'free'
+  wrap: 'free',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true
 }
 
 export const useAppStore = defineStore('app', {

src/renderer/views/Preferences.vue

@@ -45,16 +45,15 @@ track('preferences')
     margin: 0;
   }
   margin-top: var(--title-bar-height);
-  padding: var(--spacing-sm);
 }
 .title {
+  padding: var(--spacing-sm);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .body {
-  padding-top: var(--spacing-sm);
+  padding: 0 0 var(--spacing-sm) var(--spacing-sm);
   display: grid;
-  grid-template-columns: 200px 1fr;
 }
 </style>

src/shared/types/main/index.d.ts

@@ -33,6 +33,7 @@ type MainMenuAction =
   | 'preferences'
   | 'new-snippet'
   | 'copy-snippet'
+  | 'format-snippet'
   | 'new-fragment'
   | 'new-folder'
   | 'search'