使用vite创建vue3项目及项目的配置 | 环境准备 ESLint配置 prettier配置 husky配置 项目继承
文章目录
- 使用vite创建vue3项目及项目的配置
-
- 1.环境准备
- 2.项目配置
-
- ESLint校验代码工具配置 - js代码检测工具
-
- 1.安装ESLint到开发环境 devDependencies
- 2.生成配置文件:`.eslint.cjs`**
- 3.安装vue3环境代码校验插件**
- 4. 修改.eslintrc.cjs配置文件
- 5.生成ESLint忽略文件
- 6.在package.json新增运行脚本
- prettier配置 - 格式化检测工具
-
- 1.安装prettier依赖包
- 2.prettierrc.json添加规则
- 3. 新建.prettierignore忽略文件
- 4. 在package.json新增运行脚本
- husky配置 提交代码前进行的操作
- 配置commitlint 统一提交规范
- 3.项目集成
-
- 3.1 集成element-plus ui组件库
- 3.2 src文件夹别名配置
- 3.3 环境变量的配置
- 3.4 SVG图标配置
使用vite创建vue3项目及项目的配置
1.环境准备
使用vite搭建项目，vite需要nodejs版本14.18+、16+
- node v18.16.1
- pnpm 8.7.4
pnpm:performant npm(高性能的npm)由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。
pnpm安装指令
npm i -g pnpm
创建项目
pnpm create vite
cd # 进入项目
pnpm install # 安装依赖 + @vitejs/plugin-vue 4.3.4 + typescript 5.2.2 + vite 4.4.9 + vue-tsc 1.8.10
pnpm run dev # 运行项目
打开项目，需要手动在浏览器输入地址。
修改package.json文件的字段 "dev": "vite --open"，这样使用pnpm run dev命令会自动打开浏览器。
2.项目配置
VSCode 有对应插件Prettier - Code formatter、ESlint、Stylelint可以实现相同的功能
以下配置适用于协同开发的大项目配置。
ESLint校验代码工具配置 - js代码检测工具
eslint:提供一个插件化的javaScript代码检测工具
1.安装ESLint到开发环境 devDependencies
//完整写法
pnpm install --save-dev eslint
//简写
pnpm i eslint -D
2.生成配置文件:.eslint.cjs**
npx eslint --init
.eslint.cjs文件
// 对外暴露的配置对象
module.exports = {
"env": { // eslint的工作环境
"browser": true,
"es2021": true // 校验js语法
},
"extends": [ //规则的继承
//全部规则默认是关闭的，这个配置项会开启推荐规则(推荐需要遵守的规则)
"eslint:recommended",
//vue3语法规则
"plugin:@typescript-eslint/recommended",
//ts语法规则
"plugin:vue/vue3-essential"
],
"overrides": [ //为特定类型的文件指定处理器
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
//指定解析器选项
"parserOptions": {
"ecmaVersion": "latest", //校验ECMA最新版本
"parser": "@typescript-eslint/parser",//指定解析器，当前表示ts解析器，还可以选择Babel=ESLint babel解析器、默认Esprima解析器
"sourceType": "module"// 设置为
},
// ESLint支持使用第三方插件，在使用插件之前，必须使用npm安装
"plugins": [
"@typescript-eslint",
"vue"
],
//ESLint校验规则
"rules": {
}
}
3.安装vue3环境代码校验插件**
# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南)
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",
# 指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
4. 修改.eslintrc.cjs配置文件
module.exports = {
//....
/* 规则的状态
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
"rules": {
// eslint（https://eslint.bootcss.com/docs/rules/）
// key为规则，右侧为规则的状态
'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', // 防止