Vue3+Vite+TS+Eslint搭建生产项目最终版配置

目录

一、安装eslint依赖及其配置

1、安装eslint依赖

2、eslint配置文件.eslintrc

二、prettier安装依赖及其配置

1、安装prettier依赖

2、prettier配置文件.prettierrc

---

一、安装eslint依赖及其配置

1、安装eslint依赖

yarn add eslint eslint-plugin-vue  eslint-plugin-prettier eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/parser --dev

2、eslint配置文件.eslintrc

{
  "root": true,
  "env": {
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["prettier"],
  "extends": [
    "plugin:vue/vue3-recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ],
  "overrides": [
    {
      "files": "*.html",
      "processor": "vue/.vue"
    }
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "endOfLine": "auto",
        "singleQuote": true,
        "trailingComma": "none",
        "bracketSpacing": true,
        "jsxBracketSameLine": false,
        "vueIndentScriptAndStyle": false,
        "jsxBracketSameLine:": true,
        "htmlWhitespaceSensitivity": "ignore",
        "wrapAttributes": true,
        "overrides": [
          {
            "files": "*.html",
            "options": {
              "parser": "html"
            }
          }
        ]
      }
    ],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ],
    "vue/multi-word-component-names": "off",
    "import/no-unresolved": "off",
    "import/extensions": "off",
    "no-console": "off",
    "consistent-return": "off",
    "no-param-reassign": "off",
    "new-cap": "off",
    "no-shadow": "off",
    "no-underscore-dangle": "off",
    "vue/no-v-html": "off",
    "no-restricted-syntax": "off",
    "guard-for-in": "off",
    "import/prefer-default-export": "off"
  }
}

二、prettier安装依赖及其配置

1、安装prettier依赖

yarn add prettier eslint-config-prettier eslint-config-prettier --dev

2、prettier配置文件.prettierrc

{
  "semi": true,
  "endOfLine": "auto",
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "vueIndentScriptAndStyle": false,
  "jsxBracketSameLine:": true,
  "htmlWhitespaceSensitivity": "ignore",
  "wrapAttributes": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

三、将eslint错误显示在浏览器界面上

1、安装依赖vite-plugin-eslint

yarn add  vite-plugin-eslint --dev

2、导入插件注册插件并将其添加为插件vite.config.ts

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.jsx', 'src/**/*.ts'],
      //  exclue: ['./node_modules/**'],
      cache: false
    })
  ],
  css: {
    devSourcemap: true
  },
  server: {
    host: '0.0.0.0',
    port: 83
  }
});