目录

  • VScode软件入门
    • VScode用户自定义代码块
      • 用户自定义代码块
    • VScode快捷键
    • html文件快速创建html结构
    • 谷歌快捷键
    • vscode扩展插件
      • Auto Close Tag：
      • Auto Rename Tag
      • Beautify
      • Bracket Pair Colorizer
      • Chinese
      • Code Runner
      • Code Spell Checker
      • css peek
      • Easy LESS
      • Document This
      • ESLint
      • HTML CSS Support
      • Live Server
      • open in browser
      • Power Mode
      • Terminal
      • vscode-icons
      • react
        • React-Native/React/Redux snippets for es6/es7
        • react-beautify
      • vue
        • vetur
        • VueHelper
        • Vue TypeScript Snippets
        • Vue 2 Snippets
      • 主题
        • One Dark Pro
        • Horla Light Theme
    • 常用的扩展插件

VScode软件入门

VScode用户自定义代码块

用户自定义代码块

  1. html文件用vue
{
	/* 
	prefix      :代码片段名字，即输入此名字就可以调用代码片段。
	body        :这个是代码段的主体.需要编写的代码放在这里,　　　　　 
	$1          :生成代码后光标的初始位置.
	$2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
	${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
	description :代码段描述,输入名字后编辑器显示的提示信息。
	*/
	//   换行：\r或者\n     tab键制表符： \t
	// 前缀部分没有什么好介绍的，唯一值得注意的是，前缀支持 N:1，也即允许多条前缀对应同一条代码片。在使用时，只需将前缀定义为数组即可，数组中的每一个前缀都能对应本代码片。    "prefix": [ "header", "stub", "copyright"],
	// 用「Tabstops」可以让编辑器的指针在 snippet 内跳转。使用 $1，$2 等指定光标位置。这些数字指定了光标跳转的顺序。特别地，$0表示最终光标位置。
	"Vue": {
		"prefix": "vue1", // 对应的是使用这个模板的快捷键
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">\n",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>",
			"\t$BLOCK_COMMENT_START  IMPORT CSS $BLOCK_COMMENT_END\n",
			"</head>\n",
			"<body>",
			"\t<div id=\"app\">\n\n\t</div>\n",
			"\t$BLOCK_COMMENT_START  IMPORT JS $BLOCK_COMMENT_END",
			"\t<script src=\"../node_modules/vue/dist/vue.js\"></script>",
			"\t<script>",
			"\t\tlet vm = new Vue({",
			"\t\t\tel: '#app',",
			"\t\t\tdata: {\n\t\t\t\t$1\n\t\t\t},",
			"\t\t\tcreated() {\n\t\t\t\t$2\n\t\t\t},",
			"\t\t\tmethods: {\n\t\t\t\t$3\n\t\t\t},",
			"\t\t\tfilters: {\n\t\t\t\t$4\n\t\t\t},",
			"\t\t\tcomputed: {\n\t\t\t\t$5\n\t\t\t},",
			"\t\t\twatch: {\n\t\t\t\t$6\n\t\t\t},",
			"\t\t\tcomponents: {\n\t\t\t\t$7\n\t\t\t},",
			"\t\t});",
			"\t</script>",
			"</body>\n",
			"<html>"
		],
		"description": "vue模板1" // 模板的描述
	}
}

2.Vue文件模板

  • Visual Studio代码中的代码片段详解
{
	"vue-template": {
	  "prefix": "vue2",
	  "body": [
		"<template>",
		"  <div class=\"$1\">",
		"",
		"  </div>",
		"</template>",
		"",
		"<script>",
		"export default {",
		"  name: '${TM_FILENAME_BASE}',", //默认大写的文件名
		"  data() { ",
		"    return {",
		"",
		"    }",
		"  }",
		" }",
		"</script>",
		"",
		"<style lang=\"scss\" >",
		"  .$1{",
		"",
		"  }",
		"</style>"
  
	  ],
	  "description": "my vue template"
	}
  }

VScode快捷键

  • VScode快捷键(mac + win 详细)

html文件快速创建html结构

  • div*4>img[src=“./img/banner$.jpg”]
<div><img src="./img/banner1.jpg" alt=""></div>
<div><img src="./img/banner2.jpg" alt=""></div>
<div><img src="./img/banner3.jpg" alt=""></div>
<div><img src="./img/banner4.jpg" alt=""></div>

谷歌快捷键

F11 全屏
ctrl+ -/+ 缩小 放大
ctrl+f 查找

vscode扩展插件

Auto Close Tag：

自动添加HTML / XML关闭标签（必备）

Auto Rename Tag

自动重命名配对的HTML / XML标签(必备)

Beautify

格式化javascript，JSON，CSS，Sass，和HTML

Bracket Pair Colorizer

颜色识别匹配括号

Chinese

适用于VS Code的中文（简体）语言包

Code Runner

非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：>

点击这个按钮就可以运行你的文件了（必备）

Code Spell Checker

一个基本的拼写检查器，可以很好地与camelCase代码一起使用。
此拼写检查器的目的是帮助捕获常见的拼写错误，同时保持较低的误报率。

css peek

能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）
使用方法：将光标放在class里面的属性，右击

Easy LESS

在Visual Studio Code中轻松处理LESS文件。
LESS样式表的 “保存时编译”，而无需使用构建任务。

  1. 创建一个.less文件。
  2. 点击Ctrl / Cmd + S保存文件。
  3. 甲.css文件自动生成。
  4. 您应该在状态栏中看到一个临时的“在_X_毫秒内编译较少”消息。

注意：也可以从命令选项板中将其作为“将LESS编译为CSS”。

Document This

添加注释块


设置：

"docthis.includeAuthorTag": true,//出现@Author
 "docthis.includeDescriptionTag": true,//出现@Description
 "docthis.authorName": "shenzekun",//作者名字

快捷键： 按两次Ctrl+alt+d

ESLint

EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。> ESLint最初是由Nicholas C. Zakas于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

因此，ESLint就是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

HTML CSS Support

在 html 标签上写class 智能提示当前项目所支持的样式（必备）

Live Server

启动具有实时重新加载功能的本地开发服务器，以处理静态和动态页面。
启动/停止服务器的快捷方式
[注意：如果工作空间中没有文件.html或.htm文件，则必须按照方法4和5来启动服务器。

  1. 打开一个项目，然后Go Live从状态栏中单击以打开/关闭服务器。
  2. 右键单击HTML资源管理器窗口中的文件，然后单击Open with Live Server。 。
  3. 打开一个HTML文件，右键单击编辑器，然后单击Open with Live Server。
  4. 单击“ (alt+L, alt+O)打开服务器”并(alt+L, alt+C)停止服务器（您可以更改快捷方式窗体的键盘绑定）。[在MAC上，cmd+L, cmd+O和cmd+L, cmd+C]
  5. 通过按F1或打开命令面板，ctrl+shift+P然后键入Live Server: Open With Live Server以启动服务器或键入Live Server: Stop Live Server以停止服务器。

open in browser

当前的 html 文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保存
快捷键alt+b

Power Mode

打字鼠标效果

Terminal

在命令面板（Ctrl+Shift+P）搜索用户配置，在用户配置文件中，找到Run Code configuration下的code-runner.runInTerminal的值改为true，就好了。

vscode-icons

目录树图标

react

React-Native/React/Redux snippets for es6/es7

react代码片段，下载人数超多😉

react-beautify

格式化 javascript, JSX, typescript, TSX 文件

vue

vetur

语法高亮、智能感知

VueHelper

vue代码片段

Vue TypeScript Snippets

vue的 typescript 代码片段

Vue 2 Snippets

vue 2代码片段

主题

One Dark Pro

这个也好看😄

Horla Light Theme

vscode的七彩灯光主题

常用的扩展插件

  • vetur,Vue 2 Snippets,vue peek 适合vue开发者使用，其他扩展插件前端开发都可

更多推荐

VScode软件入门：用户自定义代码块+常用快捷键+常用扩展插件