VSCode使用记录

一、安装

从官网 https://code.visualstudio.com 下载相应安装包

二、扩展:商店

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  • Live Server
  • open in browser
  • GitLens --- Git supercharged
  • Remote - SSH
  • Prettier - Code formatter
  • ESLint
  • pxtorem
  • Vetur
  • Vue Language Features (Volar)
  • TypeScript Vue Plugin (Volar)

三、配置

1、切换语言

快捷键ctrl + shift + p搜索language,选择 configure display language,选择语言,重启


2、修改字体大小

快捷键ctrl + ,进入常用设置,编辑 Font Size

3、隐藏/显示缩略图

查看 -> 外观 -> 缩略图

4、连接远程服务器

快捷键ctrl + shift + p搜索connect to host,配置Hosts


5、vue2 快速构建模板

设置 -> 用户代码片段 -> 搜索vue.json,编辑保存


javascript 复制代码
{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "vue2Init", 
		"body": [
			"/**",
			"*",
			"* Author: yourName",  
			"* CreatDate: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			"*",
			"* Description: $0",
			"*",
			"*/",
			"<template>",
			"  <div class=\"$TM_FILENAME_BASE-wapper\">",
			"    <h1>$TM_FILENAME_BASE</h1>",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '$TM_FILENAME_BASE',",
			"  props: {},",
			"  components: {},",
			"  data() {",
			"    return {",
			"  ",
			"    }",
			"  },",
			"  mounted() {},",
			"  methods: {},",
			"  watch: {}",
			"}",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			"  .$TM_FILENAME_BASE-wapper {",
			"     height:100%;",
			"  }",
			"</style>",
			""
		   ],
		"description": "vue2快速构建模板"
	},
	
	
}

输入vue.json配置prefix参数vue2Init 即可快速构建vue2模板

相关推荐
张较瘦_16 小时前
环境搭建 | [入门级]VSCode(Cursor|Trae|Qoder)搭建Java(Springboot3)企业开发环境全流程
java·ide·vscode
生莫甲鲁浪戴16 小时前
Android Studio新手开发第二十一天
android·ide·android studio
生莫甲鲁浪戴16 小时前
Android Studio新手开发第二十二天
android·ide·android studio
天赐细莲18 小时前
(Linux) WSL 通过 VSCode 连接不执行 profile 问题(登录Shell问题)
linux·运维·vscode
暮色驶过苍茫1 天前
VSCode 配置 SSH 远程连接
ide·vscode·ssh
lichong9511 天前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
微风粼粼1 天前
eclipse 导入javaweb项目,以及配置教程(傻瓜式教学)
java·ide·eclipse
fruge1 天前
Visual Studio 2022安装时共享组件、工具、SDK路径无法更改的问题
ide·visual studio
我狸才不是赔钱货2 天前
DevOps:打破开发与运维之间的高墙
运维·vscode·docker·devops
我狸才不是赔钱货2 天前
揭开命令行的面纱:终端、CLI、Shell的终极辨析
vscode·ssh·bash