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

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

时间：2023-03-24 16:45:37

VScode软件入门VScode用户自定义代码块用户自定义代码块 VScode快捷键html文件快速创建html结构谷歌快捷键vscode扩展插件Auto Close Tag：Auto Rename TagBeautifyBracket Pair ColorizerChineseCode RunnerCode Spell Checkercss peekEasy LESSDocument ThisESLintHTML CSS SupportLive Serveropen in browserPower ModeTerminalvscode-iconsreactReact-Native/React/Redux snippets for es6/es7react-beautify vueveturVueHelperVue TypeScript SnippetsVue 2 Snippets 主题One Dark ProHorla Light Theme 常用的扩展插件

VScode软件入门

VScode用户自定义代码块

用户自定义代码块

html文件用vue

{/* prefix:代码片段名字，即输入此名字就可以调用代码片段。body :这个是代码段的主体.需要编写的代码放在这里, $1:生成代码后光标的初始位置.$2:生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....${1,字符} :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)description :代码段描述,输入名字后编辑器显示的提示信息。*/// 换行：\r或者\ntab键制表符： \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于6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。