VS Code前端常用插件及快捷键 水深无声 2022-12-02 01:21 192阅读 0赞 VS Code是一款逐渐火热的编辑器。它的特点免费、开源、多平台,以及集成git,代码调试,插件丰富等有点,被大家逐渐熟知和认可。 VS Code是免费软件,直接到官网下载安装即可,如果选用这款编辑器,建议花点时间实习一下这款软件,安装必要的插件,会大大提供编码效率。 ##### 配置中文界面 ##### 安装的VSCode软件默认使用的是英文语言环境,如需要改成中文,可在扩展中安装中文语言包,安装后重启软件即可。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70] ##### 自动保存 ##### File -> AutoSave(中文界面下“文件”->“自动保存”) 或者 Ctrl+Shift+P,输入 auto # 前端常用插件 # Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag 自动重命名配对的HTML / XML标签 HTML Snippets 智能提示HTML标签,以及标签含义 HTML CSS Support CSS 自动补齐 HTML Boilerplate 提供生成标准HTML样板代码。在html文件中输入!+Tab即可生成HTML样板代码 HTMLHint 对 HTML 代码文件进行静态代码检查,从而提高 HTML 代码编写的规范和质量 ![在这里插入图片描述][20200829142539418.png_pic_center] JavaScript(ES6) code snippets ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间 Beautify 格式化 HTML,JavaScript ,css Prettier 格式化JavaScript / TypeScript / CSS Bracket Pair Colorizer 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色 Css Peek 能在源代码中的字符串中找到对应的css(类和ID)。显示在那个css文件里,还有在第几行。 Csscomb css 、less、sass 的代码排序、格式化。 Path Intellisense 文件路径提示。 open in browser 支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari Debugger for Chrome js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,详细配置见插件说明。 [调试方法戳这][Link 1] ESLint 检查Javascript编程时的语法错误。 Color-Highlight 在编辑器中高亮显示颜色。 Color Picker 代码的颜色选择器。 Color Info 在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息 Project Manager 在多个项目之前快速切换的工具 filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 ### 注释 ### Document This 为js文件生成文档的代码注释。将光标放置于function上面,中选 点鼠标右键,在菜单Document This,快捷键是 Ctrl+Alt+D 加 Ctrl+Alt+D。 vscode-fileheader 给js文件生成头部注释的插件,每次修改js文件之后会自动修改的时间和作者 快捷键: ctrl+alt+i VS Code CSS Comments css代码注释。 ### 视图 ### vscode-icons 文件图标,让 vscode 资源树目录加上图标 Guides 代码的标签对齐线。 ### 功能扩展 ### Bookmarks Bookmarks 是一个书签工具,你是否已经厌倦了无休止地滚动代码,或者使用“Ctrl+F”来找到你想要修改的那行代码?这个 VSCode 书签拓展工具能够让你快速平顺的创建和跳转书签。 jQuery Code Snippets jQuery代码智能提示 Lodash lodash 函数提示。 Bootstrap 4 & Font awesome snippets bootstrap4和font awesome 快速引用和代码生成。 Npm Intellisense require 时的包提示 Import Cost 显示导入的包的大小 GitLens 方便查看git日志,git重度使用者必备 Settings Sync 编辑器设置同步,包括插件,配置等。 Markdown Preview Enhanced 实时预览markdown,markdown使用者必备 markdownlint (推荐) markdown语法纠错 ### Vue插件 ### Vetur 语法高亮、智能感知、Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) VueHelper vue代码提示 # 常用快捷键 # 显示所有命令: Ctrl+shift+P或F1,弹出命令行 转到文件: Ctrl+P 开始调试:F5 切换终端:Ctrl + \` ### 查找替换 ### 查找: Ctrl+F 查找替换: Ctrl+H 在文件中查找:Ctrl+shift+F 在文件中查找替换:Ctrl+shift+H ### 编辑器与窗口管理 ### 新建文件: Ctrl+N 文件之间切换: Ctrl+Tab 打开一个新的VS Code编辑器: Ctrl+Shift+N 关闭当前窗口: Ctrl+W 关闭当前的VS Code编辑器: Ctrl+Shift+W 切出一个新的编辑器窗口(最多3个): Ctrl+ 切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3 全屏显示(再次按则恢复): F11 放大或缩小(以编辑器左上角为基准): Ctrl +/- 侧边栏显示或隐藏: Ctrl+B 显示资源管理器(光标切到侧边栏中才有效): Ctrl+Shift+E 显示搜索(光标切到侧边栏中才有效): Ctrl+Shift+F 显示(光标切到侧边栏中才有效): Git Ctrl+Shift+G 显示 Debug: Ctrl+Shift+D 显示 Output: Ctrl+Shift+U ### 代码编辑 ### 跳转到行数,也可以 Ctrl+G 直接进入 代码行向左或向右缩进: Ctrl+\[ 、 Ctrl+\] 复制或剪切当前行/当前选中内容: Ctrl+C 、 Ctrl+V 代码格式化: Shift+Alt+F 向上或向下移动一行: Alt+Up 或 Alt+Down 向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down 在当前行下方插入一行: Ctrl+Enter 在当前行上方插入一行: Ctrl+Shift+Enter 手动保存: Ctrl+S 撤销上一步操作: Ctrl+Z ### 光标 ### 光标移动到行首: Home 光标移动到行尾: End 光标移动到文件结尾: Ctrl+End 光标移动到文件开头: Ctrl+Home 移动到光标所在标识符定义处: F12 查看光标所在标识符定义处缩略图(只看一眼而不跳转过去): Alt+F12 选择从光标到行尾的内容: Shift+End 选择从光标到行首的内容: Shift+Home 删除光标右侧的所有内容(当前行): Ctrl+Delete 扩展/缩小选取范围: Shift+Alt+Right 和 Shift+Alt+Left 多行编辑(列编辑): Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up 同时选中所有匹配编辑(与当前行或选定内容匹配): Ctrl+Shift+L 下一个匹配的也被选中: Ctrl+D 回退上一个光标操作: Ctrl+U ### 重构代码 ### 找到所有的引用: Shift+F12 同时修改本文件中所有匹配的: Ctrl+F2 跳转到下一个 Error 或 Warning: 当有多个错误时可以按 F8 逐个跳转 参考资料: https://blog.csdn.net/jiandan1127/article/details/85957003 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20221123/7c44501054884640aab97ab7ef33f31e.png [20200829142539418.png_pic_center]: /images/20221123/7885ba2045a245bc961d27bf30a47fae.png [Link 1]: https://blog.csdn.net/example440982/article/details/79587704
还没有评论,来说两句吧...