一、常用快捷键和设置
1、打开和关闭集成终端
win: crtl+` mac: control+`2、查看运行的插件
可以通过打开命令面板(Ctrl + Shift + P)，并输入Show running extensions来查看所有你安装的正在运行的插件。
3、快速复制行
光标放在行头，ctrl+shift+d 可以快速复制行，跟sublime一样。
4、光标移至文件的开头和结尾
要使光标移到文件的第一行或最后一行，最快的方法是按Ctrl + Home (mac: command + Home)键至开头，Ctrl + End (mac: command + End)键至结尾。
5、向上和向下移动一行
按Alt + 向上箭头(mac: option+ 向上箭头)当前行向上移动，按Alt + 向下箭头(mac: option+ 向下箭头)当前行向下移动。
6、打开文件的选项卡向左和向右移动
可以按Ctrl+Shift+PgUp/PgDn (command + Shift+PgUp/PgDown)向左/向右移动
7、复制光标
按Ctrl + Alt +向上箭头(mac: command + Option +向上箭头)将光标添加到上面，
按Ctrl + Alt +向下箭头(mac: command + Option + 向下箭头)将光标添加到下面。
也可以通过crtl+d复制。
8、插入行
上方插入一行 ctrl+ shift +enter 下方插入一行 ctrl +enter
二、常用的插件
1、css peek html与css关联
2、prettier 代码格式化
3、Icon Fonts 图标集
4、Auto Rename Tag
修改html标签，自动帮你完成尾部闭合标签的同步修改
5 、html boilerplate html模板
6、color info 颜色提示
7、auto close tag 自动闭合标签
8、html css support html 中样式自动提示
9、GitLens 增强了 Visual Studio Code 中内置的 Git 功能。
10、Path Intellisense
是一个 Visual Studio Code 插件，可自动补全文件名。
它对于在 React 中导入组件非常有用，因为你不必手动输入要查找的文件的路径。
11、Color Highlight
“颜色突出显示”显示任何颜色代码的直观表示
12、cssrem
px向rem转移 支持html vue css less scss sass stylus tpl
13、Beautify
用于格式化美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码的。
14、Path Autocomplete
路径补全工具
15、Open in Browser
1.使用快捷键 Alt+B
2.右键在浏览器中查看
16、easy less
自动转换less
17、Chinese (Simplified) Language Pack for Visual Studio Code
适用于 VS Code 的中文（简体）语言包
18、HTML Class Suggestions
class智能提示
19、HTML CSS Support
20、HTML Snippets
21、koroFileHeader
在vscode中用于生成文件头部注释和函数注释的插件
22、live server
实时简易的一个服务器插件，可运行html
三、常用主题
个人认为挺喜欢的一个主题，自己也在用，如图所示
5、图标主题安装 vscode-icons
6、图标主题 Material Icon Theme
四、vue相关插件和配置
1、Vetur
2、Vue 2 Snippets
vue代码提示
3、Vue VSCode Snippets
4、配置自动生成vue代码模板
第一步: 新建模板并保存
文件 –> 首选项 –> 用户代码片段 –> 输入vue，选择vue.json，配置下面代码后保存
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"page\">\n",
" </div>",
"</template>\n",
"<script type=\"text/ecmascript-6\">",
"export default {",
" data() {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
"}",
"</script>\n",
"<style>",
"</style>",
"$2"
],
"description": "Log output to console"
}
}
第二步: 添加配置，让vscode允许自定义的代码片段提示出来
文件 –> 首选项 –> 设置 —> 修改这2项的值
editor.snippetSuggestions设置为 top
editor.formatOnPaste 勾选为true
第三步：新建vue后缀文件，输入vue，按下tab键，就可以自动出来模板代码了。
五、相关问题的配置
1、对修饰器的实验支持是一项将在将来版本中更改的功能
在用TS做vue项目时，写class时类名上提示
对修饰器的实验支持是一项将在将来版本中更改的功能。设置 “experimentalDecorators” 选项以删除此警告。如图：
解决方法：
点文件 -> 首选项 -> 设置 搜索“experimentalDecorators”，如图所示勾选就可以了。
2、给文件头部和函数添加注释
首先安装koroFileHeader 插件，然后进入首选项- 设置里搜索 fileheader 进行配置，不配置可以使用默认的。如下示例配置：
{
"workbench.colorTheme": "Dracula",
"editor.fontSize": 16,
"editor.tabSize": 2,
"javascript.implicitProjectConfig.experimentalDecorators": true,
//此为头部注释,使用:快捷键ctrl+alt+i
"fileheader.customMade": {
"Description": "",
"Author": "your name",
"Date": "Do not 12312edit", //文件创建时间(不变)
"LastEditTime": "Do not edit",
"LastEditors": "Please set LastEditors", // 文件最后编辑者
"FilePath": "Do not edit"
},
// 函数注释，使用:快捷键ctrl+alt+t
"fileheader.cursorMode": {
"description" : "函数作用说明",
"param": "",
"return": "[]",
"Date" : "Do not edit",
"author" : "your name"
},
"fileheader.configObj": {
"createFileTime": true, //设置为true则为文件新建时候作为date，否则注释生成时间为date
"prohibitAutoAdd": [
"json",
"vue",
"md"
]// 禁止.json .vue .md文件，自动添加头部注释(.tsx .jsx默认不会自动添加)
}
}
更多配置参考：https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
3、自动换行配置
在settings.json中加入如下配置即可
"editor.wordWrap": "on",
"editor.wordWrapColumn": 150,
4、html行内style写样式不提示的解决
设置 -> 搜索prevent -> 把Snippets Prevent Quick Suggestions 选项不勾掉即可
