chore: use flat config & eslint v9 (#152)

.github/workflows/ci.yml

@@ -27,24 +27,23 @@ jobs:
  strategy:
  matrix:
  include:
- - eslint: 8
- node: 18
+ - eslint: 9
+ node: 20
  os: ubuntu-latest
  # On other platforms
- - eslint: 8
- node: 18
+ - eslint: 9
+ node: 20
  os: windows-latest
- - eslint: 8
- node: 18
- os: macos-latest
- # On next Node.js versions
- - eslint: ^9.0.0-0
+ - eslint: 9
  node: 20
- os: ubuntu-latest
+ os: macos-latest
  # On other Node.js versions
  - eslint: 8
  node: 19
  os: ubuntu-latest
+ - eslint: 9
+ node: 18
+ os: ubuntu-latest
  - eslint: 8
  node: 16
  os: ubuntu-latest
@@ -79,14 +78,14 @@ jobs:
  npm r -D vuepress eslint-plugin-eslint-plugin eslint-plugin-prettier vue-eslint-parser eslint-plugin-vue
  - name: Install ESLint ${{ matrix.eslint }}
  run: |+
- npm install -D eslint@${{ matrix.eslint }} --legacy-peer-deps
+ npm install -D eslint@${{ matrix.eslint }}
  npx rimraf node_modules
  - name: Install "@typescript-eslint/parser" ${{ matrix.tseslint }}
  run: |+
  npm install -D @typescript-eslint/parser@${{ matrix.tseslint }}
  npx rimraf node_modules
  if: matrix.tseslint == 5
  - name: Install Packages
- run: npm install -f
+ run: npm install
  - name: Test
  run: npm run -s test:mocha

.npmrc

@@ -1 +1,2 @@
 package-lock = false
+force = true

.vscode/settings.json

@@ -3,7 +3,4 @@
  "javascript",
  "vue"
  ],
- "eslint.options": {
- "rulePaths": ["eslint-internal/rules"]
- },
 }

docs/.vitepress/theme/components/eslint-editor.vue

@@ -301,10 +301,43 @@ function lint() {
  }
 }
 
+function getRuleDocUrl(ruleId) {
+ if (!ruleId.includes("/")) {
+ return `https://eslint.org/docs/rules/${ruleId}`
+ }
+ for (const config of [props.config].flat()) {
+ if (
+ config &&
+ config.plugins &&
+ typeof config.plugins === "object" &&
+ !Array.isArray(config.plugins)
+ ) {
+ for (const [pluginId, plugin] of Object.entries(config.plugins)) {
+ const pluginName = pluginId
+ .replace(/^eslint-plugin-/u, "")
+ .replace(/\/eslint-plugin$/u, "")
+ .replace(/\/eslint-plugin-/u, "/")
+ if (!ruleId.startsWith(`${pluginName}/`)) {
+ continue
+ }
+ const pluginRuleName = ruleId.slice(pluginName.length + 1)
+ const rule = plugin.rules?.[pluginRuleName]
+ if (
+ rule &&
+ typeof rule !== "function" &&
+ rule?.meta?.docs?.url
+ ) {
+ return rule.meta.docs.url
+ }
+ }
+ }
+ }
+ return null
+}
+
 /** Linter message to monaco editor marker */
 function messageToMarker(message) {
- const rule = message.ruleId && linter.value?.getRules().get(message.ruleId)
- const docUrl = rule && rule.meta && rule.meta.docs && rule.meta.docs.url
+ const docUrl = message.ruleId && getRuleDocUrl(message.ruleId)
  const startLineNumber = ensurePositiveInt(message.line, 1)
  const startColumn = ensurePositiveInt(message.column, 1)
  const endLineNumber = ensurePositiveInt(message.endLine, startLineNumber)

docs/.vitepress/theme/components/eslint-playground.vue

@@ -43,50 +43,21 @@ const format = reactive({
 })
 
 const config = computed(() => ({
- globals: {
- // ES2015 globals
- ArrayBuffer: false,
- DataView: false,
- Float32Array: false,
- Float64Array: false,
- Int16Array: false,
- Int32Array: false,
- Int8Array: false,
- Map: false,
- Promise: false,
- Proxy: false,
- Reflect: false,
- Set: false,
- Symbol: false,
- Uint16Array: false,
- Uint32Array: false,
- Uint8Array: false,
- Uint8ClampedArray: false,
- WeakMap: false,
- WeakSet: false,
- // ES2017 globals
- Atomics: false,
- SharedArrayBuffer: false,
- // ES2020 globals
- BigInt: false,
- BigInt64Array: false,
- BigUint64Array: false,
- globalThis: true,
- // ES2021 globals
- AggregateError: false,
- FinalizationRegistry: false,
- WeakRef: false,
- // Intl
- Intl: false,
+ plugins: {
+ "es-x": {
+ rules,
+ },
  },
- rules: {},
- parserOptions: {
- ecmaVersion: "latest",
+ languageOptions: {
  sourceType: props.sourceType,
- ecmaFeatures: {
- jsx: true,
+ ecmaVersion: "latest",
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
  },
  },
+ rules: {},
  settings: {
  "es-x": { aggressive: true },
  },
@@ -109,10 +80,6 @@ onMounted(async () => {
  const [{ Linter }] = await Promise.all([import("eslint")])
 
  linter.value = markRaw(new Linter())
-
- for (const ruleId of Object.keys(rules)) {
- linter.value.defineRule(`es-x/${ruleId}`, rules[ruleId])
- }
 })
 
 /**

docs/.vitepress/theme/components/monaco-editor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { loadMonacoEditor, setupMonacoEditor } from "./monaco/index"
+import { loadMonacoEditor, setupMonacoEditor } from "./monaco/index.mjs"
 import { onBeforeUnmount, onMounted, ref, watch } from "vue"
 
 const props = defineProps({

eslint-internal/config/+browser.js

@@ -6,6 +6,11 @@
 
 const globals = require("./_browser-globals")
 
-module.exports = {
- globals,
-}
+module.exports = [
+ {
+ name: "eslint-internal/config/+browser.js",
+ languageOptions: {
+ globals,
+ },
+ },
+]