持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情
1、必备插件
1.1、 Chinese(中文)
安装后,按快捷键Ctrl+Shift+P,输入 configure language
1.2、Settings Sync(配置同步到云端)
可以让我们的vscode配置同步到云端,当我们跟换电脑或者再次安装vscode的时候,只需要登录账号即可同步配置了
1.3、wakatime(编程时间及行为跟踪统计)
编程时间及行为跟踪统计
2、效率神器
2.1、HTML Snippets(代码提示)
HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了
2.2、Auto Close Tag(自动闭合标签)
自动闭合HTML/XML标签
2.3、Auto Rename Tag
更改 HTML/XML 标签名时,自动更新相对应的开始标签或结束标签的标签名
2.4、Bracket Pair Colorizer(括号做颜色区分)
2.5、Browser Preview(VSCode里面打开浏览器)
可以在vscode里面打开浏览器,一边编码一边查看
2.6、REST Client(接口调试)
可以在vscode里面进行接口调试,提供丰富的api配置方式,让我们不用离开编辑器也可以随时调用接口调试
新建一个.http文件,写下基本的测试代码,点击 Send Request即可在右边窗口查看接口返回结果,非常nice
2.7、CSS Peek(css样式查看器)
2.8、Partial Diff(文件比较)
文件比较
2.9、Npm Intellisense(自动完成导入语句中的npm模块)
可自动完成导入语句中的npm模块
2.10、open in browser(快速打开html文件到浏览器预览)
快速打开html文件到浏览器预览
2.11、Path Intellisense(快速引入文件)
自动提示文件路径,支持各种快速引入文件
2.12、Image preview(预览图片)
鼠标悬浮在链接上可及时预览图片
2.13、VS Code JavaScript(ES6) snippets
为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持
2.14、Vetur(官方钦定Vue插件)
VScode官方钦定Vue插件,Vue开发者必备。内含语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger等实用功能
2.15、Vue 2 Snippets
vue2代码补全
2.16、vue vscode snippets
vue快捷键
如:vbase、vdata、vmethod等等
2.17、Vue Language Features (Volar)
vue3插件
2.18、wechat-snippet
微信小程序代码辅助,代码片段自动完成
2.19、wxml
微信小程序wxml格式化以及高亮组件(高度自定义)
2.20、live-server
在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
2.21、uniapp-snippet
uniapp片段提示
2.22、Flutter
Flutter代码支持
2.23、SVG Viewer
无需离开编辑器,便可以打开 SVG 文件并查看它们
3、Git集成
3.1、Git Graph(Git 图形化显示和操作)
3.2、GitLens(快速查看更改行或代码块的对象)
GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象
3.3、GitHistory(可查看和搜索git日志以及图形和详细信息)
GitHistory可查看和搜索git日志以及图形和详细信息,同时还支持分支比较,分支管理等操作
4、美化
4.1、vscode-icons(漂亮的目录树图标主题)
提供了非常漂亮的目录树图标主题
4.2、Beautify(右键鼠标一键格式化)
在代码文件右键鼠标一键格式化 html,js,css
4.3、Better Comments(丰富注释颜色)
丰富注释颜色
自定义样式,需要写入配置代码
配置代码 "better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }]
使用// * 绿色的高亮注释复制代码TODO Tree
5、代码规范
5.1、change-case(变量命名规范)
变量命名规范
5.2、JavaScript Booster(代码改进)
会提示对应的不合理原因和改进方案
5.3、avaScript (ES6) code snippets(智能提示与快速输入)
ES6语法智能提示,以及快速输入
5.4、ESlint(严谨的规范书写)
规范js代码书写规则,如果觉得太过严谨,可自定义规则
5.5、TSLint(书写规范)
ts的书写规范,这个插件是一个系列,同时还提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX
5.6、Code Spell Checker(拼写检查程序)
是拼写检查程序,检查不常见的单词,如果单词拼写错误,会给出警告提示
5.7、koroFileHeader(生成文件头部注释和函数注释)
在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!
不光如此,还能生成一些特别有意思的注释,比如这一条喷火龙...
6、装X神器
6.1、超越鼓励师
在 VS Code 中连续写代码一小时(时间可配置),会有杨超越提醒你该休息啦~
6.2、韭菜盒子
韭菜盒子,VSCode 里也可以看股票 & 基金实时数据,做最好用的投资插件
6.3、我不爱掘金
把掘金网站塞到VSCode里,并添加了更多乐趣!
6.4、小霸王
小霸王是一款基于vscode的nes游戏插件,能让你在紧张的开发之余在vscode里发松身心。通过劳逸结合,提升开发效率。
6.5、Markdown All in One(书写Markdown)
可以在vscode里面快乐的书写Markdown,功能强大。丰富的快捷键,边写边看,轻松转化为html或pdf文件
6.6、Polacode-2020(转化成一张逼格满满的图片)
可以将我们的代码转化成一张逼格满满的图片
6.7、WeReadForVSCode
WeRead for VSCode 微信读书 VSCode 插件