VSCode插件集及快捷键

简介: VSCode插件集及快捷键

1.插件集

1.1 vue

【vetur】 vue语法高亮

【vueHelper】vue2代码段

1.2 react

【react playground】react运行环境

【react standard style code snippets】react standard风格代码块

1.3 HTML

【auto close tag】 自动闭合HTML标签

【auto rename tag】 修改HTML标签时自动修改匹配标签

【htmltagwrap】包裹HTML

【HTML css suppot】css提示,支持vue的css提示

1.4 CSS

【beautify css/sass/scss/less】 css/sass/scss/less格式化

【color highlight】颜色值在代码中高亮显示

【less intellisense】less变量与混合提示

【postCss sorting】css排序

【sass】sass插件

【language-stylus】stylus语法高亮和提示

1.5 js

【json tools】格式化和压缩json

【JavaScript(ES6) code snippets 】ES6 语法智能提示

1.6 ts

【TSLint】typescript语法检查

【Typescript import】ts自动import

1.7 注释

【better comments】编写更加人性化的注释

【document this】注释文档生成

1.8 语法检查

【eslint】 eslint插件高亮提示

【stylelint】css/sass/less代码风格

1.9 VS code编译器设置

【VS code icon】 文件图片标识

vscode-random】随机字符串生成器

【styled-components】VS coed-component高亮支持

【VS coed-styled-jsx】styled-jsx高亮支持

1.10 git

【git blame】在状态栏显示当前行的git信息

【git history】查看git log

【gitLens】显示文件最近的commit和作者,显示当前行commit信息

【gitignore】.gitignore文件语法

1.11 jQuery

【jQuery Code Snippets】jQuery代码智能提示

1.12 其他

【bookmarks】添加行书签

【code spell checker】单词拼写检查

【file peek】根据路径字符串,快速定位到文件

【font-awesome codes for html】fontawesome提示代码段

【guides】高亮缩进基准线

【path autocomplete】完整路径提示

【project manager】切换项目

【REST client】发送REST风格的HTTP请求

【sort lines】 排序选中行string manipulation

【test spec generator】测试用例生成

【version lens】package.json文件显示模块当前版本和最新版本

【view node package】快速打开选中模块主页和代码仓库

【filesize】状态栏显示当前文件大小

【markdownlint】markdown格式提示

【npm intellisense】导入模块提示已安装模块名称npm

2. 快捷键

2.1 编辑器与窗口管理

打开一个新窗口: Ctrl+Shift+N

关闭窗口: Ctrl+Shift+W

同时打开多个编辑器(查看多个文件)

新建文件 Ctrl+N

文件之间切换 Ctrl+Tab

切出一个新的编辑器(最多 3 个) Ctrl+\,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名

左中右 3 个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3

3 个编辑器之间循环切换 Ctrl+

编辑器换位置, Ctrl+k然后按 Left或 Right

2.2 查找替换

查找 Ctrl+F

查找替换 Ctrl+H

整个文件夹中查找 Ctrl+Shift+F

2.3 重构代码

找到所有的引用: Shift+F12

同时修改本文件中所有匹配的: Ctrl+F12

重命名:比如要修改一个方法名,可以选中后按 F2,输入新名字,回车,则所有该方法的引用也都同步更新了

跳转到下一个 Error 或 Warning:当有多个错误时可以按 F8 逐个跳转

查看 diff: 在 explorer 里选择文件右键 Set file tocompare,然后需要对比的文件上右键选择 Compare with file_name_you_chose

参考文章(侵删)

相关文章
|
2月前
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
86 0
|
7天前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
26 4
|
7天前
|
移动开发 前端开发 JavaScript
揭秘VSCode魔法工具箱:HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
揭秘VSCode魔法工具箱:HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
|
7天前
|
C++ iOS开发 MacOS
常用的 VSCode 快捷键【大全】,提升你的编码速度
常用的 VSCode 快捷键【大全】,提升你的编码速度
常用的 VSCode 快捷键【大全】,提升你的编码速度
|
14天前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
4天前
|
前端开发 JavaScript PHP
【vscode编辑器插件】前端 php unity自用插件分享
【vscode编辑器插件】前端 php unity自用插件分享
6 0
|
2月前
|
搜索推荐 开发者
VSCode快捷键使用教程:提高编码效率的利器
本文介绍了提升编程效率的VSCode快捷键使用方法。主要包括编辑、导航、查找与替换、格式化等快捷键,如Ctrl+A全选,Ctrl+P前往文件,Ctrl+F查找,Shift+Alt+F格式化代码。此外,还涉及窗口和菜单快捷键,如新建窗口(Ctrl+Shift+N)、切换分屏(Ctrl+左右箭头)。VSCode也支持用户自定义快捷键,通过Ctrl+,打开设置进行个性化配置。
84 0
|
2月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
48 0
|
2月前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
35 0
|
2月前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
74 0