Eslint-preset-vue NPM

Shareable ESLint preset for vue.

Usage

Install package:

pnpm add --save-dev eslint eslint-preset-basic eslint-preset-vue

Create ESLint configuration file eslint.config.js:

import { defineFlatConfig, presetBasic } from 'eslint-preset-basic'
import { presetVue } from 'eslint-preset-vue'

export default defineFlatConfig([
  presetBasic({ enableTs: true }),
  presetVue({ enableTs: true }),
  // {
  //   rules: {...}
  // }
])

If your project does not specify "type":"module" in its package.json file, then eslint.config.js must be in CommonJS format, such as:

module.exports = (async () => {
  const { defineFlatConfig, presetBasic } = await import('eslint-preset-basic')
  const { presetVue } = await import('eslint-preset-vue')
  return defineFlatConfig([
    presetBasic({ enableTs: true }),
    presetVue({ enableTs: true }),
    // {
    //   rules: {...}
    // }
  ])
})()

Add script for package.json:

{
  "scripts": {
    "lint": "eslint .",
  }
}

VS Code support

Install VS Code ESLint extension

Add the following settings to your project setting .vscode/settings.json:

{
  // Auto fix
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  },

  // Enable the flat config support
  "eslint.experimental.useFlatConfig": true,

  // Enable eslint for supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
    "vue"
  ]
}