chore: bump to eslint-config v2.8.0 (#2651)

Co-authored-by: Anthony Fu <[email protected]>

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,4 +2,4 @@
 name: 🚀 New feature proposal
 about: Propose a new feature
 labels: 's: pending triage'
----
+---

.vscode/settings.json

@@ -5,10 +5,6 @@
     "unmute",
     "unstorage"
   ],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "editor.formatOnSave": false,
   "files.associations": {
     "*.css": "postcss"
   },
@@ -23,7 +19,44 @@
   "i18n-ally.preferredDelimiter": "_",
   "i18n-ally.sortKeys": true,
   "i18n-ally.sourceLanguage": "en",
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
-  "volar.completion.preferredTagNameCase": "pascal",
-  "volar.completion.preferredAttrNameCase": "kebab"
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

CONTRIBUTING.md

@@ -8,7 +8,7 @@ For guidelines on contributing to the documentation, refer to the [docs README](
 
 ### Online
 
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow). 
+You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
 
 [![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
 
@@ -21,7 +21,6 @@ To develop and test the Elk package:
 2. Ensure using the latest Node.js (16.x).
 If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
 
-
 3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
 
 4. Check out a branch where you can work and commit your changes:

README.md

@@ -39,8 +39,8 @@ The Elk team maintains a deployment at:
 
 ### Self-Host Docker Deployment
 
-In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself. 
-One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc. 
+In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
+One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
 
 1. checkout source ```git clone https://github.com/elk-zone/elk.git```
 1. got into new source dir: ```cd elk```
@@ -52,7 +52,6 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
 > [!NOTE]
 > The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
 
-
 ### Ecosystem
 
 These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
@@ -107,7 +106,7 @@ We're really excited that you're interested in contributing to Elk! Before submi
 
 ### Online
 
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow). 
+You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
 
 [![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
 
@@ -158,8 +157,8 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more
 ## 👨‍💻 Contributors
 
 <a href="https://github.com/elk-zone/elk/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=elk-zone/elk" />   
-</a>    
+  <img src="https://contrib.rocks/image?repo=elk-zone/elk" />
+</a>
 
 ## 📄 License
 

components/account/AccountHoverWrapper.vue

@@ -43,7 +43,8 @@ watch(
     }
 
     account.value = undefined
-  }, { immediate: true, flush: 'post' },
+  },
+  { immediate: true, flush: 'post' },
 )
 
 const userSettings = useUserSettings()

components/common/CommonScrollIntoView.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { as = 'div', active } = defineProps<{ as: any; active: boolean }>()
+const { as = 'div', active } = defineProps<{
+  as: any
+  active: boolean
+}>()
+
 const el = ref()
 
 watch(() => active, (active) => {

components/notification/NotificationPreferences.client.vue

@@ -35,8 +35,8 @@ const showWarning = computed(() => {
     return false
 
   return isSupported
-      && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
-      && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true)
+    && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
+    && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''])
 })
 
 async function saveSettings() {

components/publish/PublishWidget.vue

@@ -30,8 +30,14 @@ const draftState = useDraft(draftKey, initial)
 const { draft } = draftState
 
 const {
-  isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
-  uploadAttachments, pickAttachments, setDescription, removeAttachment,
+  isExceedingAttachmentLimit,
+  isUploading,
+  failedAttachments,
+  isOverDropZone,
+  uploadAttachments,
+  pickAttachments,
+  setDescription,
+  removeAttachment,
   dropZoneRef,
 } = useUploadMediaAttachment(draft)
 
@@ -68,7 +74,7 @@ function trimPollOptions() {
   const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
 
   if (currentInstance.value?.configuration
-      && trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
+    && trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
     draft.value.params.poll!.options = trimmedOptions
   else
     draft.value.params.poll!.options = [...trimmedOptions, '']

components/settings/SettingsItem.vue

@@ -18,12 +18,12 @@ useCommand({
   scope: 'Settings',
 
   name: () => props.text
-    ?? (props.to
-      ? typeof props.to === 'string'
-        ? props.to
-        : props.to.name
-      : ''
-    ),
+  ?? (props.to
+    ? typeof props.to === 'string'
+      ? props.to
+      : props.to.name
+    : ''
+  ),
   description: () => props.description,
   icon: () => props.icon || '',
   visible: () => props.command && props.to,

components/settings/SettingsProfileMetadata.vue

@@ -8,8 +8,7 @@ const dropdown = ref<any>()
 
 const fieldIcons = computed(() =>
   Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
-    getAccountFieldIcon(form.value.fieldsAttributes[i].name),
-  ),
+    getAccountFieldIcon(form.value.fieldsAttributes[i].name)),
 )
 
 const fieldCount = computed(() => {

components/status/StatusReplyingTo.vue

@@ -42,7 +42,8 @@ watch(
       return
     }
     account.value = undefined
-  }, { immediate: true, flush: 'post' },
+  },
+  { immediate: true, flush: 'post' },
 )
 </script>
 

components/status/StatusSpoiler.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean; sensitiveNonSpoiler?: boolean }>()
+const props = defineProps<{
+  enabled?: boolean
+  filter?: boolean
+  isDM?: boolean
+  sensitiveNonSpoiler?: boolean
+}>()
 
 const expandSpoilers = computed(() => {
   const expandCW = currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false

composables/command.ts

@@ -170,7 +170,8 @@ export const useCommandRegistry = defineStore('command', () => {
         const indexed = cmds.map((cmd, index) => ({ ...cmd, index }))
 
         const grouped = new Map<CommandScopeNames, CommandQueryResultItem[]>(
-          scopes.map(scope => [scope, []]))
+          scopes.map(scope => [scope, []]),
+        )
         for (const cmd of indexed) {
           const scope = cmd.scope ?? ''
           grouped.get(scope)!.push({

composables/content-parse.ts

@@ -494,7 +494,10 @@ function _markdownProcess(value: string) {
 
   let start = 0
   while (true) {
-    let found: { match: RegExpMatchArray; replacer: (c: (string | Node)[]) => Node } | undefined
+    let found: {
+      match: RegExpMatchArray
+      replacer: (c: (string | Node)[]) => Node
+    } | undefined
 
     for (const [re, replacer] of _markdownReplacements) {
       re.lastIndex = start

composables/i18n.ts

@@ -29,8 +29,10 @@ export function useHumanReadableNumber() {
   }
 }
 
-export function useFormattedDateTime(value: MaybeRefOrGetter<string | number | Date | undefined | null>,
-  options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' }) {
+export function useFormattedDateTime(
+  value: MaybeRefOrGetter<string | number | Date | undefined | null>,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
+) {
   const { locale } = useI18n()
   const formatter = computed(() => Intl.DateTimeFormat(locale.value, options))
   return computed(() => {

composables/magickeys.ts

@@ -36,9 +36,11 @@ export function useMagicSequence(keys: string[]): ComputedRef<boolean> {
         down = false
         success.value = true
       }
-    }, {
+    },
+    {
       deep: true,
-    })
+    },
+  )
 
   return computed(() => success.value)
 }

composables/masto/publish.ts

@@ -36,23 +36,22 @@ export function usePublish(options: {
     const { params, attachments } = draft.value
     const firstEmptyInputIndex = params.poll?.options.findIndex(option => option.trim().length === 0)
     return isEmpty.value
-          || options.isUploading.value
-          || isSending.value
-          || (attachments.length === 0 && !params.status)
-          || failedMessages.value.length > 0
-          || (attachments.length > 0 && params.poll !== null && params.poll !== undefined)
-          || ((params.poll !== null && params.poll !== undefined)
-              && (
-                (firstEmptyInputIndex !== -1
-                 && firstEmptyInputIndex !== params.poll.options.length - 1
-                )
-                || params.poll.options.findLastIndex(option => option.trim().length > 0) + 1 < 2
-                || (new Set(params.poll.options).size !== params.poll.options.length)
-                || (currentInstance.value?.configuration?.polls.maxCharactersPerOption !== undefined
-                    && params.poll.options.find(option => option.length > currentInstance.value!.configuration!.polls.maxCharactersPerOption) !== undefined
-                )
-              )
-          )
+      || options.isUploading.value
+      || isSending.value
+      || (attachments.length === 0 && !params.status)
+      || failedMessages.value.length > 0
+      || (attachments.length > 0 && params.poll !== null && params.poll !== undefined)
+      || ((params.poll !== null && params.poll !== undefined)
+      && (
+        (firstEmptyInputIndex !== -1
+        && firstEmptyInputIndex !== params.poll.options.length - 1
+        )
+        || params.poll.options.findLastIndex(option => option.trim().length > 0) + 1 < 2
+        || (new Set(params.poll.options).size !== params.poll.options.length)
+        || (currentInstance.value?.configuration?.polls.maxCharactersPerOption !== undefined
+        && params.poll.options.find(option => option.length > currentInstance.value!.configuration!.polls.maxCharactersPerOption) !== undefined
+        )
+      ))
   })
 
   watch(draft, () => {
@@ -164,7 +163,7 @@ export function useUploadMediaAttachment(draft: Ref<Draft>) {
 
   const maxPixels = computed(() => {
     return currentInstance.value?.configuration?.mediaAttachments?.imageMatrixLimit
-        ?? 4096 ** 2
+      ?? 4096 ** 2
   })
 
   const loadImage = (inputFile: Blob) => new Promise<HTMLImageElement>((resolve, reject) => {

composables/masto/statusDrafts.ts

@@ -20,7 +20,7 @@ function getDefaultVisibility(currentVisibility: mastodon.v1.StatusVisibility) {
   // the post more private than the replying to post
   const preferredVisibility = currentUser.value?.account.source.privacy || 'public'
   return ALL_VISIBILITY.indexOf(currentVisibility)
-   > ALL_VISIBILITY.indexOf(preferredVisibility)
+    > ALL_VISIBILITY.indexOf(preferredVisibility)
     ? currentVisibility
     : preferredVisibility
 }

composables/masto/translate.ts

@@ -95,7 +95,12 @@ export async function translateText(text: string, from: string | null | undefine
   return status
 }
 
-const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string; success: boolean; error: string }>()
+const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, {
+  visible: boolean
+  text: string
+  success: boolean
+  error: string
+}>()
 
 export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit, to: string) {
   if (!translations.has(status))