目录
- 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代码片段,下载人数超多😉
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软件入门:用户自定义代码块+常用快捷键+常用扩展插件
发布评论