Skip to content

Instantly share code, notes, and snippets.

@JoostKersjes

JoostKersjes/create-eslint-flat-config-results.md

Last active April 12, 2024 19:12
Show Gist options
  • Save JoostKersjes/0e6495987a74df8ebf4527f35d924e27 to your computer and use it in GitHub Desktop.
Save JoostKersjes/0e6495987a74df8ebf4527f35d924e27 to your computer and use it in GitHub Desktop.
Download ZIP
Test resutls for vue/create-eslint-config PR #25
Raw
create-eslint-flat-config-results.md

These tests were done in create-vue projects. All of them share these parts of the setup:

  • Vue 3
  • Yes for vue-router
  • Yes for Pinia
  • No for Vitest
  • No for End-to-End tests
  • Yes for ESLint
  • No for DevTools 7

TypeScript, JSX and Prettier depend on the scenario.

After the initial setup, I used the bin/create-eslint-config.js from my PR to generate fresh config files.

Lastly, I changed the script in package.json to be "lint": "eslint . --fix",.

Scenario 1

  • No for TypeScript
  • No for Prettier
  • Default style guide

eslint.config.js:

import pluginVue from 'eslint-plugin-vue'
import js from '@eslint/js'

export default [
  ...pluginVue.configs['flat/essential'],
  js.configs.recommended,
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs'
    ],
    languageOptions: {
      ecmaVersion: 'latest'
    }
  }
]

package.json:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "vite": "^5.2.8",
    "@eslint/js": "^9.0.0"
  }

pnpm i && pnpm lint:

  • No errors

Scenario 2

  • Yes for TypeScript
  • No for Prettier
  • Default style guide

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'

import { FlatCompat } from '@eslint/eslintrc'
import pluginVue from 'eslint-plugin-vue'
import js from '@eslint/js'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended
})

export default [
  ...pluginVue.configs['flat/essential'],
  js.configs.recommended,
  ...compat.extends('@vue/eslint-config-typescript'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs',
      '**/*.ts',
      '**/*.tsx',
      '**/*.cts',
      '**/*.mts'
    ],
    languageOptions: {
      ecmaVersion: 'latest'
    }
  }
]

package.json:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "vite": "^5.2.8",
    "@eslint/js": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:

  • No errors

Scenario 3

  • No for TypeScript
  • Yes for Prettier
  • Default style guide

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'

import { FlatCompat } from '@eslint/eslintrc'
import pluginVue from 'eslint-plugin-vue'
import js from '@eslint/js'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname
})

export default [
  ...pluginVue.configs['flat/essential'],
  js.configs.recommended,
  ...compat.extends('@vue/eslint-config-prettier/skip-formatting'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs'
    ],
    languageOptions: {
      ecmaVersion: 'latest'
    }
  }
]

package.json:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "vite": "^5.2.8",
    "@eslint/js": "^9.0.0",
    "prettier": "^3.2.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:

  • No errors

Scenario 4

  • Yes for TypeScript
  • Yes for Prettier
  • Default style guide

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'

import { FlatCompat } from '@eslint/eslintrc'
import pluginVue from 'eslint-plugin-vue'
import js from '@eslint/js'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended
})

export default [
  ...pluginVue.configs['flat/essential'],
  js.configs.recommended,
  ...compat.extends('@vue/eslint-config-typescript'),
  ...compat.extends('@vue/eslint-config-prettier/skip-formatting'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs',
      '**/*.ts',
      '**/*.tsx',
      '**/*.cts',
      '**/*.mts'
    ],
    languageOptions: {
      ecmaVersion: 'latest'
    }
  }
]

package.json:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "vite": "^5.2.8",
    "@eslint/js": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "prettier": "^3.2.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:

  • No errors

Scenario 5

  • No for TypeScript
  • No for Prettier
  • Airbnb style guide
  • No for JSX
  • No aliases

eslint.config.js:

import path from 'node:path';
import { fileURLToPath } from 'node:url';

import { FlatCompat } from '@eslint/eslintrc';
import pluginVue from 'eslint-plugin-vue';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
});

export default [
  ...pluginVue.configs['flat/essential'],
  ...compat.extends('@vue/eslint-config-airbnb'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs',
    ],
  },
];

package.json:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "vite": "^5.2.8",
    "@vue/eslint-config-airbnb": "^8.0.0",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:
image

Scenario 6

  • No for TypeScript
  • No for Prettier
  • Airbnb style guide
  • No for JSX
  • Alias for @ -> ./src

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'

import { FlatCompat } from '@eslint/eslintrc'
import pluginVue from 'eslint-plugin-vue'
import createAliasSetting from '@vue/eslint-config-airbnb/createAliasSetting'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname
})

export default [
  ...pluginVue.configs['flat/essential'],
  ...compat.extends('@vue/eslint-config-airbnb'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs'
    ],
    settings: {
      ...createAliasSetting({
        '@': './src'
      })
    }
  }
]

package.json:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "vite": "^5.2.8",
    "@vue/eslint-config-airbnb": "^8.0.0",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:
image

Scenario 7

  • No for TypeScript
  • Yes for Prettier
  • Standard style guide
  • No for JSX
  • No aliases

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'

import { FlatCompat } from '@eslint/eslintrc'
import pluginVue from 'eslint-plugin-vue'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname
})

export default [
  ...pluginVue.configs['flat/essential'],
  ...compat.extends('@vue/eslint-config-standard'),
  ...compat.extends('@vue/eslint-config-prettier/skip-formatting'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs'
    ]
  }
]

package.json:

  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "prettier": "^3.2.5",
    "vite": "^5.2.8",
    "@vue/eslint-config-standard": "^8.0.1",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:

  • No errors

Scenario 8

  • Yes for TypeScript
  • No for Prettier
  • Standard style guide
  • Yes for JSX
  • No aliases

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'

import { FlatCompat } from '@eslint/eslintrc'
import pluginVue from 'eslint-plugin-vue'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname
})

export default [
  ...pluginVue.configs['flat/essential'],
  ...compat.extends('@vue/eslint-config-standard-with-typescript'),
  ...compat.extends('@vue/eslint-config-standard-with-typescript/allow-tsx-in-vue'),
  {
    files: [
      '**/*.vue',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs',
      '**/*.ts',
      '**/*.tsx',
      '**/*.cts',
      '**/*.mts'
    ]
  }
]

package.json:

  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.0",
    "npm-run-all2": "^6.1.2",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.11",
    "@vue/eslint-config-standard-with-typescript": "^8.0.0",
    "@eslint/eslintrc": "^3.0.2"
  }

pnpm i && pnpm lint:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment