VSCode 插件（分类查找）_community material theme-CSDN博客

本文链接：https://blog.csdn.net/estrusKing/article/details/122673150

文章目录

优化外观
功能扩展
提升编码效率
代码格式化
颜色提示

优化外观

Better Comments（不同种类的注释显示不同的颜色）

美化注释的插件，可以根据不同种类的注释，显示不同的颜色，一目了然。
在这里插入图片描述
正常注释，前面使用相应的前缀即可（vs code 会结合插件自动用配置的颜色去渲染，插件自带5种高亮注释）

Chinese（软件转译中文）

变成中文
在这里插入图片描述

Community Material Theme / Material Theme（主题颜色）

修改编辑器的主题，内置很多种
在这里插入图片描述

安装完了以后点击设置颜色主题就可以了。在这里插入图片描述

Error Gutters（报错红波浪线提示）

报错的地方都有大红波浪线提示，可以说是非常的直观了
在这里插入图片描述

VSCode Great Icons/Material Theme Icons（更改文件图标）

在这里插入图片描述

Material Theme（主题色彩）

在这里插入图片描述

功能扩展

翻译

Comment Translate

选中自动翻译，很简单。

还配有自动翻译功能，但不是特别灵敏好用，按 Ctrl + Shift + P 输入 translate 选择翻译选区即可。
在这里插入图片描述

Google Translate

快捷键

Ctrl + Shift + T

用法

输入中文，选中之后按快捷键秒翻译为英文，速度很快，而且不与其他两个插件冲突。

配置项

可以调整翻译其他语言
在这里插入图片描述

Polacode (代码截图工具)

在这里插入图片描述

AZ AL Dev Tools/AL Code Outline（便于找节点，方法）

梳理代码结构，安装完后在文件图标里就会多出一个 AL OUTLINE 的选项。
在这里插入图片描述
可以看到展开第一层是极具 vue 单文件组件特点的 template，script，style。逐层展开就可以看到 dom 节点， methods 里面定义的函数等，然后点击就可以快速定位到目标所在位置。

Code Runner（运行代码，可以在编辑器中查看结果）

可以在控制台看 console.log
VSCode插件推荐 | Code Runner: 代码一键运行，支持超过40种语言在这里插入图片描述

Code Spell Checker（检查代码中单词拼写是否正确）

在这里插入图片描述

Debugger for Chrome（前端调试开发）

这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，安装以后，无需打开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox，Debugger for Microsoft Edge等。
在这里插入图片描述
安装完以后，左边会出现一个调试的小图标，打开以后再点击上方小齿轮进行配置。根目录下会自动新建 .vscode 文件夹以及 launch.json 文件，不用管。

VSCode配置 Debugger for Chrome插件

git提交历史（Git History / GitLens — Git supercharged）

右键单击文件选择 Git：View File History 来以列表的形式查看所有的提交记录。
在这里插入图片描述

LeetCode（刷算法题）

在这里插入图片描述

Local History（本地代码的修改记录）

通常我们写错代码了可以撤销，但是撤销完以后再修改，想要取消撤销就难了。
有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比。
安装完以后，项目根目录下会自动生成 .history 的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore，不然每次提交代码的时候就要遭重了。
在这里插入图片描述

open in browser（在浏览器中打开 html 文件）

安装完以后在目标的 html 文件上右击，选择 open in default browser 即可打开使用浏览器打开文件。
在这里插入图片描述

Partial Diff（文件比较）

选中一代码，右键 Select Text for Compare ，选中另外一部分代码，右键Compare Text with Previous Selection即可。是中文的。
在这里插入图片描述

Postcode（在 vscode 里面使用 postman）

安装完以后左侧菜单会出现一个小盒子的图标，点开以后点击 Create Request 就可以正常使用了。
在这里插入图片描述

Project Manager（项目管理器）

安装完以后左侧列表会出现一个文件夹的小图标，点开以后就可以进行项目管理了，通常都是操作projects.json 这个文件，点击项目名字就可以切换了，也可以新窗口打开。
在这里插入图片描述

在这里插入图片描述

Quokka（实时显示代码的运行结果）

在这里插入图片描述

REST Client （编辑器调试接口）

在这里插入图片描述

提升编码效率

React

ES7 React/Redux/GraphQL/React-Native snippets （更加好用的react提示工具，丰富的快捷键）

在这里插入图片描述

Vue

Vue 3 Snippets (vue2,vue3的一些快捷代码块)

在这里插入图片描述

代码片段类补全提示插件

JS 、TS

JavaScript Booster （检测优化你的代码）

在这里插入图片描述

Code Spell Checker （英语拼写检测，对于js命名很有用）

在这里插入图片描述

JavaScript(ES6) code snippets （ES6语法智能提示，快速输入，还支持.js，还支持.ts，.jsx，.tsx，.html，.vue）

在这里插入图片描述

TypeScript Hero （TS开发提示工具）

在这里插入图片描述

JavaScript and TypeScript Nightly（内置 JavaScript 和 TypeScript 支持，代码自动补全。）

在这里插入图片描述

Document This （js代码规范注释）

在这里插入图片描述

vue

Vue VSCode Snippets（快速创建vue的基础模板文件）

在这里插入图片描述
首次安装后重启了Vscode 右下角要选择对应的语言

安装配置好了插件，我们就可以使用插件命令生成我们vue的基础模板。

自定义模板
首先找到这个jso文件：C:\Users\Administrator\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets 一般默认安装了插件之后都会在这个位置能找到。【版本不一样不可复制查找，需要根据自己电脑一步步点击进去对应文件】
在这里插入图片描述
打开vue.json加入我们自己的配置，保存然后重启Vscode。

对立面文件编辑成自己徐璈要的格式即可

vetur（vue2的代码高亮及语法提示【vue2使用，Volar 需要禁用】）

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger
在这里插入图片描述

Vue Language Fecatures (Volar)（vue3的代码高亮及语法提示【vue3使用，vetur 需要禁用】）

在这里插入图片描述

vue-component（输入组件名称自动导入找到的组件，自动导入路径和组件）

选中后自动输入组件名（包含必填属性）、import语句、components属性
在这里插入图片描述

组件库

Element UI Snippets （ element UI提示）

插件地址
在这里插入图片描述

vue-helper（快速补全element标签）

在这里插入图片描述

Ant Design Vue helper （快速补全ant design标签）

在这里插入图片描述

其他

Tabnine（智能提示代码，可以预测你将要写的代码进行提示）

在这里插入图片描述

Template String Converter（在字符串中输入$触发，将字符串转换为模板字符串）

在这里插入图片描述

Parameter Hints（提示函数的参数类型及消息）

在这里插入图片描述

其他代码片段类插件

提供代码片段，使用几个字符的简写，可以敲出整段代码。
在这里插入图片描述

格式转换

px to rem & rpx (cssrem)（自动换算单位的插件,px转换rem工具。）

在这里插入图片描述
出现提示以后回车即可。

json2ts（自动把 json 格式转成 ts 的类型）

复制 json 之后按 ctrl + alt + v 即可
在这里插入图片描述

中文标点符号转英文（可自定义转换）

在这里插入图片描述

注：使用搜狗输入法时，在中文输入状态下，按 ?/ 键和 |\ 键都能输入顿号，实在没有必要。为了编程需要，请在输入法的“自定义标点符号”设置里永久更改 |\ 键对应的中文标点输出为 \。
搜狗输入法——更多设置

提示

Error Lens （非常棒的一个错误提示工具）

在这里插入图片描述

定位 / 路径、引入提示

CSS Peek（点击类名迅速定位到样式）

在这里插入图片描述

Path Intellisense（引入文件的时候，路径自动补全。）

在这里插入图片描述

Npm Intellisense（导入 npm 包的时候，智能提示。）

在这里插入图片描述

Node.js Modules Intellisense node.js智能提示。

在这里插入图片描述

打印 / console.log

Turbo Console Log（生成 console.log）

支持自定义 console.log 的内容，包括文件名，路径，大小等，还可以添加自己喜欢的 emoji 表情，快捷键 ctrl + alt + L。

在这里插入图片描述

javascript console utils（快速生成 console.log）

选中变量，然后按 ctrl + shift + L 就可以生成了。需要删除的时候按 ctrl + shift + D 即可删除。
在这里插入图片描述

Quokka.js（时显示打印输出）

安装插件后，ctrl+shift+p输入Quokka new JavaScr…即可使用

在这里插入图片描述

change-case（快速切换变量格式）

大坨峰，小驼峰，下划线等等，它里面有很多类型。使用方法按 F1（windows），输入对应命令即可。
在这里插入图片描述

Live Server（监听 Ctrl + s 页面自动刷新）

在这里插入图片描述

## Live Server（正则大全）

在这里插入图片描述

代码格式化

Beautify（保存格式化）

在这里插入图片描述
小技巧：对象或者解构赋值老是换行。
在vscode 设置里面修改如下

"beautify.config": {  "brace_style": "collapse,preserve-inline"}

ESLint（保存格式化）

在这里插入图片描述

Prettier - Code formatter（保存格式化）

在这里插入图片描述
设置步骤
第一步，先打开vscode软件，左下角设置中的设置（或者左上角文件中的首选项中的设置）
第二步，先设定自动保存文件，搜索框贴入files.autoSave筛出设置项，并把设置项属性选择为onFocuschange。
在这里插入图片描述
第三步，设定编辑器默认代码格式化（美化）的插件为Prettier，同理在搜索设置框贴入editor.defaultFormatter，将配置项选择为Prettier。

第四步，设定Prettier插件保存时自动格式化代码，搜索设置项贴入editor.formatOnSave，勾选选项框。
在这里插入图片描述