定义目录结构

├─ .husky
│  ├─ pre-commit      # husky commit 钩子配置文件
│  ├─ commit-msg      # husky commit 钩子配置文件
├─ .vscode
│  ├─ settings.json   # vscode 项目配置文件
├─ mock               # mock 模拟数据配置
├─ public
│  ├─ favicon.ico
├─ src
│  ├─ @types          # ts 接口定义
│  ├─ api             # api 接口
│  ├─ assets          # 静态资源
│  ├─ components      # 全局组件
│  ├─ layout          # 布局
│  ├─ plugins         # 插件
│  ├─ router          # 路由
│  ├─ store           # vuex store
│  ├─ styles          # 全局样式
│  ├─ utils           # 全局公共方法
│  └─ views           # 所有页面
│  ├─ App.vue         # 入口页面
│  ├─ main.ts         # 入口文件
│  └─ shims-vue.d.ts  # ts 适配定义文件
│  └─ auto-import.d.ts          # unplugin-auto-import 插件生成全局类型定义文件
│  └─ components.d.ts           # unplugin-vue-components 插件生成全局组件定义文件
├─ .env.development             # 开发环境
├─ .env.production              # 生产环境
├─ .env.test                    # 测试环境
├─ .eslintignore                # eslint 忽略配置文件
├─ .eslintrc-auto-import.json   # unplugin-auto-import/vite 插件解决eslint报错问题的配置项文件
├─ .eslintrc.js                 # eslintrc 配置
├─ .gitignore                   # git 忽略配置文件
├─ .prettierignore              # prettier 忽略配置文件
├─ .prettierrc.json             # prettierrc 配置文件
├─ .stylelintignore             # stylelint 忽略配置文件
├─ .stylelintrc.js              # stylelintrc 配置文件
├─ tsconfig.json                # ts 编译配置
└─ vite.config.js               # vite 配置
└─ package.json
└─ README.md
└─ index.html
3 vite.config.ts配置
3.1 配置别名
如果require('path') ts报红提示 npm i @types/node

执行 npm i -D @vue/cli-plugin-typescript（ts相关的工具集成起来的插件）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
3.2 配置代理
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
    proxy: {
      '/api': {
        // 后端服务器地址
        target: 'http://xxx.xx.x.xx:8099/',
        // 代理完成后需要去掉api前缀
        rewrite: (path) => path.replace(/^\/api/, ''),
        // 将主机报头来源更改为目标地址
        changeOrigin: true
3.3 配置全局sass文件
安装 sass

npm i -D sass node-sass sass-loader
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  css: {
    // 配置全局 sass 文件
    preprocessorOptions: {
      scss: {
        additionalData: '@use "src/styles/var.scss" as *;'
3.4 自动按需引入 element-plus 组件和自定义 compontent 组件
自动引入后，再也不用引入和注册组件，和全局引用一样，可以直接在模板中使用，再也不用手动注册组件了，nice！
安装UI库 element-plus

npm i element-plus
安装按需引入样式插件

npm i -D vite-plugin-style-import
自动按需导入组件、vue3等插件 hooks，省去大量的import操作

npm i -D unplugin-vue-components  unplugin-auto-import
如果运行报错提示 Cannot find module 'consola'

npm i -D consola
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vue3等插件 hooks 自动引入
import AutoImport from 'unplugin-auto-import/vite'
// 按需引入element-plus样式
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
// 自动按需导入elementPlus组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    // 引入 element-plus 样式
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`
     AutoImport({
      // 自动按需导入elementPlus组件
      resolvers: [ElementPlusResolver()]
    Components({
      // 要搜索组件的目录的相对路径，components下的组件会被自动注册引入
      dirs: ['src/components'],
      // 搜索子目录
      deep: true,
      // 组件的有效文件扩展名
      extensions: ['vue'],
      // 允许子目录作为组件的命名空间前缀。
      directoryAsNamespace: false,
      // 配置文件生成位置
      dts: 'src/components.d.ts',
      // 自动按需导入element-plus组件、修改主题色添加importStyle，使用预处理样式
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
3.5 配置 element-icon
npm i @element-plus/icons-vue
// 1、main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 插件配置
import { loadAllPlugins } from './plugins'
const app = createApp(App)
// 加载所有插件
loadAllPlugins(app)
app.use(store).use(router).mount('#app')
// 2、plugins/index.ts 在 plugins 文件夹中配置各种插件，在 plugins 中新建elementIcon.ts 文件
import { createApp } from 'vue'
/** 加载插件文件 */
export function loadAllPlugins(app: ReturnType<typeof createApp>) {
  const files = import.meta.globEager('./*.ts')
  for (const path in files) {
    if (typeof files[path].default === 'function') {
      files[path].default(app)
// 3、elementIcon.ts
import * as ElIconModules from '@element-plus/icons-vue'
export default function loadElementIcon(app: any) {
  for (const iconName in ElIconModules) {
    if (Reflect.has(ElIconModules, iconName)) {
      app.component(iconName, ElIconModules[iconName])
3.6 配置 vue3 hook自动引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vue3等插件 hooks 自动引入
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入vue3的hook
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head','@vueuse/core'],
      // auto-import.d.ts生成的位置
      dts: 'src/auto-import.d.ts',
      // 解决eslint报错问题的配置项
      eslintrc: {
        enabled: true, // 默认 'false'
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true // 默认 'true'
3.7 自动导入生成 svg 雪碧图组件
svg-icon 在日常项目中经常会用到 ，如何在vite中使用？

1、安装svg雪碧图插件

2、配置vite.config文件

3、注册雪碧图

4、新建SvgIcon.vue组件
npm i path-browserify vite-plugin-svg-icons
// 1、vite.config.ts 配置svg
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path-browserify'
// 生成 svg 雪碧图
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入svg图片
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__'
// 2、mian.ts 注册雪碧图
import { createApp } from 'vue'
import App from './App.vue'
// 注册脚本（生成svg雪碧图）
import 'virtual:svg-icons-register'
createApp(App).mount('#app')
// 3、在 compontent 中新建 SvgIcon.vue 组件（由于配置了按需导入，此组件无需import导入）
<template>
  <div class="svg-box">
    <svg :class="svgClass" aria-hidden="true" :style="style">
      <use :xlink:href="iconName" :fill="color" />
</template>
<script lang="ts" setup>
defineOptions({
  name: 'SvgIcon'
interface Style {
  width?: string
  height?: string
  [index: string]: any
const props = defineProps({
  name: {
    type: String,
    required: true
  width: {
    type: String,
    default: ''
  height: {
    type: String,
    default: ''
  className: {
    type: String,
    default: ''
  color: {
    type: String,
    default: 'red'
const style: Style = computed(() => {
  const style: Style = {}
  if (props.width) {
    style.width = props.width + 'px'
    style.height = (props.height || props.width) + 'px'
  return style
const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  return 'svg-icon'
</script>
<style lang="scss" scoped>
.svg-box {
  display: inline-block;
  .svg-icon {
    position: relative;
    width: 14px;
    min-width: 1em;
    height: 14px;
    vertical-align: -2px;
</style>
// 4、使用 name 为 svg 图片名称
<SvgIcon width="444" height="342" name="errorPage404" />
3.8 开启gzip、压缩代码
npm i -D vite-plugin-compression rollup-plugin-terser
import { defineConfig } from 'vite'
import vue from




    
 '@vitejs/plugin-vue'
// 开启gzip、br压缩
import compressPlugin from 'vite-plugin-compression'
// rollup 压缩代码
import { terser } from 'rollup-plugin-terser'
export default defineConfig({
  plugins: [
    vue(),
    terser(),
    compressPlugin({
      ext: '.gz',
      algorithm: 'gzip',
      // 是否删除原文件
      deleteOriginFile: false
3.9 rollupOptions 打包优化
// 1、配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: false,
    outDir: 'dist',
    minify: 'terser', // 混淆器，terser构建后文件体积更小默认 esbuild
    terserOptions: {
      compress: {
        // 生产环境时移除console
        drop_console: true,
        drop_debugger: true
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            const arr = id.toString().split('node_modules/')[1].split('/')
            switch (arr[0]) {
              case '@vue':
              case 'axios':
              case 'element-plus':
              case '@element-plus':
                return '_' + arr[0]
              default:
                return '__vendor'
        chunkFileNames: 'static/js1/[name]-[hash].js',
        entryFileNames: 'static/js2/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
3.10 配置 mock 模拟数据
npm i -D vite-plugin-mock
// 1、配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// mock模拟接口插件
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      // 配置mock位置
      mockPath: '/mock'
//2、在根目录下、新建 mock/index.ts 文件
export default [
    url: '/mock/user/sysUser/login',
    method: 'post',
    timeout: 500,
    statusCode: 200,
    response: {
      code: 0,
      data: {
        orgName: 'xxx',
        mobile: 'xxx',
        userId: 'xxx',
        token: 'xxx',
        password: '',
        id: 'xxx',
        username: 'xxx'
//3、使用时在 serveice.ts 中动态配置baseUrl
const baseURL = import.meta.env.DEV === 'development' ? 'mock' : import.meta.env.VITE_APP_BASEURL
如果ts报红提示，可在 .d.ts 声明文件中加入
interface ImportMeta {  
  env: Record<string, unknown>  
3.11 配置实时检测typescript插件
npm i -D vite-plugin-checker
// 1、配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 实时检测typescript插件，可在运行时检测
import checker from 'vite-plugin-checker'
export default defineConfig({
  plugins: [
    vue(),
    checker({ vueTsc: true })
vite.config.ts
import vue from '@vitejs/plugin-vue'
// 生成 svg 雪碧图
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// vue3等插件 hooks 自动引入
import AutoImport from 'unplugin-auto-import/vite'
// 自动按需导入组件插件，省去大量的import操作
import Components from 'unplugin-vue-components/vite'
// 开启gzip、br压缩
import compressPlugin from 'vite-plugin-compression'
// rollup 压缩代码
import { terser } from 'rollup-plugin-terser'
// 按需引入element-plus样式
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
// 自动按需导入elementPlus组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// mock模拟接口插件
import { viteMockServe } from 'vite-plugin-mock'
// 实时检测typescript插件，可在运行时检测
import checker from 'vite-plugin-checker'
// 注册组件name
import DefineOptions from 'unplugin-vue-define-options/vite'
import path from 'path-browserify'
import { defineConfig } from 'vite'
const { resolve } = require('path')
export default defineConfig({
  build: {
    sourcemap: false,
    outDir: 'dist',
    minify: 'terser', // 混淆器，terser构建后文件体积更小默认 esbuild
    terserOptions: {
      compress: {
        // 生产环境时移除console
        drop_console: true,
        drop_debugger: true
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            const arr = id.toString().split('node_modules/')[1].split('/')
            switch (arr[0]) {
              case '@vue':
              case 'axios':
              case 'element-plus':
              case '@element-plus':
                return '_' + arr[0]
              default:
                return '__vendor'
        chunkFileNames: 'static/js1/[name]-[hash].js',
        entryFileNames: 'static/js2/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
  plugins: [
    DefineOptions(),
    checker({ vueTsc: true }),
    terser(),
    compressPlugin({
      ext: '.gz',
      algorithm: 'gzip',
      // 是否删除原文件
      deleteOriginFile: false
    viteMockServe({
      // 配置mock位置
      mockPath: '/mock'
    // 引入 element-plus 样式
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`
    // 自动导入svg图片
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__'
    vue(),
    AutoImport({
      // 自动导入vue3的hook
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      // 自动导入elementPlus组件
      resolvers: [ElementPlusResolver()],
      // auto-import.d.ts生成的位置
      dts: 'src/auto-import.d.ts',
      // 解决eslint报错问题的配置项
      eslintrc: {
        enabled: true, // 默认 'false'
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true // 默认 'true'
    // 自动按需导入组件
    Components({
      // 要搜索组件的目录的相对路径
      dirs: ['src/components'],
      // 搜索子目录
      deep: true,
      // 组件的有效文件扩展名
      extensions: ['vue'],
      // 允许子目录作为组件的命名空间前缀。
      directoryAsNamespace: false,
      // 配置文件生成位置
      dts: 'src/components.d.ts',
      // 自动按需导入element-plus组件、importStyle: 'sass': 修改主题色添加这一行，使用预处理样式




    

      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
  css: {
    // elementPlus组件库，css编译，警告 @charset 规则放在第一位
    postcss: {
      plugins: [
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              // 去除elementPlus内部charset警告
              if (atRule.name === 'charset') {
                atRule.remove()
    preprocessorOptions: {
      scss: {
        // 公共样式文件 自定义的主题色
        additionalData: '@use "src/styles/var.scss" as *;'
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://xxx/',
        rewrite: (path) => path.replace(/^\/api/, ''),
        changeOrigin: true
4 集成 eslint
ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具，配置 typescript-eslint 代码规范
相关依赖介绍

@typescript-eslint/eslint-plugin （ eslint 插件，包含了各类定义好的检测 TS 代码的规范 ）
@typescript-eslint/parser （ eslint 的解析器，用于解析 TS, 从而检查和规范 TS ）
@vue/eslint-config-standard （  vue 标准的esLint规则集 ）

@vue/eslint-config-typescript （ ts 校验工具 ）

eslint （ eslint 核心代码库, js代码检测工具 ）

eslint-import-resolver-typescript （ 解决eslint-plugin-import不能识别目录别名问题  ）

eslint-plugin-import （ eslint检测import/export语法插件 ）

eslint-plugin-node （ 添加对node的eslint支持，也就是 npm run lint ）

eslint-plugin-promise （ eslint检测promise语法 ）

eslint-plugin-vue （  解析 Vue 的 eslint 插件 ）
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-standard @vue/eslint-config-typescript eslint eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue
.eslintrc.js 配置
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly'
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020
  settings: {
    // 解决路径引用ts文件报错的问题
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      // 解决tsconfig下的path别名导致eslint插件无法解决的bug
      typescript: {
        alwaysTryTypes: true
    // 忽略模块
    'import/core-modules': ['virtual:svg-icons-register', 'unplugin-auto-import/vite', 'unplugin-vue-components/vite', 'unplugin-vue-components/resolvers'],
    // 忽略导入
    'import/ignore': ['vue-router', 'vue']
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:@typescript-eslint/recommended',
    '@vue/standard',
    '@vue/typescript/recommended',
    './.eslintrc-auto-import.json'
  rules: {
    'vue/comment-directive': 'off',
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/member-delimiter-style': [
      'error',
        multiline: {
          delimiter: 'none'
        singleline: {
          delimiter: 'comma'
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    'prefer-regex-literals': 'off',
    'space-before-function-paren': 0,
    'vue/array-bracket-spacing': 'error',
    'vue/arrow-spacing': 'error',
    'vue/block-spacing': 'error',
    'vue/brace-style': 'error',
    'vue/camelcase': 'error',
    'vue/comma-dangle': 'error',
    'vue/component-name-in-template-casing': 'error',
    'vue/eqeqeq': 'error',
    'vue/key-spacing': 'error',
    'vue/match-component-file-name': 'error',
    'vue/object-curly-spacing': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'no-useless-escape': 'off',
    '@typescript-eslint/no-this-alias': [
      'error',
        allowDestructuring: true,
        allowedNames: ['self']
    'vue/attribute-hyphenation': 'off',
    'vue/custom-event-name-casing': 'off',
    'dot-notation': 'off',
    'vue/html-self-closing': [
      'error',
        html: {
          void: 'always',
          normal: 'always',
          component: 'always'
        svg: 'always',
        math: 'always'
    'vue/singleline-html-element-content-newline': 'off',
    'import/no-unresolved': [2, { commonjs: true, amd: true }],
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
    'promise/always-return': 'error',
    'promise/no-return-wrap': 'error',
    'promise/param-names': 'error',
    'promise/catch-or-return': 'off',
    'promise/no-native': 'off',
    'promise/no-nesting': 'warn',
    'promise/no-promise-in-callback': 'warn',
    'promise/no-callback-in-promise': 'warn',
    'promise/avoid-new': 'warn',
    'promise/no-return-in-finally': 'warn'
5 集成 prettier 格式化代码规范
prettier是一个固定的代码格式化程序，通过解析项目代码库，强制使用统一的风格的代码
相关依赖介绍

eslint-config-prettier (禁用与prettier样式规范有冲突的esLint规则)

eslint-plugin-prettier (将prettier作为esLint的规则来运行)
npm i -D eslint-config-prettier eslint-plugin-prettier
对比于 eslint而言，prettier 没有太多的配置项，在根目录上新建配置文件 .prettierrc.json
  "tabWidth": 2,
  "jsxSingleQuote": true,
  "jsxBracketSameLine": true,
  "printWidth": 180,
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "trailingComma": "none",
  "arrowParens": "always"
有些目录或者文件不需配置prettier，在根目录上新建忽略文件.prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
在 package.json 中添加脚本
  "scripts":{
    "prettier": "prettier --write .",
配合 vscode 代码格式化插件使用，完成自动保存格式化，vscode 编辑器 安装 Prettier - Code formatter，vscode编辑器配置文件 settings.json 增加以下配置
// 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  /** -------------------- 编辑器的默认格式化工具 -------------------- **/
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  /** -------------------- Prettier插件配置 -------------------- **/
  "prettier.enable": true, // 设置是否开启prettier插件，默认为true，即开启
  "prettier.semi": false, // 设置是否在每行末尾添加分号，默认为 true
  "prettier.singleQuote": true, // 设置格式化时，保持单引号，如果设置为true，则单引号会自动变成双引号
  "prettier.tabWidth": 2, // 设置每个tab占用多少个空格
  "prettier.printWidth": 160, // 设置每行可容纳字符数
  "prettier.useTabs": false, // 设置是否使用tab键缩进行，默认为false，即不使用
  "prettier.bracketSpacing": true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "prettier.jsxBracketSameLine": true, // 多行使用拖尾逗号（默认none）
  "prettier.arrowParens": "always", // 设置在jsx中，是否把'>' 单独放一行，默认为false，即单独放一行
  "prettier.trailingComma": "none"
prettierrc 配置参数介绍
// 每个tab相当于多少个空格（默认2）
"tabWidth": 2,
// 是否使用tab进行缩进（默认false）
"useTabs": false,
// 在jsx中使用单引号代替双引号（默认false）
"jsxSingleQuote": true,
// 给对象里的属性名是否要加上引号，默认为 as-needed，即根据需要决定，如果不加引号会报错则加，否则不加




    

"quoteProps": "as-needed",
// 单行代码超出100个字符自动换行（默认80）
"printWidth": 800,
// 使用单引号（默认false）(在jsx中配置无效, 默认都是双引号)
"singleQuote": true,
// 句末禁止使用分号（默认true）
"semi": false,
// 多行使用拖尾逗号（默认none）
"trailingComma": "none",
// 箭头函数只有一个参数的时候可以忽略括号（默认always）
"arrowParens": "always",
// 对象字面量的大括号间使用空格（默认true）
"bracketSpacing": true,
// 多行HTML元素放在最后一行的末尾（默认false）
"bracketSameLine": false,
// 不格式化vue文件，vue文件的格式化单独设置
"prettier.disableLanguages": ["vue"],
// 结尾是 \n \r \n\r auto
"prettier.endOfLine": "auto",
// 不让prettier使用tslint的代码格式进行校验
"prettier.tslintIntegration": false,
// 不让prettier使用stylelint的代码格式进行校验
"prettier.stylelintIntegration": false,
// 不让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": false,
// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.ignorePath": ".prettierignore"
需要注意，vue项目往往会配合 Vetur插件使用，主要是vue的语法高亮，其次是代码格式化，支持 prettier 等格式化器。

虽然有各种内置的格式化器，但是检测到本地有格式化插件，会优先使用本地格式化插件，
vscode编辑器配置文件 settings.json 增加以下配置
// settings.json 
  /** -------------------- vetur配置 -------------------- **/
  "vetur.format.options.tabSize": 2,
  "vetur.validation.script": false,
  "vetur.validation.interpolation": false,
  "vetur.validation.template": false,
  "vetur.ignoreProjectWarning": true,
  // 在函数名后面加上括号，类似这种形式 foo () {}
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 移除js语句的分号
  "javascript.format.semicolons": "remove",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  // 保持和 prettier 插件配置一致
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 160,
      "singleQuote": true, // 使用单引号
      "semi": false, // 末尾使用分号
      "tabWidth": 2,
      "arrowParens": "always",
      "bracketSpacing": true,
      "proseWrap": "preserve" // 代码超出是否要换行 preserve保留
6 集成 stylelint 样式规范
stylelint 是一个强大、先进的 CSS 代码检查器，通过内置规则自动修复大多数样式代码格式问题。
相关依赖介绍

stylelint （ stylelint 核心库 ）

stylelint-config-prettier （ 解决stylelint与prettier冲突 ）

stylelint-config-recommended-scss（ css属性顺序的规则, 配合stylelint-order使用 ）

stylelint-config-recommended-vue

stylelint-config-standard （ stylelint官方共享的标准规则集成 ）

stylelint-config-standard-scss

stylelint-order （ 格式化css文件时对代码的属性进行排序 ）
npm i -D stylelint stylelint-config-prettier stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss  stylelint-orde
在根目录上新建配置文件.stylelintrc.js 文件
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-html/vue',
    'stylelint-config-recommended-vue',
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-prettier'
  plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
  rules: {
    // 属性书写顺序
    'order/properties-order': [],
    // 类选择器的命名规则
    'selector-class-pattern': [
      '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
        message: 'Expected class selector to be kebab-case'
    // at-rule-no-unknown: 屏蔽一些scss等语法检查
    'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'extend', 'content', 'include', 'forward', 'if'] }],
    // 要求或禁止在註釋之前有空行
    'comment-empty-line-before': [
      'always',
        except: ['first-nested'],
        ignore: ['stylelint-commands']
    // 每个样式规则前后都有空行，除了第一条规则与规则前有注释
    'rule-empty-line-before': [
      'always-multi-line',
        except: ['first-nested'],
        ignore: ['after-comment']
    // "@" 语句之前都有空行，但是忽略 "@" 语句在代码块中间与同个非代码块 "@" 语句之间的空行这两种情况
    'at-rule-empty-line-before': ['always', { ignore: ['after-comment', 'inside-block', 'blockless-after-same-name-blockless'] }],
    // 忽略伪类选择器 ::v-deep
    'selector-pseudo-element-no-unknown': [
      true,
        ignorePseudoElements: ['/./', 'v-deep', '-webkit-']
    // alpha 值的百分比或数字表示法
    'alpha-value-notation': 'number',
    // 使用rgba
    'color-function-notation': 'legacy',
    // 在声明之前要求允许空行（块级元素内生效，如：{x: x}）
    'declaration-empty-line-before': 'never',
    // scss 变量名忽略警告
    'scss/dollar-variable-pattern': [/./, { ignore: 'global' }],
    // mixin变量名支持全部字符
    'scss/at-mixin-pattern': /.+/,
    // 颜色值不简写
    'color-hex-length': 'long',
    // 单引号
    'string-quotes': 'single',
    //  指定at-rules小写或大写的名字
    'at-rule-name-case': 'lower',
    // 禁止零长度的单位（可自动修复）
    'length-zero-no-unit': true,
    // 禁止在简写性中使用冗余值
    'shorthand-property-no-redundant-values': true,
    // 禁止出现空块
    'block-no-empty': true,
    // 禁止空注释
    'comment-no-empty': true,
    // 要求或禁止 url 使用引号
    'function-url-quotes': 'always',
    // 小数不带0
    'number-leading-zero': 'always',
    // 禁止声明快重复属性
    'declaration-block-no-duplicate-properties': true,
    // 禁止使用可以縮寫卻不縮寫的屬性。
    'declaration-block-no-redundant-longhand-properties': true,
    // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'no-descending-specificity': true,
    // 限制一个选择器中 ID 选择器的数量
    'selector-max-id': 0,
    // 最大嵌套深度
    'max-nesting-depth': 5,
    // @import中不包含.scss扩展名
    'scss/at-import-partial-extension': 'always',
    // 指定缩进
    indentation: 2
在根目录上新建忽略配置文件.stylelintignore文件
src/styles/element.scss
src/styles/index.scss
node_modules
7 自动化 husky + lint-staged 对代码进行校验
在代码提交前，一般都需使用 eslint、 prettier 、 stylelint 等工具，对当前的代码仓库进行一次格式化，然后在提交时，校验一下 commit 是否符合规范。主要需要使用到以下工具：husky、lint-staged、commit-msg
husky

husky 继承了 git 下所有的钩子, 对 git 的 commit 操作进行校验，当我们进行 commit 操作时，会触发 husky 的 hook
lint-staged

对暂存的 git 文件运行 lint
commit-msg

对 git commit 格式进行校验
在 package.json 添加 prepare，prepare 会在 npm i 之后触发，首次使用可手动触发一下prepare
"scripts": {  "prepare": "husky install"  }
生成 hook 相关文件，并注入钩子命令，执行命令
 npx husky add .husky/pre-commit "npm run lint-staged"  
 或通过 npm i husky-init  执行初始化页面  
如果commit没触发钩子，原因是hook文件权限不足，需添加文件操作权限 chmod +x .husky/pre-commit
安装 npm i lint-staged, 并在 package.json 填写脚本
"lint-staged": {
 "**/*.{vue,js,jsx,tsx,ts,less,md,json}": "npm run prettier"
配置 package.json
  "script":{
     "prepare": "husky install"
   "lint-staged": {
     "**/*.{vue,js,jsx,tsx,ts,less,md,json}": "npm run prettier"
安装 @commitlint/cli 和 @commitlint/config-conventional，执行以下命令
npm i @commitlint/cli @commitlint/config-conventional -D
添加 commit-msg 文件，执行以下命令
npx husky add .husky/




    
commit-msg 'yarn --no-install commitlint --edit "$1"'
新建 commitlint.config.js 配置文件
module.exports = { extends: ['@commitlint/config-conventional'] }
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  "eslint.validate": ["vue", "html", "javascript", "typescript", "javascriptreact", "typescriptreact"],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  "eslint.format.enable": true,
  "prettier.enable": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.printWidth": 800,
  "prettier.useTabs": false,
  "prettier.bracketSpacing": true,
  "prettier.jsxBracketSameLine": true,
  "prettier.arrowParens": "always",
  "prettier.trailingComma": "none",
  "vetur.format.options.tabSize": 2,
  "vetur.validation.script": false,
  "vetur.validation.interpolation": false,
  "vetur.validation.template": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.semicolons": "remove",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "stylelint.enable": true,
  "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"]
复制代码
  
分类：
 前端
 
 
   
相关推荐
 
  
        小新爱拉粑粑
      
 
   如何从零搭建  vite2 + vue3+antdv+ ts
 
如何从零搭建 vite2 + vue3+antdv+ ts 初始化项目 初始配置 vite.config.ts 初始化视图部分操作 初始化路由 router v4.x 初始化 store 初始化 ax
 
 78
 
 
        Vue.js
      
 
   vue3.0 + vite + ts 完成自动导入 vue API 和 自动导入组件
 
插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的) npm i unplugin-auto-import unplugin-vue-components -D 使用, 下面是最简
 
 81
 
 
      
 
   vue3+vite+ts项目
 
https://blog.csdn.net/xixihahakkyy/article/details/128965295 1.问题 在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然
 
 47




    
 
 
      
 
   vite4+vue3+ts入手
 
vite出了这么长时间，我还没入手呢，还在用vue-cli系列，现在赶紧练练手首先 pnpm create vite 初始化项目
 
 127
 
 
        用户9904501778009
      
 
   vue3+vite安装less模块
 
本文章向大家介绍vite+vue3中使用less，主要内容包括一 . vite.config.ts 配置、二: 安装less、三: 接着正常使用、使用实例、应用技巧、基本知识点总结和需要注意事项，具有
 
 55
 
 
        18037128621
      
 
   vue3+vite 安装和配置less
 
vue3+vite 安装和配置less 1、 安装 2、 vite.config.js配置 2、使用
 
 3194
 
 
      
 
   手把手教你搭建`Vue3项目企业级框架`
 
使用vite、eslint、prettier、husky、commitlint、lint-staged、stylelint等工具，手把手搭建Vue3项目企业级框架
 
 87
 
 
        压其智历胜之
      
 
   vite+vue3+ts 前端后台项目学习笔记




    
 
vite+vue3+ts 前端后台项目学习笔记，主要是自己在学习前端项目过程的一些笔记，方便下次新建项目
 
 250
 
 
        前端小攻匠
      
 
   Vite+Vue3+TypeScript+Element Plus (九) 搭建企业级轻量框架实践
 
零基础搭建 Vite+Vue3+TypeScript+Element Plus企业级轻量框架教程 Vite系列教程之Env 篇 (九) 💡 极速的服务启动 ⚡️ 轻量快速的热重载 📦 优化的构建
 
 698
 
 
      
 
   Vite + TypeScript + Ant Design Vue 搭建后台管理系统（三）
 
从零开始搭建后台管理系统 采用的技术是Vite2，Vue3，Vue Router 4.x，Vuex 4.x，Ant Design Vue 2.x，Typescript
 
 3353
 
 
        程序员优雅哥
        Vue.js
      
 
    Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）
 
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情 在项目或产品的迭代过程中，通常会有多套环境，常见的有： dev：开发环境 sit：集成测试环境 uat：
 
 131
 
 
        用户4070601636071
        Vue.js
      
 
   vite+vue3+ts+pinia
 
vite+vue3+ts+pinia 项目 Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的
 
 32
 
 
        Vue.js
      
 
   基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台模板
 
最新的技术栈统一的技术规范权限方案（路由，菜单，操作）支持多语言数据mock兼容PC、平板和手机github地址：https://github.com/ziping-li/ant-design-vue
 
 1633
 
 
      
 
   Vite 插件unplugin-auto-import使用 eslint冲突
 
1.配置 2.使用过程中会自动引入Vue相关组合Api，这时候Eslint就会报错    现在你将步骤1中的 eslintrc中enabled设置为true，保存之后会生成 .eslintrc-aut
 
 632
 
 
          
 
 
  
 
 
友情链接：
 

        aes加密文件 java
        java <kv>
        python 输入任意两点
    在掘金摸鱼的瓜皮
        web前端开发工程师