vscode 开发前端的准备


1.vscode 扩展
1.Auto Rename Tag ——自动完成另一侧标签的同步修改
2.Auto Close Tag —— 自动闭合 HTML/XML 标签
3.JavaScript(ES6) code snippets — — ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含 js 代码文件的时间
4.HTML CSS Support —— 让 html 标签上写 class 智能提示当前项目所支持的样式
5.HTML Snippets —— html 快速自动补全
6.Open in browser —— 浏览器快速打开
7.Live Server —— 以内嵌服务器方式打开
8.Chinese (Simplified) Language Pack for Visual Studio Code —— 中文语言包
9.Vetur —— 语法高亮、智能感知、Emmet 等,包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个 Ctrl
需要同时按着)
10.Vue 3 Snippets——这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。
11.Vue TypeScript Snippets——vue typescript 代码片段
12.VueHelper——Vue2代码段(包括Vue2 api、vue-router2、vuex2)
13.Guides——代码对齐线
2.Git配置
1、下载git
https://git-scm.com
注意:傻瓜式安装
(1)配置用户名 ,--global是全局配置,要只想配置单个项目的,就去掉--global
  git config --global user.name "username" //(名字)
(2)配置邮箱,--global是全局配置,要只想配置单个项目的,就去掉--global
   git config --global user.email "username@email.com" //(注册账号时用的邮箱)
3、配置ssh免密登录
  Gitee 提供了基于SSH协议的Git服务,在使用SSH协议访问仓库之前,需要先配置好账户/仓库的SSH公钥。
官方教程:https://gitee.com/help/articles/4181#article-header0
 (1)进入git bash,使用以下命令来生成 sshkey:
    ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
  按照提示完成三次回车,即可生成 ssh key 
  一般用户目录下会有
![在这里插入图片描述](https://img-blog.csdnimg.cn/dab4011486b9449da6ed4678b0d99627.png)
或者 cat ~/.ssh/id_rsa.pub
2)登录gitee,复制生成后的 ssh key,通过仓库主页 「管理」->「部署公钥管理」->「添加部署公钥」 ,添加生成的 public key 添加到仓库中
![在这里插入图片描述](https://img-blog.csdnimg.cn/3b01708eeffc4e57b7e6969e1ee91cc4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiJ5aa5X2RheQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
(3)添加完成之后,在终端(Terminal)中输入
 ssh -T git@gitee.com
 首次使用需要确认并添加主机到本机SSH可信列表。若返回 Hi XXX! You've successfully authenticated, but Gitee.com does not provide shell access. 内容,则证明添加成功。
![在这里插入图片描述](https://img-blog.csdnimg.cn/c4e0999b03224fd1b7c45744b20dd0bb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiJ5aa5X2RheQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
3.vscode快速生成vue用户代码片段

文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定
```
{
"生成 vue 模板": {
"prefix": "vue",
"body": [
"",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json 文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import 引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//计算属性 类似于 data 概念",
"computed: {},",
"//监控 data 中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前 this 实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问 DOM 元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有 keep-alive 缓存功能,这个函数会触发 ",
"}",
"</script>",
""
],
"description": "生成 vue 模板"
}
}
```