可以参考demo
-
1.代码检查：工具husky,在git -> hooks -> pre-commit之前执行npm test进行格式检查
git版本要求 > 2.9 git --version获取版本 1.终端执行 npm install husky -D 2.package.json 文件中添加脚本 "prepare": "husky install" 3.终端执行 npm run prepare 4.终端执行 npx husky add .husky/pre-commit "npm test" //增加husky配置文件 5.git add .husky/pre-commit // 添加git pre-commit订阅，在每次commit之前执行npm test // package.json "test": "vue-tsc --noEmit" -
2.ts别名文件路径设置：
vite.config.js文件注意：如果你想在ts环境中运行，必须在tsconfig.json中同步前缀配置，否则会报异常。
//tsconfig.json
"baseUrl": "./",
"paths": {
"@/*":["./src/*"]
}
// vite.config.ts
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
-
3.vscode语法高亮显示，插件移除vetur,使用Volar
-
4.代码语法检查与格式化
eslint：代码检测工具，避免低级错误和统一代码的风格，但prettier对于代码风格统一更专业，我们这里使用prettier进行代码格式化。
prettier: 代码格式美化
安装依赖
npm install -D eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier
1. prettier // prettier的核心代码
2. eslint-config-prettier // 这将禁用 ESLint 中的格式化规则，而 Prettier 将负责处理这些规则
3. eslint-plugin-prettier // 把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，统一代码问题的来源。
1. eslint // ESLint的核心代码
2. @typescript-eslint/parser // ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
3. @typescript-eslint/eslint-plugin // ESLint插件，包含了各类定义好的检测Typescript代码的规范
4. eslint-plugin-vue // 支持对vue文件检验
5. vite-plugin-eslint // 错误将在浏览器中报告，而不止在终端，按需使用
// .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module', //Allowsfortheuseofimports
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
rules: {}
}
// .prettierrc.js
module.exports = {
printWidth: 160, // 单行输出（不折行）的（最大）长度
tabWidth: 2, // 每个缩进级别的空格数
tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)
semi: false, // 是否在语句末尾打印分号
singleQuote: true, // 是否使用单引号
quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
bracketSpacing: true, // 是否在对象属性添加空格
htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
trailingComma: 'none', // 去除对象最末尾元素跟随的逗号
useTabs: false, // 不使用缩进符，而使用空格
jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
// arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
proseWrap: 'always', // 当超出print width（上面有这个参数）时就折行
endOfLine: 'lf', // 换行符使用 lf
"max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ] // 每个函数最大行数
}
最终package.json内容如下
// package.json
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"prepare": "husky install",
"test": "vue-tsc --noEmit",
"lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write"
},
"dependencies": {
"axios": "^0.21.1",
"vant": "^3.2.1",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.0.0"
},
"devDependencies": {
"@types/node": "^16.9.6",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^4.31.2",
"@typescript-eslint/parser": "^4.31.2",
"@vitejs/plugin-vue": "^1.6.0",
"@vue/compiler-sfc": "^3.0.5",
"autoprefixer": "^10.3.3",
"core-js": "^3.18.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.18.0",
"husky": "^7.0.2",
"postcss-px-to-viewport": "^1.1.1",
"prettier": "2.4.1",
"sass": "^1.38.2",
"typescript": "^4.3.2",
"vite": "^2.5.1",
"vite-plugin-style-import": "^1.2.1",
"vue-tsc": "^0.2.2"
}
-
5.vscode自动保存格式化
如果使用vscode,可以安装Prettier插件、ESLint插件进行代码检查和格式化.以上依赖包的形式是为了在别的编辑器中及构建过程中保持代码风格一致。
在vscode扩展中安装插件，安装完成后对vscode进行设置，code=>首选项=>设置=>搜索 codeActionsOnSave 选择 在 settings.json 中编辑 // settings.json "editor.formatOnSave": true, // 是否开启vscode的保存自动格式化 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true //是否开启vscode的eslint``` -
6.公共组件说明文档 vuepress
如果需要开发公共组件提供给各个团队使用的话，我们需要一份公共组件使用说明。vue技术栈的话可以使用vuepress,已经支持了vue2与vue3,react技术栈的话可以使用dumi。
以vuepress作为示例进行简单说明
1.创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter 2.使用你喜欢的包管理器进行初始化 yarn init 或者 npm init 3.将VuePress 安装为本地依赖 yarn add -D vuepress 或者 npm install -D vuepress 4.创建你的第一篇文档 mkdir docs && echo '# Hello VuePress' > docs/README.md 5.在 `package.json` 中添加一些 scripts { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 6.在本地启动服务器 yarn docs:dev 或者 npm run docs:devVuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。具体配置参考官网vuepress
