VsCode常用插件和快捷键

vscode快捷键

alt+w：快速打印变量（需要插件Wrap Console Log）

alt+q：加书签

alt+d：加<div>标签（htmltagwrap）

alt+t：中译英（驼峰翻译助手）

alt+e：变量改大驼峰（驼峰翻译助手）

alt+r：变量改小驼峰（驼峰翻译助手）

shift+l：变量转小写（Text Edits）

shift+u：变量转大写（Text Edits）

ctrl+g：定位某一行

F1（ctrl+shift+p）：搜索栏

ctrl+win+t：函数注释（鼠标在函数的任意位置）

ctrl+win+i：文档头部注释（任意位置）

自定义注释快捷键：

vue：生成vue片段

vueTitle：生成vue文件头部注释

jsTitle：生成js文件头部注释

jsfn：生成函数注释

jsModify：生成修改注释

ctrl+d：复选相同的变量

vscode常用插件

Art Template Helper

能识别artTemplate模板引擎。
使用说明：自动

Atom One Dark Theme

皮肤主题
使用说明：文件–首选项–颜色主题–Atom One Dark

Auto Close Tag

自动添加 HTML/XML 结束标签，
使用说明：自动使用

Auto Rename Tag

修改标签对，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签。
使用说明：自动

Bookmarks

书签。
使用说明：https://blog.csdn.net/java578764919/article/details/116145194

Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。
使用说明：自动

Chinese (Simplified) Language Pack for Visual Studio Code

汉化

CSS Peek

追踪至样式表中 CSS 类和 ids 定义的地方。
使用说明：鼠标指向某个class或者id名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置

DotENV

.env格式配置文件 高亮显示 node php的部分框架都可以用。
使用说明：自动使用

Draw.io Integration

类似于思维导图/流程图的插件。
使用说明：https://blog.csdn.net/weixin_43148062/article/details/107108438

Easy LESS

支持写less

EditorConfig for VS Code

为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格，需要在项目根目录下添加配置文件.editorconfig，配置如下

## http://editorconfig.org

root = true

[*] ## 表示所有文件适用
charset = utf-8 ## 设置文件字符集为 utf-8
indent_style = space ## 缩进风格（tab | space）
indent_size = 2 ## 缩进大小
end_of_line = lf ## 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true ## 去除行首的任意空白字符
insert_final_newline = true ## 始终在文件末尾插入一个新行

[*.md] ## 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

ESLint

校验js代码规范。

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式。
使用说明：自动

htmltagwrap

可以在选中HTML标签中外面套一层div标签。
默认快捷键是alt+w，修改为alt+d

JavaScript (ES6) code snippets

支持缩写：常用的类声明、ES 模块声明、CMD 模块导入等，支持的缩写不下 20 种。
使用说明：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

koroFileHeader

快速生成文档头部注释和函数注释。将以下代码添加到setting.json文件中

"fileheader.customMade": {
    //此为头部注释
    "Description": "",
    "Version": "",
    "Autor": "mashize",
    "Date": "Do not edit",
    "LastEditors": "mashize",
    "LastEditTime": "Do not edit"
  },
  "fileheader.cursorMode": {
    //此为函数注释
    "description": "",
    "param": "",
    "return": ""
  }

Live Serve

这是一个为静态和动态页面启动具有实时重新加载功能的开发本地服务器（代码保存之后，浏览器自动刷新），
使用说明：启动–右键Open with Live Server，或右下角Go live

npm Intellisense

NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成

open in browser

浏览器打开（可以被Live Server替代）。
使用说明：右键–open in browser

Path Intellisense：自动路径补全。

使用说明：自动使用

Prettier-Code formatter

格式化js、css代码插件。
使用说明：自动使用

Prettier+

配置自动格式化的时候使用

Project Manager

切换项目文件的插件。
使用说明：https://www.cnblogs.com/wangpinzhou/articles/8997289.html

Vetur

格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方维护者说没有比较好的工具支持，默认是不格式化的。
使用说明：Alt+Shift+F （格式化全文)，可以设置自动化格式

vscode-icons

文件管理的树目录图标管理。
使用说明：文件–首选项–文件图标主题

Vue 3 Snippets

扩展添加vue2和vue3的常用代码块的快捷键。
使用说明：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Vue VSCode Snippets

快捷生成vue骨架。
使用说明：vbase，vdata等，以v开头
https://blog.csdn.net/weixin_45844049/article/details/104433429

Wrap Console Log

安装之后，修改快捷键Ctrl+Alt+W + Ctrl+Alt+Down为Alt+a
使用说明：选中多个变量，或光标放在要打印的一个变量上，使用快捷键Alt+a即可打印

Settings Sync

VsCode同步配置到另一台设备,未使用。
使用说明：点击

Text Edits

转换vscode文件的大小写
使用说明：shift+l（小写），shift+u（大写）

any-rule

正则匹配大全
地址：https://github.com/any86/any-rule
方式1：按F1(mac下fn+F1)打开正则列表。输入关键词搜索, 比如"手机".
方式2：右键选择"正则大全".
方式3：在代码任意位置输入"@zz".

驼峰翻译助手

中文一键翻译转换成常用大小驼峰等格式。以及切换大小写。
修改快捷键：打开键盘快捷方式（左下角齿轮处）
alt+t：中译英（驼峰翻译助手）
alt+e：变量改大驼峰（驼峰翻译助手）
alt+r：变量改小驼峰（驼峰翻译助手）