【Vue3+TypeScript】---搭建项目开发环境

简介: 【Vue3+TypeScript】---搭建项目开发环境

1. 项目搭建

微信图片_20221011142247.png微信图片_20221011142252.png

2. 代码规范


2.1 集成editorconfig配置


EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

# 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

注意:如果是在vscode中编写项目代码,需要安装插件 EditorConfig for VS Code

微信图片_20221011142401.png

2.2 使用 prettier 工具


**第一步:**安装prettier

yarn add pretier -D

*第二步:**配置.prettierrc文件:


  • useTabs:使用tab缩进还是空格缩进,选择false;
  • tabWidth:tab是空格的情况下,是几个空格,选择2个;
  • printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
  • singleQuote:使用单引号还是双引号,选择true,使用单引号;
  • trailingComma:在多行输入的尾逗号是否添加,设置为 none;
  • semi:语句末尾是否要加分号,默认值true,选择false表示不加;
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

**第三步:**创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

注意:可以在 package.json 中配置 script 命令:

"prettier": "prettier --write ."

在终端执行 npm run prettier,测试 prettier 是否生效


2.3 使用 ESlint 检测


注意:如果我们在创建项目的时候,没有选择 ESlint + prettier 的话,需要安装两个插件:

npm i eslint-plugin-prettier eslint-config-prettier -D

如果在node_modules中有找到以下两个插件的依赖,就可以直接在 .eslintre.js 配置文件中添加一下配置:


微信图片_20221011142639.png

2.4 git Husky 和 eslint


husky 可以帮助我们在 执行 git commit 提交的时候,按照eslint 规范进行修复代码。

husky是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push。

执行命令:npx husky-init && npm install


2.5 git commit 提交规范


Commitizen 是一个帮助我们编写规范 commit message 的工具

**第一步:**安装commitizen

npm install commitizen -D

**第二步:**安装cz-conventional-changelog,并且初始化cz-conventional-changelog

npx commitizen init cz-conventional-changelog --save-dev --save-exact

**第三步:**提交代码 npx cz

微信图片_20221011142822.png

注意:我们可以痛commitlint 来限制不规范的提交

安装

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"
相关文章
|
16小时前
|
JavaScript 安全 开发者
Vue3 中对 TypeScript 的支持
Vue3 中对 TypeScript 的支持
|
12天前
|
JavaScript 安全 前端开发
Vue 3 中的 TypeScript
【6月更文挑战第15天】
22 6
|
20天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
21 4
|
21天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
13 0
|
1月前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。
|
1月前
|
JavaScript 前端开发 编译器
TypeScript的编译器、编辑器支持与工具链:构建高效开发环境的秘密武器
【4月更文挑战第23天】TypeScript的强大力量源于其编译器、编辑器支持和工具链,它们打造了高效的开发环境。编译器`tsc`进行类型检查、语法分析和代码转换;编辑器如VS Code提供智能提示、错误检查和格式化;工具链包括Webpack、Rollup等构建工具,Jest、Mocha等测试框架,以及代码质量和性能分析工具。这些组合使用能提升开发效率、保证代码质量和优化项目性能。
|
1月前
|
JavaScript 前端开发 开发者
Vue工具和生态系统: Vue.js和TypeScript可以一起使用吗?
【4月更文挑战第18天】Vue.js与TypeScript兼容,官方文档支持在Vue项目中集成TypeScript。TypeScript作为JavaScript超集,提供静态类型检查和面向对象编程,增强代码准确性和健壮性。使用TypeScript能提前发现潜在错误,提升代码可读性,支持接口和泛型,使数据结构和函数更灵活。然而,不是所有Vue插件都兼容TypeScript,可能需额外配置。推荐尝试在Vue项目中使用TypeScript以提升项目质量。
38 0
|
1月前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
72 0
|
1月前
|
JavaScript 前端开发 数据可视化
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
67 0
|
1月前
|
JavaScript 前端开发
在Vue中使用TypeScript的常见问题有哪些?
在Vue中使用TypeScript的常见问题有哪些?
47 2