vsCode 推荐插件

1、TODO Highlight

写代码过程中, 突然发现一个 Bug, 但是又不想停下来手中的活, 以免打断思路, 怎么办？按照代码规范, 我们一般是在代码中加个 TODO 注释。比如：（注意, 一定要写成大写TODO, 而不是小写的todo）

//TODO:标注此处有个BUG, 暂存

或者：

//FIXME:How are You? 

安装了插件 TODO Highlight之后, 按住「Cmd + Shift + P」打开命令面板, 输入「Todohighlist」, 选择相关的命令, 我们就可以看到一个 todoList 的清单。

2、Search node_modules

node_modules模块里面的文件夹和模块实在是太多了, 根本不好找。好在安装 Search node_modules 这个插件后, 输入快捷键「Cmd + Shift + P」, 然后输入 node_modules, 在弹出的选项中选择 Search node_modules, 即可搜索 node_modules 里的模块。

3、Local History(慎用)

维护文件的本地历史记录, 可以安装。代码意外丢失时, 有时可以救命。
但是有弊端,他会在你的项目下面生成一个 [ .history ] 文件,当你进行项目提交时,如果没有配置好,这些也会提交上去,造成不必要的提交,可能你就修改一个文件,但是生成了几百个记录文件,别问我是怎么知道的

详情可以看下方 [Ⅳ - IDEA和VS code设置默认换行符为LF](#Ⅳ - IDEA和VS code设置默认换行符为LF)部分,你就知道为何我这么说了

4、Image Preview

图片预览。鼠标移动到图片 url 上的时候, 会自动显示图片的预览和图片尺寸。

5、kiwi-linter -->国际化处理

kiwi 的 VS Code插件工具, 主要用于检测代码中的中文, 高亮出中文字符串, 并一键提取中文字符串到对应的语言 Key 库。

同时优化开发体验, 在 VS Code 中提供搜索中文, 提示国际化值对应的中文功能。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgCwDCSw-1650264707534)(D:\study\项目\前端\vscode\vscode.assets/image-20210802182512649-16299666148031.png)]

6、Vscode counter --> 项目代码统计

快速统计项目中代码行数以及分类,直接拓展商店搜索安装即可

① 快速统计代码行数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dMckRMSo-1650264707535)(D:\study\项目\前端\vscode\vscode.assets/image-20210917181537839.png)]

② 显示结果

这里用本笔记文件为例:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZVP53pO-1650264707535)(D:\study\项目\前端\vscode\vscode.assets/image-20210917181746314.png)]

③查看详情

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ed06jGse-1650264707536)(D:\study\项目\前端\vscode\vscode.assets/image-20210917182053310.png)]

Ⅲ - 针对 框架 或 技术 的插件

此部分是针对技术或者框架出的插件

1、Vetur

Vue 多功能集成插件, 包括：语法高亮, 智能提示, emmet, 错误提示, 格式化, 自动补全, debugger。VS Code 官方钦定 Vue 插件, Vue 开发者必备。

2、Simple React Snippets

与上方Vetur类似, React代码提示与补全, 只不过是React开发者用的

3、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的语法智能提示。

4、minapp:小程序支持

小程序开发必备插件

5、JavaScript(ES6) code snippets

ES6 语法智能提示, 支持快速输入。

6、Class autocomplete for HTML

自动重命名配对的HTML/XML标签(必备)