详细教程搭建 vue 项目

初始化

pnpm create vite my-vue-app

选择 vue + ts 项目

pnpm i

配置 prettier

pnpm add --save-dev --save-exact prettier

避免 prettier 和 eslint 冲突

pnpm add --save-dev eslint-plugin-prettier eslint-config-prettier

// prettier.config.js
export default {
  tabWidth: 2, // 缩进
  useTabs: true, // 缩进方式
  semi: false, // 语句结尾是否加分号
  singleQuote: true, // 单引号
  printWidth: 120, // 换行长度
  arrowParens: "always", // 箭头函数参数
  bracketSpacing: true, // 对象花括号内是否加空格
  endOfLine: "auto", // 换行符
  vueIndentScriptAndStyle: true, // vue文件内script和style标签缩进
};

配置 eslint

pnpm create @eslint/config

// eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import pluginPrettierRecommendedConfigs from "eslint-plugin-prettier/recommended";
import parserVue from "vue-eslint-parser";
export default [
  // eslint 默认推荐规则
  pluginJs.configs.recommended,
  // ts 默认推荐规则
  ...tseslint.configs.recommended,
  // vue3 基础推荐规则
  ...pluginVue.configs["flat/recommended"],
  // prettier 默认推荐规则
  pluginPrettierRecommendedConfigs,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2020,
        ...globals.node,
      },
      ecmaVersion: 2020,
      // 解决 Parsing error: Unexpected token )eslint 报错
      parser: parserVue,
      parserOptions: {
        parser: tseslint.parser,
      },
    },
  },
];

在 Vite 中引入 ESLint 插件，以便在开发阶段发现问题。

pnpm add -D vite-plugin-eslint

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// @ts-expect-error 由于 vite-plugin-eslint 库有点落后，导致 vite 高版本不能正确的识别 cjs 模块
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue(), eslintPlugin()],
})

配置 stylelint

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

// .styleintrc.js
export default {
	// 继承推荐规范配置
	extends: [
		'stylelint-config-standard',
		'stylelint-config-recommended-scss',
		'stylelint-config-recommended-vue/scss',
		'stylelint-config-html/vue',
		'stylelint-config-recess-order',
	],
	// 指定不同文件对应的解析器
	overrides: [
		{
			files: ['**/*.{vue,html}'],
			customSyntax: 'postcss-html',
		},
		{
			files: ['**/*.{css,scss}'],
			customSyntax: 'postcss-scss',
		},
	],
	// 自定义规则
	rules: {
		// 允许 global 、export 、v-deep等伪类
		'selector-pseudo-class-no-unknown': [
			true,
			{
				ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep'],
			},
		],
	},
}

.stylelintignore

dist
node_modules
public
.husky
.vscode

配置命令

"script": {
    "lint:eslint": "eslint --fix",
	 "lint:format": "prettier --write --log-level warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
	 "lint:stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --fix"
}

配置vscode

// .vscode/settings.json
{
	"files.eol": "\n", // 文件结束符
	"eslint.format.enable": true, // 开启保存时自动修复
	"editor.codeLens": true, // 显示行号
	"editor.tabSize": 2, // 重新设定tabsize
	"editor.detectIndentation": false, // 禁用自动检测缩进
	// 将prettier设置为默认格式化程序(在编辑器中有可能被其他Formatter占用，所以将prettier设置为默认Formatter)
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	// 关闭js/ts的默认format,统一用eslint进行格式化（tslint已经不维护了，所以转eslint吧）
	"javascript.format.enable": false,
	"typescript.format.enable": false,
	// 保存时自动格式化 (根据根目录下'.prettierrc文件配置项')
	"editor.formatOnSave": true,
	// Enable per-language
	"[html]": {
		"editor.defaultFormatter": "vscode.html-language-features",
		"editor.formatOnSave": true
	},
	"[vue]": {
		"editor.formatOnSave": true, // 交给 eslint
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	// 什么类型的文件需要遵守stylelint规则
	"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
	// 为ESLint启用"保存时自动修复"，并且仍然具有格式和快速修复功能
	"editor.codeActionsOnSave": {
		"source.fixAll": "always",
		"source.fixAll.stylelint": "always"
	},
	"[markdown]": {
		"editor.defaultFormatter": null,
		"editor.formatOnSave": false
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
		"editor.defaultFormatter": "stylelint.vscode-stylelint"
	}
}

配置 husky 和 commitlint

husky v9 目前对 windows 支持还有些bug，所以选择 v8 版本

pnpm i [email protected] -D

配置 package.json

"scripts": {
   ...,
	"prepare": "husky install"
},

pnpm run prepare

添加 pre-commit hooks

pnpm i lint-staged -D

添加 package.json 配置：

{
    "script":{
        "lint:eslint": "eslint --fix",
        "lint:format": "prettier --write --log-level warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
        "lint:stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --fix",
        "lint:lint-staged": "lint-staged",
    },
    "lint-staged": {
		"*.{js,ts,jsx,tsx,vue}": [
			"pnpm run lint:eslint",
			"pnpm run lint:format"
		],
		"*.{css,scss,sass,less,vue,html}": [
			"pnpm run lint:stylelint"
		]
	},
}

然后，执行下列命令创建一个 pre-commit hook：

npx husky add .husky/pre-commit "pnpm run lint:lint-staged"

添加 commit-msg hook

pnpm install -D commitlint @commitlint/cli @commitlint/config-conventional

在项目根目录下新建 commitlint.config.cjs 配置文件，并执行命令添加 commit-msg hook：

npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"

接下来，在 commitlint.config.cjs 中设置提交信息规范，推荐使用 Angular 规范：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'build', // 编译相关修改，例如发布版本、项目构建或者依赖的改动
      'feat', // 添加新功能
      'fix', // 修复bug
      'update', // 更新某功能
      'refactor', // 重构
      'docs', // 文档
      'chore', // 构建过程或辅助工具的变动，如添加依赖等
      'style', // 不影响代码运行的变动
      'revert', // 回滚到上一个版本
      'perf', // 性能优化
      'test', // 单元测试、集成测试等
    ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 74],
  },
};