# 项目搭建
Vite、Vue3、Typescript
# 创建项目
# 使用vite命令初始化项目这里使用vue、Typescript模板
npm create vite@latest my-vue-app --template vue-ts
1
# 配置tsx支持
// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [
vueJsx({
// options are passed on to @vue/babel-plugin-jsx
}),
],
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 配置eslint
# 安装eslint
npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser
1
# 初始化eslint
npx eslint --init
1
# 处理vue检查
修改.eslintrc.cjs配置
parser: "vue-eslint-parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
parser: "@typescript-eslint/parser",
},
1
2
3
4
5
6
2
3
4
5
6
# 配置husky
# install husky
npm i lint-staged husky -D
1
# enable Git hooks
npx husky install
1
# To automatically have Git hooks enabled after install, edit package.json
npm pkg set scripts.prepare="husky install"
1
# 创建pre-commit
npx husky add .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit
1
# 配置stylelint
# 添加命令
"scripts": {
"lint:styles": "stylelint ./**/*.{css,scss}",
"format:styles": "stylelint ./**/*.{css,scss} --fix",
}
1
2
3
4
2
3
4
# 配置lint-staged只 lint 改动的
lint-stadge的出现，它是只检查本次提交所修改(指 git 暂存区[5]里的东西)的问题，这样每次 lint 量就比较小
# 安装
npm install -D lint-staged
1
# 新增.lintstagedrc配置
"lint-staged": {
"*.{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",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 安装commitlint
npm install -D @commitlint/{config-angular,config-conventional,cli}
1
# 配置commitlint.config
module.exports = { extends: ['@commitlint/config-angular'] };
1
# 添加husky钩子
npx husky add .husky/commit-msg "npx --no-install commitlint --edit '$1'"
1