安装

yarn add eslint eslint-plugin-vue vue-eslint-parser typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

package.json

//add    
"scripts": {
    "lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{ts,tsx,less,vue}\""
  },

eslint

eslint --init
//第一步
? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style
//第二步
✔ How would you like to use ESLint? · problems
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
//第三步 选择vue.js
  ✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
? Which framework does your project use? … 
  React
❯ Vue.js
  None of these
//第四步 使用ts
  Does your project use TypeScript? › No / Yes
//第五步 运行环境
  ? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
//第六步 选择生成的配置文件格式
? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON
//最后一步 no
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / Yes

.eslintrc.js

初始化完成后 修改一下默认的配置

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        jsxPragma: 'React',
        ecmaFeatures: {
            jsx: true,
        },
    },
    extends: [
    // 'eslint:recommended'
        'plugin:vue/vue3-recommended', //vue3
    // 'plugin:vue/recommended' //vue2
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    plugins: ['prettier', 'vue', '@typescript-eslint'],
  //规则 自行添加
    rules: {
    },
};

prettier.config.js

module.exports = {
    trailingComma: 'es5',
    printWidth: 100,
    tabWidth: 2,
    useTabs: true,
    semi: true,
    bracketSpacing: true,
    singleQuote: true,
    jsxSingleQuote: true,
    jsxBracketSameLine: false,
    arrowParens: 'always',
    insertPragma: false,
    requirePragma: false,
};

相关依赖链接

eslint-plugin-vue

prettier

eslint