从零搭建 Vite + Vue3 + TypeScript 规范基础项目：踩坑与配置指南

yarn create vite my-vue-app --template vue

yarn add vue-router@4 

import { createRouter,createWebHashHistory, RouteRecordRaw} from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
+  resolve: {
+    alias: [
+    {
+       find: '@',
+       replacement: path.resolve(__dirname, 'src'),
+     },
+   ],
+  },
})

yarn add @types/node -D

"compilerOptions":{
+  allowSyntheticDefaultImports:true
}

yarn add pinia

import { defineStore }from 'pinia'
const useStore = defineStore('main',{
    state:()=>{
        return {
            counter: 0,
            name:'RadiomM'
        }
    },
    actions:{
        reset(){
            this.$reset()
        }
    }
})
export default useStore

import { createApp } from 'vue'
import router from './router'
import { createPinia}  from 'pinia'
import App from './App.vue'
createApp(App).use(createPinia()).use(router).mount('#app')

npx eslint --init

module.exports = {
  env: {
    browser: true,
    es2021: true,
+   'vue/setup-compiler-macros': true， // 这是为了兼容defineProps这种API的
  },
  extends: [
-   'plugin:vue/essential',
+   'plugin:vue/vue3-recommended', // 兼容vue3语法规范
    'airbnb-base',
  ],
+ parser: 'vue-eslint-parser' // 这个插件其实已经安装了，用来解析template语法
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};

 'linebreak-style':['error','windows']

yarn add eslint-plugin-prettier eslint-config-prettier prettier -D

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
+   'plugin:prettier/recommended',  
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
+    'prettier/prettier':'error', 
+    'linebreak-style':['erro','window']
  },
};

module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: true, // 使用单引号（默认false）
  semi: false, // 声明结尾使用分号(默认true)
  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  bracketSameLine: false,
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
  endOfLine: 'crlf', // 添加这个属性时，可以将eslint中的linebreak-style删除。
}

"scripts":{
    "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",
}

yarn lint:script

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
         },
    },

yarn add vite-plugin-eslint -D

import viteEslint from 'vite-plugin-eslint';
// 具体配置 
{ 
    plugins: [ 
    // 省略其它插件 
    viteEslint(), 
    ]
}

 'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],

yarn add -D eslint-import-resolver-typescript

  settings: {
    'import/resolver': {
      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
    },
  },

module.exports = {
  env: {
    browser: true,
    es2021: true,
    'vue/setup-compiler-macros': true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'prettier/prettier': 'error',
    'linebreak-style': ['error', 'windows'],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+   'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
  },
+  settings: {
+    'import/resolver': {
+      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
+    },
+  },
}

yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue -D

module.exports = {
    // 注册 stylelint 的 prettier 插件
    plugins: ['stylelint-prettier'],
    // 继承一系列规则集合
    extends: [
      // standard 规则集合
      'stylelint-config-standard',
      // standard 规则集合的 scss 版本
      'stylelint-config-standard-scss',
      // 样式属性顺序规则
      'stylelint-config-recess-order',
      // 接入 Prettier 规则
      'stylelint-config-prettier',
      'stylelint-prettier/recommended',
      'stylelint-config-recommended-vue'

    ],
    // 配置 rules
    rules: {
      // 开启 Prettier 自动格式化功能
      'prettier/prettier': true,
      // "no-empty-source": null  // style不能是空
    }
  };

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
+           "source.fixAll.stylelint": true  
         },
    },
+    "stylelint.validate": ["css", "less", "scss","vue"], 

script: {
  "lint:style": "stylelint --fix \"src/**/*.{css,scss}\""
}

yarn add @amatlash/vite-plugin-stylelint -D

import viteStylelint from '@amatlash/vite-plugin-stylelint'; 

{ plugins: 
    [ 
    // 省略其它插件 
    viteStylelint({ 
    // 对某些文件排除检查 
    exclude: /node_modules/ }), 
    ] 
}

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import viteEslint from 'vite-plugin-eslint'
import viteStylelint from '@amatlash/vite-plugin-stylelint'

export default defineConfig({
  plugins: [
    vue(),
    viteEslint(),
    viteStylelint({
      // 对某些文件排除检查
      exclude: /node_modules/,
    }),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
})

yarn add husky -D

{ 
    "scripts": { 
        // 会在安装 npm 依赖后自动执行 
        "postinstall": "husky install" 
    } 
}

npx husky add .husky/pre-commit "npm-run-lint"

yarn add -D lint-staged

  "lint-staged": {
    "**/*.{js,jsx,tsx,ts}": [
      "npm run lint:script",
      "git add ."
    ],
    "**/*.scss": [
      "npm run lint:style",
      "git add ."
    ]
  }

npx --no -- lint-staged

yarn add commitlint @commitlint/cli @commitlint/config-conventional -D

module.exports = { extends: ["@commitlint/config-conventional"] };

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"