文章目录
- 快捷键
- 代码缩进
- 放大、缩小、还原 Ctrl+ k Ctrl +s
- 单行注释和多行注释
- live Server：浏览器自动刷新显示
- Dictionary Completion：单词补全
- fanyi：划词翻译
- JavaScript(ES6) code snippets：ES6语法智能提示
- Vue Language Features (Volar)：Vue3开发神器
- Vue VSCode Snippets：自动生成vue模板内容插件
- open in browser：在浏览器中打开
- vscode-fileheader：文件头添加注释
- Power Mode（酷炫的打字插件）
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- Auto Close Tag：自动闭合标签
- Auto Rename Tag：自动重命名成对的标签
- VSCode Great Icons：文件图标主题
- Code Spell Checker：单词拼写检查
- 彩虹括号
- Prettier：代码格式化插件
- VScode settings.json：配置默认设置
快捷键
代码缩进
向右移动：按TAB键，或者Ctrl + ]
向左移动：按SHIFT+TAB键，或者Ctrl + [
放大、缩小、还原 Ctrl+ k Ctrl +s
放大：Ctrl±；缩小：Ctrl±；还原：Ctrl+0
单行注释和多行注释
单行注释： ctrl + / 取消注释：再按一遍 ctrl + /
多行注释（块注释）：Alt+Shift+A 取消注释：再按一遍Alt+Shift+A
live Server：浏览器自动刷新显示
v5.7.9 时间：2023-7-30
使用方法：
- VSCode设置为自动保存
- html文件编写好后右键选择open with live server打开即可，html文件会自动保存，浏览器自动刷新
Dictionary Completion：单词补全
v1.2.1 时间：20221013
字典补全，可以设置一个常用英文单词词典，然后辅助你输入单词的，写英文文档很有帮助，有些长单词知道怎么读，但是写出来经常写错的，有这个就好办了，支持模糊匹配，拿不准时随意输入点你记得的部分，它也能给你推荐最接近的。
fanyi：划词翻译
v1.0.6 时间：20221009
一个划词翻译的 VS Code 插件，通过选中需要的单词或短句后，用鼠标移到上方即可翻译
JavaScript(ES6) code snippets：ES6语法智能提示
v1.8.0 时间：20221009
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Vue Language Features (Volar)：Vue3开发神器
v0.40.13 时间：20220915
Vue VSCode Snippets：自动生成vue模板内容插件
版本
v3.1.1时间：20220905
在VScode工具中使用vue开发项目，创建每个组件都要写相同的内容是一件繁琐的事情，我们可以交给插件帮我们完成。
参考文章：
open in browser：在浏览器中打开
open in browser版本：
v2.0.0时间：20220408
用法，右键选择：
- 选择open in Default Browser，默认为系统默认浏览器打开。
- 选择oepn in Other Browsers，将显示一个浏览器列表，您可以选择一个打开当前文件。
快捷键
- Alt + B 在默认浏览器中打开
- Shift + Alt + B 在指定浏览器中打开
vscode-fileheader：文件头添加注释
vscode-fileheader版本：
v0.0.2时间：20220408提示： ctrl+alt+i 可以在头部插入注释，ctrl+s 保存文件后，自动更新时间和作者。
文件头添加注释，支持自动更新文件修改时间。例如：
/*
* @Author: 影子free
* @Date: 2022-04-08 16:40:48
* @Last Modified by: 影子free
* @Last Modified time: 2022-04-08 16:41:09
*/配置：在User Settings.json里面，设置和修改创建者的名字。
"fileheader.Author": "影子free",
"fileheader.LastModifiedBy": "影子free"Power Mode（酷炫的打字插件）
Power Mode版本：v 3.0.2 时间：20220324
VScode settings.json文件添加如下配置，如果以下配置失效，请在VScode设置-扩展-Power Mode里面设置。
// VScode settings.json文件添加如下配置
/* Power Mode基础配置 */
// Power Mode版本：v3.0.2
// 时间：20220324
// 是否开启power mode
"powermode.enabled": true,
// 是否抖动
"powermode.shake.enabled": false,
// 设置随字体颜色变化
"powermode.explosions.backgroundMode": "mask",
// 设置时间间隔
"powermode.combo.timeout": 0,
// 控制所有组合信息可见的位置
"powermode.combo.location": "off",// 关闭
// 控制组合计数器是否可见
"powermode.combo.counterEnabled": "hide",// show显示
// 控制组合仪表文本的大小
"powermode.combo.counterSize": 1, // 字体大小
/* 样式*/
//需要哪个样式就把注释打开即可
// "powermode.presets": "particles", // 粒子
"powermode.presets": "flames",//火焰
// "powermode.presets": "exploding-rift",// 炸裂
// "powermode.presets": "simple-rift",// 爆炸
// "powermode.presets": "fireworks",""// 烟花
// "powermode.presets": "magic",// 魔法
// "powermode.presets": "clippy",// 回形针Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
简体中文插件
Auto Close Tag：自动闭合标签
自动闭合
HTML/XML标签，比如你敲下<h1>，就会自动补上</h1>。
Auto Rename Tag：自动重命名成对的标签
自动重命名成对的
HTML/XML标签。标签，修改开始标签，结束标签也会自动修改。
VSCode Great Icons：文件图标主题
文件图标主题。
Code Spell Checker：单词拼写检查
拼写不对的单词，会有波浪线提示。
彩虹括号
Bracket Pair Colorizer 彩虹括号vscode自带了，加个配置就行，而且打开几千行的代码渲染的更快了，点击设置按钮，在搜索框中输入：Code Actions On Save，点击在setting.json中编辑，加上配置 “editor.bracketPairColorization.enabled”: true
Prettier：代码格式化插件
使用Prettier最常见的就是在VS Code中安装Prettier - Code formatter的扩展。安装好扩展可以让我在保存代码的时候就格式化代码，抛弃手动的操作。
使用command + shift + p (windows为ctrl)快捷键打开命令窗口，输入preferences open settings，选择Open Settings(JSON)，在打开的JSON文件末尾加入
// VScode settings.json文件添加如下配置
// Prettier - Code formatter 版本：v9.5.0
// 时间：20220403
// 粘贴时格式化代码
"editor.formatOnPaste": true,
// 保存时格式化代码
"editor.formatOnSave": true,接下来配置typescript文件的格式化工具为prettier。如果是javascript或者其他类型文件，把[typescript]改成对应的名字即可。
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},Prettier格式化代码
// prettier格式化代码
// 结尾分号
"prettier.semi": true,
// 超过140个字符换行
"prettier.printWidth": 140,
// 使用单引号
"prettier.trailingComma": "none",
// 尾随逗号
"prettier.singleQuote": true,
// 箭头函数单个参数不加分号
"prettier.arrowParens": "avoid",VScode settings.json：配置默认设置
{
// 设置主题
// "workbench.colorTheme": "Default Light+",
// 开启彩虹括号
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
// 设置文件主题
"workbench.iconTheme": "vscode-great-icons",
// 编辑器字体大小
"editor.fontSize": 20,
// 编辑器TAB的缩进空格数
"editor.tabSize": 2,
// Prettier配置
// Prettier - Code formatter 版本：v9.5.0
// 时间：20220403
// 粘贴时格式化代码
"editor.formatOnPaste": true,
// 保存时格式化代码
"editor.formatOnSave": true,
// 配置typescript等文件的格式化工具为prettier
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// prettier格式化代码
// 结尾分号
"prettier.semi": false,
// 超过140个字符换行
"prettier.printWidth": 140,
// 使用单引号
"prettier.trailingComma": "none",
// 尾随逗号
"prettier.singleQuote": true,
// 箭头函数单个参数不加分号
"prettier.arrowParens": "avoid",
/* Power Mode基础配置 */
// Power Mode版本：v3.0.2
// 时间：20220324
// 是否开启power mode
"powermode.enabled": true,
// 是否抖动
"powermode.shake.enabled": false,
// 设置随字体颜色变化
"powermode.explosions.backgroundMode": "mask",
// 设置时间间隔
"powermode.combo.timeout": 0,
// 控制所有组合信息可见的位置
"powermode.combo.location": "off", // 关闭
// 控制组合计数器是否可见
"powermode.combo.counterEnabled": "hide", // show显示
// 控制组合仪表文本的大小
"powermode.combo.counterSize": 1, // 字体大小
/* 样式*/
//需要哪个样式就把注释打开即可
// "powermode.presets": "particles", // 粒子
"powermode.presets": "flames", //火焰
// "powermode.presets": "exploding-rift",// 炸裂
// "powermode.presets": "simple-rift",// 爆炸
// "powermode.presets": "fireworks",""// 烟花
// "powermode.presets": "magic",// 魔法
// "powermode.presets": "clippy",// 回形针
// vscode-fileheader v0.0.2
// 时间：2022年4月8日
"fileheader.Author": "影子free",
"fileheader.LastModifiedBy": "影子free"
}
