VsCode常用插件和快捷键
格式化 .vue 文件,包括里面的 CSS、JS,至于模板即 HTML 部分,官方维护者说没有比较好的工具支持,默认是不格式化的。支持缩写:常用的类声明、ES 模块声明、CMD 模块导入等,支持的缩写不下 20 种。给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色。修改标签对,能在你修改开始(结束)标签的时候修改对应的结束(开始)标签。使用说明:shift+alt+l
VsCode常用插件和快捷键
- vscode快捷键
- vscode常用插件
- Art Template Helper
- Atom One Dark Theme
- Auto Close Tag
- Auto Rename Tag
- Bookmarks
- Bracket Pair Colorizer
- Chinese (Simplified) Language Pack for Visual Studio Code
- CSS Peek
- DotENV
- Draw.io Integration
- Easy LESS
- EditorConfig for VS Code
- ESLint
- HTML CSS Support
- htmltagwrap
- JavaScript (ES6) code snippets
- koroFileHeader
- Live Serve
- npm Intellisense
- open in browser
- Path Intellisense:自动路径补全。
- Prettier-Code formatter
- Prettier+
- Project Manager
- Vetur
- vscode-icons
- Vue 3 Snippets
- Vue VSCode Snippets
- Wrap Console Log
- Settings Sync
- Text Edits
- any-rule
- 驼峰翻译助手
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:变量改小驼峰(驼峰翻译助手)
更多推荐
所有评论(0)