工作中使用到的那些能提效的vscode插件,个人都体验过!!!

1. Better Comments(多色彩注释)

多彩注释,根据不同的注释符号,显示不同的注释颜色

image.png

2. koroFileHeader(注释助手)

用于一键生成 文件头部注释和函数注释 支持一键添加佛祖保佑永无BUG、神兽护体等注释图案 文件头部注释自动更新最后编辑人和编辑时间,函数注释自动生成和参数提取。 支持的语言众多,插件可以帮助用户养成良好的编码习惯,规范整个团队风格。

image.png
multiLineParamsCreate.giffunction-params.gif

3. Simple React Snippets(react快捷生成代码块)

如果你每次新建 react 文件的时候还需要手动的编写导入、导出相关组件那么推荐你使用这个插件,可以快速生成 react 基础模板代码。 与vscode中在html文件中使用“ ! ”一个原理

例如:

  1. //在新建的js文件中输入 ccc 弹出提示按回车即可
  2. class | extends Component {
  3. constructor(props) {
  4. super(props);
  5. this.state = { | };
  6. }
  7. render() {
  8. return ( | );
  9. }
  10. }
  11. export default |;

4. Bracket Pair Colorizer/Bracket Pair Colorizer 2 - (括号多颜色)

给对应的代码块或小括号的开始与闭合括号添加对应的颜色。 当前问更新时(2022年8月2日15:56:17),最新的vscode 会提示该组件不再维护,但是作者还在维护更新中,所以可以放心使用

example.png
activeScopeBorder.pngforceUniqueOpeningColorEnabled.png

5. Auto RenameTag(自动重命名标签)

会自动个替换对应标签的名称

usage.gif

6. GitLens(使用git的必备)

方便查看git日志,git 重度使用者必备 可以精确查看某一行的更改记录、更改时间、更改人

code-lens.png
current-line-blame.png
revision-navigation.gif

7. Path Intellisense(路径查找)

自动提示文件路径,支持各种快速引入文件

vscode那些亲测不错的插件 - 图12

8. Npm Intellisense(node必备

require 时的包提示

auto_complete.gif

9. Import Cost (导入包的成本)

Import Cost 可以显示咱们在VS代码编辑器中导入的程序包的大小。 尝试过,无法在复杂的引入环境中使用

vscode那些亲测不错的插件 - 图14

10. Toggle Quotes(引号切换)

Toggle Quotes是一个有趣的实用工具扩展,它允许咱们在引号之间进行切换。当需要在使用字符串插入时切换到反引号时,它就派上用场了。 简单的引号切换器,循环通过 “ ‘ 和 `

使用的时候,选中的字符串外面必须得包裹着一层引号!!!!
快捷键:MAC: cmd+' Win\Linux: ctrl+'

11. IntelliSense for CSS Class Names in HTML(类名提示)

基于在工作空间中找到的定义性,并提供了CSS 类名补全。 自动获取 项目里 声明过得 class 类目 在 template 或者 jsx 中 就会读取到 有智能提示效果 再也不用担心自己写的类名太长而记不住了 适合 喜欢用原子类名 的 以及 组件库开发者

68747470733a2f2f692e696d6775722e636f6d2f3563724d66546a2e676966.gif

12. any-rule(正则大全)

常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台

vscode那些亲测不错的插件 - 图16
vscode那些亲测不错的插件 - 图17

13. ax-reg-collect(常见正则收集)

这个插件只是更新了两版,2020年11月就没再更新 但是里面的正则表达式还是可以使用的 已收集的正则均来自于fee-helper的正则小组件

GIF.gif

14. 别名路径跳转

别名路径跳转插件,支持任何项目,可以自由配置映射规则,自由配置可缺省后缀名列表

xiaoguotu.gif

15. TabNice(代码智能提示,Copilot 的平替插件)

基于深度学习的代码提示插件,官方号称是最好的代码提示插件。可以支持任意语言 而且不像 Copilot 那样喧宾夺主,只是在输入的时候,进行只能提示。不会替换你已经输入的代码。

GIF.gif

16. Live Server

可以在本地临时起一个本地服务,以当前文件夹为根目录

image.png
image.png
image.png

17、path-alias(一个可以解决路径别名提示,跳转的vscode插件)

在导入组件的时候,使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)

path-alias-completion.gifpath-alias-config.gif

18、Template String Converter(普通字符串转模板字符)

在字符串中输入$触发,将字符串转换为模板字符串 适合在一段字符中需要拼接动态变量的场景

demo.gif

19、vue-component(Vue开发)

功能:输入组件名称自动导入找到的组件,自动导入路径和组件 选中后自动输入组件名(包含必填属性)、import语句、components属性(如果有需要)。 标签内输入p-提示属性,输入e-提示事件,选中后自动输入。

vscode那些亲测不错的插件 - 图27f2.gif
f3.gif

20、echarts-enhanced-completion(Echars 智能提示插件)

这是一个用于编辑 echarts 的配置项时进行补全提示的 vscode 的扩展。 安装并启用插件后,在你需要用作 echarts 配置项的对象的上一行添加一行注释: /** @type EChartsOption */ (输入 echartsoption 可以使用代码片段),用于定义该对象为配置项对象。 现在,在配置项对象中按下 Enter 键时,插件会显示你可能需要的配置项的列表,并且提示中有对该配置项的详细说明。

CompletionItems.gifHover.gifInit.gifSnippets.gif

21、CSS Initial Value(css属性提示)

显示每个CSS属性的初始值,当光标停留在 CSS 属性时 CSS、Less、Sass、Scss 这些文件都支持

vscode那些亲测不错的插件 - 图34demo.gif