vite新建element plus项目并加入pretter和eslint支持

新建vite项目

yarn create @vitejs/app my-vue-app --template vue-ts

引入sass支持

npm install -D sass

按需引入element-plus

npm install element-plus --save

npm i -D unplugin-vue-components

加入eslint和prettier支持

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/compiler-sfc eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier prettier-eslint vite-plugin-eslint

加入其他支持

npm i @types/node

新建sass全局变量文件: src/assets/scss/_var.scss

创建/完善相关配置文件

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import path from 'path'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  // 公共样式
  css: {
    // 🔥此处添加全局scss🔥
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/scss/_var.scss";'
      }
    }
  },
  plugins: [
    vue(),
    eslintPlugin(),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      assets: path.resolve(__dirname, 'src/assets'),
      utils: path.resolve(__dirname, 'src/utils')
    }
  }
})

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@": ["src/*"],
      "layouts": ["src/layouts/*"],
      "assets": ["src/assets/*"],
      "utils": ["src/utils/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

.prettierrc.js

module.exports = {
  // 一行最多 80 字符
  printWidth: 80,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 避免报: delete (cr)的错
  endOfLine: 'auto',
  // 使用单引号
  singleQuote: true,
  // 在jsx中把'>' 单独放一行
  jsxBracketSameLine: false,
  // 末尾不添加多余的逗号
  trailingComma: 'none',
  // 此配置用于避免vue模板的html元素内容最后一个>被强制放到单独一行的问题
  htmlWhitespaceSensitivity: 'ignore'
}

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier',
    'plugin:vue/vue3-recommended',
    'plugin:vue/vue3-essential'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    indent: ['error', 2],
    'linebreak-style': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/html-self-closing': 'warn',
    'vue/no-multiple-template-root': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    quotes: ['error', 'single'],
    'prettier/prettier': 'off'
    // 'prettier/prettier': [
    //   'error',
    //   { semi: false, singleQuote: true, parser: 'flow' }
    // ]
  }
}