Eslint-config-vue-typescript-eslint NPM

vue-typescript-eslint

Getting Started

first init your project with @vue/cli 3.0,select typescript with eslint

install:

npm i eslint-config-vue-typescript-eslint --save-dev

* edit `.eslintrc.js` :
```js
module.exports = {
  extends: [
    "vue-typescript-eslint"
  ]
};

You can customize the rules:

module.exports = {
  extends: [
    "vue-typescript-eslint"
  ],
  rules:{
      //some rules here,such as:
      // 'indent': [
       //     'error',
       //     2,
       //     {
       //         SwitchCase: 1,
       //         flatTernaryExpressions: true
       //     }
      // ],
  }
};

edit shims-tsx.d.ts:

import Vue, { VNode } from "vue";

declare global {
  namespace JSX {
    /* eslint-disable */
        interface Element extends VNode {}
        interface ElementClass extends Vue {}
        interface IntrinsicElements {
            [elem: string]: any;
        }
    }
}

Vscode Setting

install extension Eslint & Prettier

 //eslint
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],