VSCode常用好用插件大全

名称	功能
Auto Rename Tag	自动重命名配对的HTML / XML标签
Auto Close Tag	自动添加HTML / XML结束标签
any rule	常用正则表达式合集和工具
Browser Preview	编辑器中嵌入浏览器可视化窗口
Bracket Pair Colorizer	高亮匹配代码块括号
Better Comments	文档注释 /** * 我的方法 * 重要的信息会被高亮显示 !及其反对的代码,不要使用 * TODO 重构此方法 * @param 该方法的参数 */
Better Align	根据符号（如冒号、等于号）对齐多行代码使用方法：Ctrl+Shift+p输入“Align”确认即可
Code Runner	非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角会出现：▶ 解决输出乱码和支持输入问题：选择文件->首选项->设置，打开VS Code设置 > Extensions，找到 Run Code configuration，勾上 Run In Terminal选项。设置之后代码就会在 Terminal 中运行了，无乱码及支持输入。
change-case	修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等使用方法：Ctrl+Shift+p输入“change”然后选择要修改的格式
Color Info	颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息
Color Highlight	在编辑器中高亮显示颜色值
Color Picker	代码的颜色选择器
Csscomb	css 、less、sass 的代码格式化。
CSS Peek	快速定位元素设置CSS文件及位置在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码
Class autocomplete for HTML	自动补全class=“” 属性
Codelf	给变量起名的神器
css-auto-prefix	给css加不同浏览器前缀
Debugger for Chrome	js调试的插件，前端项目在Chrome中运行起来之后，可以直接在VSCode中打断点、查看输出、查看控制台
Document This	为js文件生成文档的代码注释。
Draw.io Integration	画流程图
Data Preview	预览数据文件
ESLint	检查Javascript编程时的语法错误
EditorConfig for VS Code	代码风格统一
filesize	在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
Format Files	在侧栏文件夹右键，选择‘Start Format Files：This Folder’ 对文件夹所有的文件格式化
Git blame	编辑器左下角展示最近一次的编辑信息
Git History	以图表的形式查看 git 日志
GitLens	查看每一行代码的提交日志
Git History Diff	查看提交记录及比较代码
Git Graph	所有分支合并时间线轴
Guides	代码的标签对齐线。
Highlight Matching Tag	选中标签高亮标签对
HTML CSS Class Completion	为基于工作空间上的CSS文件的HTML类属性提供CSS类名称提示。
HTML Boilerplate	提供生成标准HTML样板代码。
HTML CSS support	css 自动补齐
HTMLHint	HTML 代码格式检测
HTML Snippets	支持HTML5标签提示
htmltagwrap	在选中HTML标签后按快捷键”Alt + W” 在外面套一层标签
Image Preview	鼠标移到路径里显示图像预览
Indenticator	突出目前的代码缩进深度
Indent-Rainbow	给缩进添颜色，更加直观的看到代码层次
intelliSense for CSS class names in HTML	把项目中 css 文件里的名称智能提示在 html 中
Import Cost	您查看导入模块的大小
JavaScript (ES6) snippets	支持JavaScript ES6 语法
JavaScript (ES6) code snippets	ES6语法提示
jQuery Code Snippets	jq代码段提示。
JS-CSS-HTML Formatter	代码格式化。
koroFileHeader	自动生成文档注释
Live Server	实时简易服务器
Lodash	lodash 函数提示，输入下划线列出可用函数。
Lodash Snippets	lodash 函数提示，输入函数名列表默认第一个是lodash的函数。
Lorem ipsum	快速填充文本
Log File Highlighter	日志文件(.log后缀的文件)高亮
LeetCode	刷算法题的插件
local history	查看本地历史代码
markdownlint	markdown语法检测
Markdown Preview Enhanced	编辑器内看markdown编译出来的效果
Markdown All in One	markdown编辑器
Material Icon Theme	文件目录图标美化
MongoDB for VS Code	MongoDB 数据库支持
npm Intellisense	在import语句中自动完成npm模块引入的代码插件。
Node.js Modules Intellisense	可以在导入语句中自动完成JavaScript / TypeScript模块
Output Colorizer	输出提示的文字颜色有一些变化，方便获取关键信息
open in browser	在浏览器中打开，安装后在左侧目录中右键点击会出现 open in browser 选项。
Path Intellisense	文件路径提示。
Prettier - Code formatter	代码保存自动格式化
Partial Diff	文件比较
Quokka.js	Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了
Polacode	生成代码截图工具打开文件在屏幕截图中选择想要的代码并复制它，转到 View> Command Palette，然后在框中输入> polacode 并选择 Polacode 选项。它将创建一个单独的水平窗口。点击窗口按 Ctrl + V 粘贴代码。在代码下面，粘贴另一个窗口，会看到像图标这样的摄像头。点击这个图标并保存图片。
px to rem	px转换rem工具
REST Client	接口测试工具
Regex Previewer	这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。快捷键Ctrl+Alt+M呼出右边的并排文本框，左边窗口输入的正则会实时匹配右边文本内容
Remote - SSH	连接服务器管理文件
Settings Sync	多设备同步Vue插件
Stylelint	CSS/SCSS/Less语法检测
Sort Lines	选中多行文字排序
SVG Viewer	此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。在svg文件上右键菜单选择"SVG Viewer: View SVG"
Surround	在代码块中增加外包裹模板
TODO Highlight	高亮todo注释
TODO Tree	todo树展示，快速定位到todo位置
Toggle Quotes	切换双引号、单引号、反引号
Turbo Console Log	快速添加 console.log 信息，js debug 必备快捷键 ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
Vetur	Vue 语法高亮显示, 语法错误检查, 代码自动补全
VS Code CSS Comments	css代码注释。
VSCode Google Translate	多语言开发时，切换语言包。
vscode-browser-plus	在编辑器内预览HTML，通过开启端口(10086)监听当前打开项目的根目录，在编辑器内预览网站，省去了频繁切换浏览器、编辑器看页面效果，修改代码后自动刷新页面。
vscode-fileheader	顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间快捷键: Ctrl+Alt+i
vscode-icons	设置目录列表文件类型图标
vscode-spotify	音乐播放控制器
Window Colors	打开多个窗口时显示不同的颜色
wakatime	编程时间及行为跟踪统计

React常用插件

名称	功能
Reactjs code snippets	代码提示
React-Native/React/Redux snippets for es6/es7	代码提示
Typescript React code snippets	tsx的react组件片段
CSS Modules	对使用了css modules的jsx标签的类名补全和跳转到定义位置

参考资料：
https://www.cnblogs.com/zhn0823/p/6542335.html
https://blog.csdn.net/shenxianhui1995/article/details/81604818
https://github.com/varHarrie/varharrie.github.io/issues/10

VSCode常用好用插件大全相关推荐

VScode 常用30个插件，非常全面！
VScode 常用30个插件,非常全面! 1. Vetur/Volar :vue/vue3语法高亮.智能感知.Emmet等, 包含格式化功能, Alt+Shift+F (格式化全文) 2. ESLin ...
HTML基础--标签VSCode常用快捷方式和插件
思维导图(个人制作,可能有误):https://www.mubucm.com/doc/2EghdAXgYvc 1.浏览器兼容性网站:https://caniuse.com/ 2.Web网页的组成部分 ...
github前端插件大全
常用的插件和库 2017年09月12日 11:42:08 阅读数:1300 本文整合罗列一些平时工作或者练手项目中很可能用到的.github上实用.轻量级.无依赖的插件和库,包括功能插件.UI组件.炫 ...
vscode常用插件大全
vscode常用插件大全参考文章 https://mp.weixin.qq.com/s/1PkWPApvn5uWJl_cdzcoTA 说明该片文章基本介绍了 vscode 常用插件 , 已经很全面 ...
VsCode常用插件和快捷键
VsCode常用插件和快捷键 vscode快捷键 alt+w:快速打印变量(需要插件Wrap Console Log) alt+q:加书签 alt+d:加`<div>`标签(htmltag ...
VScode常用插件（C/C++开发）
俗话说,VScode万物皆可插件:有了合适的插件VScode会非常的得心应手. 下面记录一下C/C++中常用的插件,随时补充. 注意: 此文中记录的插件均通过在线安装的方式安装:如果你的VScode无 ...
【Vscode】 Vscode常用插件
Vscode常用插件
VScode常用插件下载
VScode常用插件下载记录自己第一次使用VScode,边学习边记录,以后继续努力! Visual Studio Code的插件系统很好用,虽然vscode自带的功能比较少,但很多插件可以帮我们实现 ...
VSCode常用插件-快捷键
VSCode常用插件-快捷键 1. 快速复制一行快捷键: shift+alt+ 下箭头(上箭头) 或者 ctrl+c 然后 ctrl+v 2. 选定多个相同的单词快捷键: ct ...

VSCode常用好用插件大全

React常用插件

VSCode常用好用插件大全相关推荐

最新文章

热门文章