18款vscode插件足以应对日常开发

649 阅读2分钟

这是我参与8月更文挑战的第31天,活动详情查看:8月更文挑战

介绍一些开发中常用的vscode扩展,虽然少,但是个个都是能抗能打!!!

基础扩展

Auto Close Tag

闭合标签

Auto Rename Tag

重命名一个标签,另一个也跟着改变

Better Comments

更鲜艳的注释,默认五种注释方式,可以自己添加

image-20210828160840567.png

Bracket Pair Colorizer

让花括号颜色区分(层次较多时,好用)

Highlight Matching Tag

高亮括号范围。再配上上面的插件,层次再多也不怕啦

Chinese (Simplified) Language Pack for Visual Studio Code

汉化没得说,估计都有

Code Spell Checker

拼写检测

Markdown Preview Enhanced

vscode 预览 md 文件

Path Intellisense

路径智能提示,好用

代码运行

Code Runner

右键运行多种语言,运行快捷键ctrl + alt + n,停止快捷键ctrl + alt + m

Live Server

右键文件在浏览器打开html文件,相当于具备上面open in browser扩展的功能,而且具有热更新

代码片段

JavaScript (ES6) code snippets

支持的文件格式:

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

支持的语法包含导入、导出、类、JS方法、console

Vetur

vue开发者必备,但是不知道大家使用这个扩展会不会有点卡顿的问题,我这是遇到了,并且通过实践也解决了,你的vscode编辑器语法提示卡顿?

Vue 3 Snippets

提供代码片段,这个是支持 Vue 2 及 Vue 3 的,安装这个开发vue就差不多了

支持的文件格式:

  • vue(.vue)
  • HTML(.html)
  • javascript(.js)
  • typescript(.ts)
  • pug(.pug)

具体代码片段,见 中文文档

效率提升

GitLens — Git supercharged

git提交记录,可以在编辑器内看到是谁改的代码

Turbo Console Log

打印变量分为两个步骤:

  • 选中需要打印的变量
  • 按下组合键:ctrl + alt + L

注释打印内容

alt + shift + C

解开注释

alt + shift + U

删除注释

alt + shift + D

eslint + prettier

  • 代码自动检测风格
  • 保存格式化
  • 继承规则
  • 自定义规则

这对组合感觉很好用,但不是开箱即用的,需要添加配置,欢迎看我前文eslint + prettier实践:还在手动调整检查代码格式??手把手教你eslint+prettier自动验证代码风格、保存格式化代码