以下是我自己在工作中常用的插件,写给刚入门的前端coder。VSCode插件商店中实用的插件还是很多的,大家也可以对感兴趣的插件下载下来尝试一下的!

持续更新

插件名称 概述 作用 常用默认快捷键
Chinese (Simplified) Language Pack for Visual Studio Code 汉化中文包 VSCode汉化包,安装重启后就界面就是简体中文了
Live Server 本地动态服务 相当于一个本地服务器.开启本地HTTP服务,代码保存后,网页实时更新,比open in browser的插件好用,后者只能打开html文件,代码变更后需要手动刷新才能加载新增的代码 开启本地动态服务alt+L+O
关闭本地动态服务alt+L+C
Auto Close Tag 标签自动补全 html的书写中自动给你添加闭合标签
Auto Rename Tag 自动重命名标签 html的书写中你重命名标签的时候,自动给你修改相应的闭合标签或者开始标签
Beautify 代码美化 在格式化代码的时候,自动美化代码(主要就是缩进、空格、换行等),让代码看起来更加美观,可读性更强,支持javascript、JSON、CSS、Sass、HTML
VSCode默认格式化代码Shift+Ctrl+F
HTML Snippets HTML代码片段 HTML的代码片段,直接输入标签名再回车就可以自动给你补全尖括号,极客必备 标签名+空格
JavaScript (ES6) code snippets JS代码片段 JS代码片段,包含ES6,支持的语言有JavaScript、TypeScript、JavaScript React、TypeScript React、Html、Vue 常见快捷键详见插件说明
Vetur Vue工具 对于在VSCode中开发Vue必备插件!语法高亮、vue代码片段、错误检测、vue代码美化等强大的功能,具体介绍详见知乎大神的回答 详见大神回答
Vue 3 Snippets Vue3.0代码片段 Vue3.0的代码片段,对使用Vue3.0开发项目的Coder比较友好,它基于2.0和3.0的API增加了一些代码片段 常见快捷键详见插件说明
ESLint 前端代码检查工具 现在最火的前端代码检查工具,帮助你避免一些低级的bug,给你删除多余的代码,还可以帮助在团队统一代码风格,使得代码可以更加优雅的合并。可是,对于刚入门前端的Coder不太推荐使用。因为如果是刚入门的Coder,代码写的七零八乱,你就会发现它给你的代码标注的整片鲜红,满是错误。推荐再掌握了一定的代码规范基础后,再使用这个插件。

前端Vscode常用插件概述的更多相关文章

  1. 前端vscode常用插件

    Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个 ...

  2. Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN

    Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...

  3. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  4. Notepad++前端开发常用插件介绍

    Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...

  5. sublime text 3 前端开发常用插件

    sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全:  Emmet CoffeeScri ...

  6. VSCode常用插件之vscode-stylelint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...

  7. VSCode常用插件之ESLint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...

  8. VSCode常用插件汇总

    vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code :   ...

  9. VSCode常用插件之Simple New File使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Simple New File这是一个从命令面板简单创建新文件.文件夹.通过侧边栏创建新文件可能会很繁琐.该扩展旨在通过命令面板使创建文件或目 ...

随机推荐

  1. 记STM32F103C8T6+STLINK下载器在Keil中的设置

    调试代码为: /************************************** * 文件名 :main.c * 描述 :获取CPU的96bit ID 和 flash的大小,并通过USAR ...

  2. Abp(net core)+easyui+efcore实现仓储管理系统——出库管理之七(五十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...

  3. 第1.2节 Python学习环境的使用

    Python的环境安装好以后,可以通过IDLE(Python 3.7 64-bit)进入图形界面使用Python,也可以通过Python 3.7 64-bit进入命令行交互式界面,两者都可以使用,不过 ...

  4. moviepy音视频剪辑:使用rotate函数实现视频变换处理以及参数expand取值为True时的花屏问题解决方案

    ☞ ░ 前往老猿Python博文目录 ░ 一.rotate函数功能介绍 moviepy的rotate函数用于将剪辑逆时针旋转指定的角度或弧度. 调用语法:rotate(clip, angle, uni ...

  5. 第8.2节 Python类的__init__方法深入剖析:构造方法案例详解

    前面一节介绍了构造方法定义的语法,并进行了语法解释说明,本节将通过案例来说明构造方法参数传递及返回值的情况. 一.    案例说明 本节定义一个汽车类,它有四个实例变量:wheelcount, pow ...

  6. Redis Sentinel-深入浅出原理和实战

    本篇博客会简单的介绍Redis的Sentinel相关的原理,同时也会在最后的文章给出硬核的实战教程,让你在了解原理之后,能够实际上手的体验整个过程. 之前的文章聊到了Redis的主从复制,聊到了其相关 ...

  7. 懒松鼠Flink-Boot(Flink+Spring):一款将Flink与Spring生态完美融合的脚手架工程

    目录 你可能面临如下苦恼: 接口缓存 重试机制 Bean校验 等等...... 它为流计算开发工程师解决了 有了它你的代码就像这样子: 仓库地址:懒松鼠Flink-Boot 1. 组织结构 2. 技术 ...

  8. c++笔试题3

    一.[阿里C++面试题]1.如何初始化一个指针数组.答案: 错题解析:首先明确一个概念,就是指向数组的指针,和存放指针的数组. 指向数组的指针:char (*array)[5];含义是一个指向存放5个 ...

  9. SpringCloud 源码系列(4)—— 负载均衡 Ribbon

    一.负载均衡 1.RestTemplate 在研究 eureka 源码上篇中,我们在 demo-consumer 消费者服务中定义了用 @LoadBalanced 标记的 RestTemplate,然 ...

  10. C++ 中使用 PRId64

    同一份代码,Ubuntu 14.04.1 编译没有问题,centos 7 上编译提示错误: error: expected ')' before 'PRId64' 这里两个地址说得很清楚了: http ...