🔥🔥🔥快速搭建VUE+VITE+TS项目工程化模版
站长
· 阅读数 4
一个集成了Vite+Vue3+Ts+Eslint+Perttier+Husky+Lintstaged+commitlint+commitizen的模版
使用vite脚手架搭建vue基本架构
Vite
pnpm create vite
//✔ Project name: … test
//✔ Select a framework: › Vue
//✔ Select a variant: › TypeScript
每当我们编码完成时,我们往往希望使用一些相关工具来进行优化对代码进行代码质量和格式检查，其中ESLint最为经典
ESLint
pnpm i eslint
pnpm eslint --init
//You can also run this command directly using 'npm init @eslint/config'.
//✔ How would you like to use ESLint? · problems
//✔ What type of modules does your project use? · esm
//✔ Which framework does your project use? · vue
//✔ Does your project use TypeScript? · No / Yes
//✔ Where does your code run? · browser, node
//✔ What format do you want your config file to be in? · JSON
//The config that you've selected requires the following dependencies:
//因为eslint默认只支持JS 我们需要ESLint安装插件来支持Ts和Vue
//@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
生成后的文件
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"vue"
],
"rules": {
}
}
eslint虽然也会进行自动格式化,但这并不是eslint的侧重点,所以需要引入prettier进行自动格式化 来统一代码风格
Prettier
pnpm i prettier
在根目录创建.prettierrc.cjs文件并配置
module.exports = {
// 指定最大换行长度
printWidth: 80,
// 缩进制表符宽度 | 空格数
tabWidth: 2,
// 使用制表符而不是空格缩进行 (true：制表符，false：空格)
useTabs: false,
// 结尾不用分号 (true：有，false：没有)
semi: true,
// 使用单引号 (true：单引号，false：双引号)
singleQuote: false,
// 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
quoteProps: "as-needed",
// 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
jsxSingleQuote: false,
// 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
trailingComma: "none",
// 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
bracketSpacing: true,
// 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
bracketSameLine: false,
// (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
arrowParens: "avoid",
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
insertPragma: false,
// 用于控制文本是否应该被换行以及如何进行换行
proseWrap: "preserve",
// 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
htmlWhitespaceSensitivity: "css",
// 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
vueIndentScriptAndStyle: false,
// 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
endOfLine: "auto",
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
rangeStart: 0,
rangeEnd: Infinity
};
处理eslint和prettier冲突
pnpm i -D eslint-config-prettier
pnpm i -D eslint-plugin-prettier
.eslintrc.json文件中
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "vue", "prettier"],
"rules": {
"vue/valid-template-root": "off",
"vue/multi-word-component-names":"off"
}
}
为了方便进行代码质量和格式检查,我们自然希望在提交代码时自动执行Eslint对代码进行检查
这时我们需要用到git hook功能 为git命名创建我们需要的勾子
这里我们使用Husky工具来创建 管理
Husky
npx husky init
如果每一次都提交代码时,我们都对存储库内全量代码执行eslint和prettier，必然会损耗性能
所以我们需要lint-staged工具,可以只对即将提交的代码进行检查和格式化，而不是整个代码库，这样可以节省时间并提高效率。
Lint-staged
pnpm i lint-staged
并且在husky文件夹pre-commit中添加
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
创建lint-staged.config.js文件
export default {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
'prettier --write--parser json',
],
'package.json': ['prettier --write'],
'*.vue': ['eslint --fix', 'prettier --write'],
'*.{scss,less,styl,html}': ['prettier --write'],
'*.md': ['prettier --write'],
}
利用git hook除了进行上述格式代码检查外 我们希望对 git commit message 进行格式检查 使得团队commit message保持一致 ，此时就需要用上commitlint以及相应插件
commitlint
pnpm add -D @commitlint/cli @commitlint/config-convertional
那么如何生成规范的commit message呢,此时就需要commitizen以及插件
commitizen
pnpm i -D commitizen cz-conventional-changelog
在package.json中添加文件
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
}
安装完后运行指令 git add . 之后 运行指令pnpm run cz
每次提交代码重复使用git太多 我们可以用脚手架来搭建一个指令
//在package.json中添加指令
"scripts": {
"commit": "git add -A && cz && git push"
}
为了获得较为一致的vscode编码体验
我们可以在项目内创建vscode的扩展安装建议和设置 .vscode中分别分别创建extensions.json和settings.json 例如
//extension.json
{
"recommendations": [
"vue.volar",
"vue.vscode-typescript-vue-plugin",
"hollowtree.vue-snippets",
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"esbenp.prettier-vscode",
"editorconfig.editorconfig",
"streetsidesoftware.code-spell-checker",
"syler.sass-indented",
"mikestead.dotenv"
]
}
如果使用不同编辑器可以使用创建.editorconfig文件来规范开发
# @see: http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 uKf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
max_line_length = 130 # 最大行长度
[*.md] # 表示仅对 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪
在vite和ts配置文件中设置src别名
//vite.config.ts
export default defineConfig({
resolve: {
//设置别名
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})
//tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@": ["src"],
"@/*": ["src/*"]
},
}
安装其他依赖 vue-router pinia element-plus axios sass等
文章到这里就结束了,希望对你有所帮助。