1.配置项目启动自动打开浏览器

在package.json文件中：

"scripts": {
    "dev": "vite", // 项目初始化之后默认是这样的
    -->"dev": "vite --open", // 改成这样，加上--open,这样是默认打开浏览器页面
 },

2. 项目中eslint校验工具的配置

• 首先安装eslint

pnpm i eslint -D

• 生成配置文件: eslint.cjs

npx eslint --init

3.安装vue3环境代码校验插件并配置eslint规则

• 安装vue3环境代码校验插件

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

• 配置eslint规则:安装完后需要更改eslint.cjs文件

module.exports= {
	env: { // 安装环境
		browser: true, // 浏览器端
		es2021: true,
		node: true,
		jest: true,
	},
	/* 指定如何解析语法 */
	parser: 'vue-eslint-parser',
	/* 优先级低于 parse 的语法解析配置 */
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
		parser: '@typescript-eslint/parser',
		jsxPragma: 'React',
		ecmaFeatures: {
			jsx: true,
		}
	},
	/* 继承已有的规则 */
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended',
	],
	plugins: ['vue', '@typescript-eslint'],
	/**
	*"off"或0  ==》 关闭规则
	*"warn"或1 ==》 打开的规则作为警告（不影响代码执行）
	*"error"或2 ==》 规则作为一个错误（代码不能执行，界面报错）
	*/
	rules: {
		// eslint (https://eslint.bootcss.com/docs/rules/)
		'no-var': 'error', // 要求使用 let 或 const 而不是 var
		'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-unexpected-multiline': 'error', // 禁止空余的多行
		'no-useless-escape': 'off', // 禁止不需要的转义字符

		// typeScript (https://typescript-eslint.io/rules)
		'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
		'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用@ts-ignore
		'@typescript-eslint/no-explicit-any': 'off', // 禁止使用any类型
		'@typescript-eslint/no-non-null-assertion': 'off',
		'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript模块和
		'@typescript-eslint/semi': 'off',

		// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
		'vue/multi-word-component-names': 'off', // 要求组件名称始终为"-"连接的单词
		'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>
		'vue/no-mutating-props': 'off', // 不允许组件props的改变
		'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式 
	}
}

• 项目根目录下创建点/ .eslintignore忽略文件, 哪些文件夹下面的不需要eslint代码检测
  .eslintignore文件前面有个.点号

dist
node_modules

• 运行脚本：package.json新增两个运行脚本

"scripts": {
	"lint": "eslint src", // 运行这个指令时去校验src文件夹里面的文件
	"fix": "eslint src --fix", // 把不符合规则的语法纠正
}

4.项目中prettier格式化工具配置，prettierrc.json添加规则

eslint保证js代码质量，prettier保证代码美观。检测语法的工具，属于格式化工具

• 安装依赖包

pnpm install -D eslint-plugin-prettier eslint-config-prettier

• 根项目目录下创建prettierrc.json文件添加规则

{
	"singleQuote": true, // 要求字符串都是单引号
	"semi": false, // 语句后面加分号
	"bracketSpacing": true, 
	"htmlWhitespaceSensitivity": "ignore",
	"endOfLine": "auto",
	"trailingComma": "all",
	"tabWith": 2 // 缩进
}

• 项目根目录下创建 .prettierignore忽略文件:哪些文件格式化的时候不会被格式化

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

5.项目中stylelint工具配置

stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理写法，指定css书写顺序等。

• 我们项目中使用scss作为预处理器，安装以下依赖：

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

• .stylelintrc.cjs配置文件
  官网：https://stylelint.bootcss.com/

module.exports = {
	extends: [
		'stylelint-config-standard', // 配置stylelint扩展插件
		'stylelint-config-html/vue', // 配置vue中template样式格式化
		'stylelint-config-standard-scss', // 配置stylelint scss插件
		'stylelint-config-recommended-vue/scss', // 配置vue中scss样式格式化
		'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件
		'stylelint-config-prettier', // 配置stylelint和prettierper兼容
	],
	overrides: [
		{
			files: ['**/*.(scss|css|vue|html)'],
			customSyntax: 'postcss-scss',
		},
		{
			files: ['**/*.(html|vue)'],
			customSyntax: 'postcss-html',
		}
	],
	ignoreFiles: [
		'**/*.js',
		'**/*.jsx',
		'**/*.tsx',
		'**/*.ts',
		'**/*.json',
		'**/*.md',
		'**/*.yaml',
	],
	/**
	* null  => 关闭该规则
	* always => 必须
	*/
	rules: {
		'value-keyword-case': null, // 在css中使用v-bind，不报错
		'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖
		'function-url-quotes': 'always', // 要求或禁止URL的引号"always"(必须加上引号)
		'no-empty-source': null, // 关闭禁止空源码
		'selector-class-pattern': null, // 关闭强制选择器类名的格式
		'property-no-unknown': null, // 禁止未知的属性(true为不允许)
		'block-opening-brace-space-before': 'always', // 大括号之前必须有一个空格或不能
		'value-no-vendor-prefix': null, // 关闭属性值前缀 --webkit-box
		'property-no-vendor-prefix': null, // 关闭属性前缀 -webkit-mask
		'selector-pseudo-class-no-unknow': [
			// 不允许未知的选择器
			true,
			{
				ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改
			}
		]
	}
}

• 根目录下创建.stylelintignore忽略文件

/node_modules/*
/dist/*
/html/*
/public/*

• 添加运行脚本，在package.json中写

"scripts": {
	"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

最后配置统一的prettier来格式化我们的js和css，html代码
当我们运行pnpm run format的时候，会把代码直接格式化

  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
   	"format": "prettier --write \"./**/*.{html,vue,ts,json,md}\"",
   	"lint:eslit": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
  },

6.项目配置husky

以上配置已经集成好了代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用，所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format来自动的格式化我们的代码

• 安装husky

pnpm install -D husky

安装好后会自动再package.json生成一个命令

"scripts": {
    ...
    "prepare": "husky install" // 生成了新命令
  },

再跑下pnpm run prepare安装husky依赖

• 执行

npx husky-init

会在根目录下生成一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行
在.husky/pre-commit文件添加如下命令：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format

当我们对代码进行commit操作的收，就会执行命令，对代码进行格式化，然后再提交。

7.项目commitLint配置