1.1 编辑器统一编码规范
# http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
1.2 prettier格式化
- 安装，后者是为了解决雨eslint得冲突
npm i prettier eslint-config-prettier -D
- 配置文件
// .prettierrc
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
- 忽略文件
// .prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
- 配置脚本命令
// package.json
"scripts": {
// ...
"prettier": "prettier --write ."
},
1.3 eslint
- 安装
npm i -D eslint-plugin-prettier eslint eslint-plugin-vue@latest @typescript-eslint/parser @typescript-eslint/eslint-plugin
- 配置文件
// .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
es2021: true,
},
parser: 'vue-eslint-parser',
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
// eslint-config-prettier 的缩写
'prettier',
],
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
// eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
plugins: ['vue', '@typescript-eslint', 'prettier'],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'no-var': 'error',
'prettier/prettier': 'error',
// 禁止出现console
'no-console': 'warn',
// 禁用debugger
'no-debugger': 'warn',
// 禁止出现重复的 case 标签
'no-duplicate-case': 'warn',
// 禁止出现空语句块
'no-empty': 'warn',
// 禁止不必要的括号
'no-extra-parens': 'off',
// 禁止对 function 声明重新赋值
'no-func-assign': 'warn',
// 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
'no-unreachable': 'warn',
// 强制所有控制语句使用一致的括号风格
curly: 'warn',
// 要求 switch 语句中有 default 分支
'default-case': 'warn',
// 强制尽可能地使用点号
'dot-notation': 'warn',
// 要求使用 === 和 !==
eqeqeq: 'warn',
// 禁止 if 语句中 return 语句之后有 else 块
'no-else-return': 'warn',
// 禁止出现空函数
'no-empty-function': 'warn',
// 禁用不必要的嵌套块
'no-lone-blocks': 'warn',
// 禁止使用多个空格
'no-multi-spaces': 'warn',
// 禁止多次声明同一变量
'no-redeclare': 'warn',
// 禁止在 return 语句中使用赋值语句
'no-return-assign': 'warn',
// 禁用不必要的 return await
'no-return-await': 'warn',
// 禁止自我赋值
'no-self-assign': 'warn',
// 禁止自身比较
'no-self-compare': 'warn',
// 禁止不必要的 catch 子句
'no-useless-catch': 'warn',
// 禁止多余的 return 语句
'no-useless-return': 'warn',
// 禁止变量声明与外层作用域的变量同名
'no-shadow': 'off',
// 允许delete变量
'no-delete-var': 'off',
// 强制数组方括号中使用一致的空格
'array-bracket-spacing': 'warn',
// 强制在代码块中使用一致的大括号风格
'brace-style': 'warn',
// 强制使用骆驼拼写法命名约定
camelcase: 'warn',
// 强制使用一致的缩进
indent: 'off',
// 强制在 JSX 属性中一致地使用双引号或单引号
// 'jsx-quotes': 'warn',
// 强制可嵌套的块的最大深度4
'max-depth': 'warn',
// 强制最大行数 300
// "max-lines": ["warn", { "max": 1200 }],
// 强制函数最大代码行数 50
// 'max-lines-per-function': ['warn', { max: 70 }],
// 强制函数块最多允许的的语句数量20
'max-statements': ['warn', 100],
// 强制回调函数最大嵌套深度
'max-nested-callbacks': ['warn', 3],
// 强制函数定义中最多允许的参数数量
'max-params': ['warn', 3],
// 强制每一行中所允许的最大语句数量
'max-statements-per-line': ['warn', { max: 1 }],
// 要求方法链中每个调用都有一个换行符
'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 3 }],
// 禁止 if 作为唯一的语句出现在 else 语句中
'no-lonely-if': 'warn',
// 禁止空格和 tab 的混合缩进
'no-mixed-spaces-and-tabs': 'warn',
// 禁止出现多行空行
'no-multiple-empty-lines': 'warn',
// 禁止出现;
semi: ['warn', 'never'],
// 强制在块之前使用一致的空格
'space-before-blocks': 'warn',
// 强制在 function的左括号之前使用一致的空格
// 'space-before-function-paren': ['warn', 'never'],
// 强制在圆括号内使用一致的空格
'space-in-parens': 'warn',
// 要求操作符周围有空格
'space-infix-ops': 'warn',
// 强制在一元操作符前后使用一致的空格
'space-unary-ops': 'warn',
// 强制在注释中 // 或 /* 使用一致的空格
// "spaced-comment": "warn",
// 强制在 switch 的冒号左右有空格
'switch-colon-spacing': 'warn',
// 强制箭头函数的箭头前后使用一致的空格
'arrow-spacing': 'warn',
'no-var': 'warn',
'prefer-const': 'warn',
'prefer-rest-params': 'warn',
'no-useless-escape': 'warn',
'no-irregular-whitespace': 'warn',
'no-prototype-builtins': 'warn',
'no-fallthrough': 'warn',
'no-extra-boolean-cast': 'warn',
'no-case-declarations': 'warn',
'no-async-promise-executor': 'warn',
},
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
}
- 配置脚本命令
// package.json
"script": {
"lint": "eslint --fix --ext .js,.vue,.ts src",
}
1.4 husky提交前修复
- 初始化及安装
npx husky-init && npm i
- 配置pre-commit命令,进行eslint修复
// .husky/pre-commit.sh
npm run lint
- 使用lint-stage修复暂存区
// package.json
"lint-staged": {
"src/**/*.{jsx,txs,ts,js,json,css,md,vue}": [
"prettier --write ."
]
},
// .husky/pre-commit.sh
npx lint-staged
1.5 commitzen提交内容规范
- 安装
npm i -D commitizen
- 初始化及日志集成
npx commitizen init cz-conventional-changelog --save-dev --save-exact
- 初始化完成
// package.json
+ "config": {
+ "commitizen": {
+ "path": "./node_modules/cz-conventional-changelog"
+ }
+ }
- 提交使用
npx cz
- 脚本命令添加
"scripts": {
// ...
+ "commit":"cz"
},
1.6 手动提交限制
- 安装
npm i @commitlint/config-conventional @commitlint/cli -D
- 创建配置文件
// commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional']
}
- 使用husky生成commit-msg
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
1.7 配置路径别名
- vite配置
// vite.config.ts
import path from 'path'
export default defineConfig({
// ... code
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
- ts配置
// tsconfig.json
"compilerOptions": {
// ....
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"]
}
},
1.8 导入集成
这样我们就不用每次都手动引入vue相关得包了
- 安装
npm i unplugin-auto-import -D
- 使用
import AutoImport from 'unplugin-auto-import/vite' //注意后面有个/vite
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const root = process.cwd()
const env = loadEnv(mode, root)
return {
plugins: [
AutoImport({
imports: ['vue', 'vue-router'],
// 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
dts: 'src/auto-import.d.ts'
}),
]
}
})
1.9 添加scss
vite自动帮我们配置了在之前webpack所需要得配置，我们只需要安装就可以立即使用了
npm i sass
1.10 安装路由
- 安装
npm i vue-router@next
- 配置路由
// router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { loadView } from './view-import'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: loadView('login/LoginIndex')
},
{
path: '/main',
component: loadView('main/MainIndex')
}
]
const router = createRouter({
routes,
history: createWebHashHistory()
})
export default router
// router/view-import.ts
const modules = import.meta.glob('../views/**/**.vue')
export const loadView = (path: string) => {
return modules['../views/' + path + '.vue']
}
- main.ts中注册
// main.ts
import router from '@/router'
const app = createApp(App)
app.use(router)
1.11 安装pinia
- 安装
npm i pinia
- 注册
// main.ts
import setupPinia from './store'
setupPinia(app)
// store/index.ts
import { createPinia } from 'pinia'
import type { App } from 'vue'
const setupPinia = (app: App) => {
app.use(createPinia())
}
export default setupPinia
1.12 安装element-plus
- 安装
npm i element-plus
- 按需自动导入
npm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
- 配置
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
ElementPlus()
],
}
1.13 安装axios
- 安装
npm i axios
- 创建环境变量
// 在根目录下创建env文件
// .env.test
VITE_AXIOS_BASE_URL = 'I am test base'
VITE_STR = 'test'
// .env.prod
VITE_AXIOS_BASE_URL = 'I am prod base'
VITE_STR = 'prod'
- 启动项目脚本修改
// package.json
"script": {
"dev": "vite --mode test",
}
- ts类型推导添加
// env.d.ts
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
readonly VITE_AXIOS_BASE_URL: string
readonly VITE_STR:string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
- 验证变量
// app.vue
<script>
console.log(import.meta.env.VITE_STR) // 得到 test
</script>
1.14 ts配置
// tsconfig.json
{
"compilerOptions": {
// 目标代码（esnext-->es6/7/8/9）
"target": "esnext",
// 目标代码需要使用的模块化方案
"module": "esnext",
// 严格模式（打开严格检查）
"strict": true,
// 对jsx进行怎样的处理,preserve为默认不处理
"jsx": "preserve",
// 辅助导入功能，开启的话会将文件抽离出来采用导入的形式，否则就是直接将代码插入对应的位置
"importHelpers": true,
// 按照node方式解析模块
"moduleResolution": "node",
// 跳过对一些库（第三方库）的类型检测（axios）
"skipLibCheck": true,
// 开发中 允许 es module 和commonjs module 混合使用
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
// 生成映射文件
"sourceMap": true,
// 文件路径解析时，基本的url
"baseUrl": ".",
// 指定具体要解析使用的类型
"types": ["webpack-env"],
// 路径解析（编译阶段）
"paths": {
// 配置路径解析
"@/*": ["src/*"],
"components/*":["src/components/*"]
},
// 可以指定在项目中可以使用哪些库的类型
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
// 当前哪些ts文件需要解析
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
}
