@meludi/eslint-config-ts-vue

This package provides ESLint settings as an shareable vue typescript eslint configuration.

Installation

Install the package with:

$ npm i -D @meludi/eslint-config-ts-vue

Find out and install peerDependencies.

$ npm info "@meludi/eslint-config-ts-vue@latest" peerDependencies

Entry points

• @meludi/eslint-config-ts-vue/vue2
• @meludi/eslint-config-ts-vue/vue3

Usage

If you did not already have .eslintrc.js configuration file in the root of your project create them.

Add the following to your .eslintrc.js:

// .eslintrc.js
module.exports = {
  extends: [
    '@meludi/eslint-config-ts-vue/vue2', // or '@meludi/eslint-config-ts-vue/vue3'
  ],

  // Adjust it to your project
  // https://eslint.org/docs/latest/use/configure/language-options#specifying-environments
  env: {
    browser: true,
    es6: true,
    node: true,
  },

  parser: '@typescript-eslint/parser',

  // Adjust it to your project
  // https://typescript-eslint.io/architecture/parser/
  parserOptions: {
    project: ['./tsconfig.json', './tsconfig.eslint.json'],
    tsconfigRootDir: __dirname,
    sourceType: 'module',
    ecmaVersion: 'latest',
    ecmaFeatures: {
      jsx: true,
    },
  },

  // optional
  // https://www.npmjs.com/package/eslint-import-resolver-typescript
  settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: './tsconfig.json',
      },
    },
  },
};

NPM script

Add the following script to your package.json for easy usage:

"scripts": {
  "lint:js": "eslint './**/*.{js,vue,ts}'",
  "lint:js:fix": "npm run lint:js -- --fix"
}

Configuration

You can overwrite, extend and unset rules in your .eslintrc.js

Configuring ESLint

Example tsconfig.eslint.json configuration file in the root of your project

{
  "include": [
    // add all files in which you see
    // the "parserOptions.project" error
    // Example
    // ".eslintrc.cjs",
    // "commitlint.config.cjs",
    // "prettier.config.cjs"
  ]
}

Recommendation

Use prettier to format your files: @meludi/eslint-config-prettier

Add the following config files to the root of your project:

• .eslintignore
• .editorconfig

VS Code

Copy .vscode.example to the root of your project and rename it to .vscode.

Volar configuration

volar

LICENSE

MIT