vscode使用学习

最新推荐文章于 2024-08-03 10:26:55 发布

青柠知秋

最新推荐文章于 2024-08-03 10:26:55 发布

阅读量352

点赞数

文章标签： vscode

本文链接：https://blog.csdn.net/zbl744949461/article/details/120019623

版权

7.跳转至定义组件插件 Vue Peek 和 css peek

8.常用的36个插件

9.配置git

10.vscode的默认配置文件 defaultSettings.json文件

11.在浏览器中打开界面，插件open in browser

12.默认缩进2个格

13.分屏，用Ctrl \

14.一键生成vue模板，插件Vetur

1.下载

官网地址下载： Download Visual Studio Code - Mac, Linux, Windows

2.安装

3. 学习中文文档

基础-Microsoft Visual Studio Code 中文手册

4. 关闭当前项目

file → close Folder

5. 打开项目

file → open Folder

6. 查看历史记录

安装插件 Local history

会出现local history

这个local histsory的内容会根据文件变化，点击新的文件，它会变成新的文件的历史记录

可以根据当前的，和修改前的做对比。

7.跳转至定义组件插件 Vue Peek 和 css peek

搜索下载后，点击组件可以跳转至组件定义的文件，点击class可以跳转到对应的css上

按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。

按住CTRL键同时点击样式类的名称或者在类的名称上按F12键即可跳转到样式的定义。

8.常用的36个插件

vscode中常用的36个前端插件，直接搜索下载！-VSCode-PHP中文网

9.配置git

首先需要你的电脑上已经安装了git，且window电脑里git添加到环境变量中去了。

在vccode中使用git还要配置git.path。

点击左下角的设置，搜索gitpath，点Edit in settings.json

git.path是git中的一个exe文件路径，找到你的电脑git的安装目录，找到里面的cmd文件夹。

里面的git.exe文件把该文件的完整路径复制下来。

接下来对文件使用git操作，在source control 中，

对单个文件的操作，右键文件，做操作。

Discard Changes 删除当前文件的所有修改

对整体状态的操作，点击右上角三个点

10.vscode的默认配置文件 defaultSettings.json文件

vscode默认设置_leng_nuo的博客-CSDN博客

11.在浏览器中打开界面，插件open in browser

12.默认缩进2个格

file → preferences → Settings → （当前页）Editor:Tab Size 设置成2

13.分屏，用Ctrl \

14.一键生成vue模板，插件Vetur

安装后，更改vue.json配置文件

进入vscode 点击左下角设置-->选择用户代码片段-->输入vue回车进入了vue.json文件，如下


{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    $0",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"",
			"  export default {",
			"    name:'',",
			"    props:[''],",
			"    data () {",
			"      return {",
			"",
			"      };",
			"    },",
			"",
			"    components: {},",
			"",
			"    computed: {},",
			"",
			"    beforeMount() {},",
			"",
			"    mounted() {},",
			"",
			"    methods: {},",
			"",
			"    watch: {}",
			"",
			"  }",
			"",
			"</script>",
			"<style lang='' scoped>",
			"",
			"</style>"
		],
		"description": "Log output to console"
	}
}

配置完，再新建vue文件，写入vue，按Tab，就生成配置的代码了。