vue3+ts+eslint配置

635 阅读1分钟

package.json 配置

"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"eslint": "^8.19.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-vue": "^9.2.0",
"typescript": "~4.1.5",
"unplugin-vue-components": "^0.18.5",
"vite": "^2.6.4",
"vite-plugin-eslint": "^1.6.1" 

vite-plugin-eslint用于npm run dev 时检测代码,在vite.config.js配置

import eslintPlugin from 'vite-plugin-eslint'
plugins: [
  vue(),
  eslintPlugin()
],

tsconfig.js 配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

.eslintrc.js 配置

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "vue/setup-compiler-macros": true
    },
    "extends": [
        "standard",
        'plugin:vue/vue3-recommended',
    ],
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "sourceType": "module",
    },
    "parser": "vue-eslint-parser",
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {  //rules看自己的习惯配置
        "semi": [2, 'never'], // 禁止尾部使用分号“ ; ”
        'no-var': 'error', // 禁止使用 var
        "indent": ['error', 2], // 缩进2格
        'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
        "quotes": [2, 'single'], // 使用单引号
        'vue/html-closing-bracket-newline': 'off', // 不强制换行
        'vue/singleline-html-element-content-newline': 'off', // 不强制换行
        'vue/max-attributes-per-line': ['error', {
            "singleline": { "max": 5 },
            "multiline": { "max": 5 }
        }],
        'no-console': process.env.VUE_APP_FLAG === 'pro' ? 'warn' : 'off',
        'no-debugger': process.env.VUE_APP_FLAG === 'pro' ? 'warn' : 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-explicit-any': ['off'],
        'vue/multi-word-component-names': ['off'],
        'vue/html-self-closing': ['off'],
        'eol-last': 0,
        'vue/require-default-prop': 'off',
    }
}