【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"
相关文章
|
2月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
14天前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
2月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
2月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
39 3
|
2月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
52 1
|
2月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
72 0
|
2月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
|
2月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
77 0
|
2月前
|
JavaScript
VUE——配置本地运行指定不同环境
VUE——配置本地运行指定不同环境
63 0
|
2月前
|
JavaScript 测试技术
VUE——打包时如何指定环境
VUE——打包时如何指定环境
28 0