chore: introduce eslint flat config (#1758)

Author: kazupon

.eslintignore

@@ -8,8 +8,9 @@
   "editor.formatOnPaste": true,
   "editor.formatOnType": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
+  "eslint.experimental.useFlatConfig": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "volar.tsPlugin": true
 }

.eslintrc.cjs

@@ -13,6 +13,7 @@ async function main() {
       baseCompile(`hello world`)
     })
     .add(`compile complex message`, () => {
+      // eslint-disable-next-line no-irregular-whitespace
       baseCompile(`@.caml:{'no apples'} 0 | {0} apple 0 | {n}　apples 0`)
     })
     .on('error', event => {

.vscode/settings.json

@@ -0,0 +1,97 @@
+import globals from 'globals'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+import ts from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
+
+const vue = extendVuePlugin('plugin:vue/vue3-recommended', ts.parser)
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+  // ignore globally
+  {
+    ignores: [
+      '**/dist/**',
+      '**/fixtures/**',
+      '**/coverage/**',
+      '**/.vitepress/**',
+      '**/.vuepress/**',
+      '**/test/**',
+      '**/examples/**',
+      'shim.d.ts',
+      '.eslintcache',
+      '.eslintrc.cjs'
+    ]
+  },
+
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  eslintConfigPrettier,
+  ...vue,
+
+  // globals
+  {
+    // files: ['**/*.js', '**/*.ts', '**/*.vue', '**/*.json'],
+    languageOptions: {
+      globals: {
+        __DEV__: true,
+        __COMMIT__: true,
+        page: true,
+        browser: true,
+        context: true,
+        ...globals.node
+      },
+      parserOptions: { sourceType: 'module' }
+    }
+  },
+
+  // custom rules
+  {
+    rules: {
+      'object-curly-spacing': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/ban-ts-ignore': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/member-delimiter-style': 'off',
+      '@typescript-eslint/no-use-before-define': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      'vue/one-component-per-file': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/experimental-script-setup-vars': 'off',
+      'vue/no-deprecated-props-default-this': 'off'
+    }
+  }
+]
+
+/**
+ * extend eslint-plugin-vue with @typescript-eslint/parser
+ * (NOTE: eslint-plugin-vue flat config WIP currently https://github.com/vuejs/eslint-plugin-vue/issues/1291)
+ *
+ * @param { 'plugin:vue/vue3-essential' | 'plugin:vue/vue3-strongly-recommended' | 'plugin:vue/vue3-recommended' } vueConfigPattern
+ * @param { import("typescript-eslint").Config.parser } tsParser
+ *
+ * @return { import("eslint").Linter.FlatConfig[] }
+ */
+function extendVuePlugin(vueConfigPattern, tsParser) {
+  const compat = new FlatCompat()
+  const vuePlugin = compat.extends(vueConfigPattern)
+  const vueLangOptions = vuePlugin[2]
+  vueLangOptions.files = [
+    '**/*.vue',
+    '**/*.ts',
+    '**/*.tsx',
+    '**/*.mts',
+    '**/*.cts'
+  ]
+  vueLangOptions.languageOptions = {
+    // NOTE:
+    //  https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+    parserOptions: {
+      parser: tsParser
+    },
+    ecmaVersion: 'latest'
+  }
+  return vuePlugin
+}

benchmark/compile.mjs

@@ -50,7 +50,7 @@
     "format:package": "node -r esbuild-register ./scripts/fixpack.ts",
     "format:prettier": "prettier --config prettier.config.mjs --ignore-path .prettierignore --list-different '**/*.{ts,js,json,html}'",
     "lint": "run-p lint:secret lint:codes lint:docs",
-    "lint:codes": "eslint --cache ./packages ./test-dts ./e2e ./benchmark --ext .js,.mjs,.ts,.vue",
+    "lint:codes": "eslint . --cache",
     "lint:docs": "textlint --config .textlintrc.js docs/*.md docs/advanced/**/*.md docs/essentials/**/*.md docs/migration/**/*.md docs/api/injection.md packages/**/*.md",
     "lint:fix": "run-p \"lint:codes --fix\" \"lint:docs --fix\"",
     "lint:secret": "npx secretlint \"**/*\"",
@@ -69,6 +69,8 @@
     "test:unit": "cross-env TZ=UTC vitest run -c ./vitest.unit.config.ts"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^2.1.4",
+    "@eslint/js": "^8.57.0",
     "@intlify/core-base": "workspace:*",
     "@intlify/message-compiler": "workspace:*",
     "@microsoft/api-extractor": "7.15.2",
@@ -96,6 +98,7 @@
     "eslint-plugin-vue": "^9.22.0",
     "execa": "^5.0.0",
     "fixpack": "^4.0.0",
+    "globals": "^14.0.0",
     "globby": "^14.0.1",
     "jiti": "^1.21.0",
     "js-yaml": "^4.1.0",
@@ -158,11 +161,11 @@
     ],
     "*.{js,vue}": [
       "prettier --write",
-      "eslint --fix --ext .js,.vue"
+      "eslint --fix"
     ],
     "*.ts?(x)": [
       "prettier --parser=typescript --write",
-      "eslint --fix --ext .ts"
+      "eslint --fix"
     ],
     "*": [
       "secretlint"

eslint.config.mjs

@@ -75,32 +75,39 @@ function formatMessagePart<Message = string>(
 ): MessageType<Message> {
   const type = node.t || node.type
   switch (type) {
-    case NodeTypes.Text:
+    case NodeTypes.Text: {
       const text = node as TextNode
       return (text.v || text.value) as MessageType<Message>
-    case NodeTypes.Literal:
+    }
+    case NodeTypes.Literal: {
       const literal = node as LiteralNode
       return (literal.v || literal.value) as MessageType<Message>
-    case NodeTypes.Named:
+    }
+    case NodeTypes.Named: {
       const named = node as NamedNode
       return ctx.interpolate(ctx.named(named.k || named.key))
-    case NodeTypes.List:
+    }
+    case NodeTypes.List: {
       const list = node as ListNode
       return ctx.interpolate(ctx.list(list.i != null ? list.i : list.index))
-    case NodeTypes.Linked:
+    }
+    case NodeTypes.Linked: {
       const linked = node as LinkedNode
       const modifier = linked.m || linked.modifier
       return ctx.linked(
         formatMessagePart(ctx, linked.k || linked.key) as string,
         modifier ? (formatMessagePart(ctx, modifier) as string) : undefined,
         ctx.type
       )
-    case NodeTypes.LinkedKey:
+    }
+    case NodeTypes.LinkedKey: {
       const linkedKey = node as LinkedKeyNode
       return (linkedKey.v || linkedKey.value) as MessageType<Message>
-    case NodeTypes.LinkedModifier:
+    }
+    case NodeTypes.LinkedModifier: {
       const linkedModifier = node as LinkedModifierNode
       return (linkedModifier.v || linkedModifier.value) as MessageType<Message>
+    }
     default:
       throw new Error(`unhandled node type on format message part: ${type}`)
   }

package.json

@@ -222,7 +222,11 @@ const onChangeOptions = async (options: CompileOptions) => {
         @change-model="onChangeModel"
         @ready="onReadyInput"
       />
-      <Editor class="output" :code="genCodes" @ready="onReadyOutput" />
+      <Editor
+        class="output"
+        :code="genCodes"
+        @ready="onReadyOutput"
+      />
     </div>
   </div>
 </template>

packages/core-base/src/format.ts

@@ -7,9 +7,15 @@ const commitHistoryURL = 'https://app.netlify.com/sites/format-explorer/deploys'
 <template>
   <div>
     <h1>Intlify Message Format Explorer</h1>
-    <a :href="commitURL" target="_blank">{{ commitLabel }}</a>
+    <a
+      :href="commitURL"
+      target="_blank"
+    >{{ commitLabel }}</a>
     |
-    <a :href="commitHistoryURL" target="_blank">History</a>
+    <a
+      :href="commitHistoryURL"
+      target="_blank"
+    >History</a>
   </div>
 </template>
 

packages/format-explorer/src/App.vue

@@ -47,15 +47,15 @@ watch(compilerOptions, val => {
             name="mode"
             :checked="compilerOptions.mode === 'normal'"
             @change="compilerOptions.mode = 'normal'"
-          />
+          >
           <label for="mode-normal">normal</label>
           <input
             id="mode-arrow"
             type="radio"
             name="mode"
             :checked="compilerOptions.mode === 'arrow'"
             @change="compilerOptions.mode = 'arrow'"
-          />
+          >
           <label for="mode-arrow">arrow</label>
         </li>
         <li>
@@ -69,7 +69,7 @@ watch(compilerOptions, val => {
                 $event.target as HTMLInputElement
               ).checked
             "
-          />
+          >
           <label for="location">location</label>
         </li>
         <li>
@@ -83,7 +83,7 @@ watch(compilerOptions, val => {
                 $event.target as HTMLInputElement
               ).checked
             "
-          />
+          >
           <label for="indent">needIndent</label>
         </li>
         <li>
@@ -97,7 +97,7 @@ watch(compilerOptions, val => {
                 $event.target as HTMLInputElement
               ).checked
             "
-          />
+          >
           <label for="sourcemap">sourceMap</label>
         </li>
         <li>
@@ -109,7 +109,7 @@ watch(compilerOptions, val => {
             @change="
               compilerOptions.jit = ($event.target as HTMLInputElement).checked
             "
-          />
+          >
           <label for="jit">jit</label>
         </li>
         <li>
@@ -123,7 +123,7 @@ watch(compilerOptions, val => {
                 $event.target as HTMLInputElement
               ).checked
             "
-          />
+          >
           <label for="optimize">optimize</label>
         </li>
       </ul>