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用户自定义代码块

用户自定义代码块

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样式表的 “保存时编译”，而无需使用构建任务。

创建一个.less文件。
点击Ctrl / Cmd + S保存文件。
甲.css文件自动生成。
您应该在状态栏中看到一个临时的“在_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来启动服务器。

打开一个项目，然后Go Live从状态栏中单击以打开/关闭服务器。
右键单击HTML资源管理器窗口中的文件，然后单击Open with Live Server。。
打开一个HTML文件，右键单击编辑器，然后单击Open with Live Server。
单击“ (alt+L, alt+O)打开服务器”并(alt+L, alt+C)停止服务器（您可以更改快捷方式窗体的键盘绑定）。[在MAC上，cmd+L, cmd+O和cmd+L, cmd+C]
通过按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代码片段，下载人数超多