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 :

 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
        }
    ],

Thanks

AlloyTeam/eslint-config-alloy

静晴轩别苑