Auto Close Tag 自动添加HTML / XML关闭标签 
Auto Rename Tag 自动重命名配对的HTML / XML标签 
Beautify 格式化代码 【必须】
Bracket Pair Colorizer 颜色识别匹配括号 
Code Runner 非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等
安装完成后,右上角会出现:▶ 
change-case 虽然 VSCode 内置了开箱即用的文本转换选项,但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式,包括驼峰命名、下划线分隔命名,snake_case 命名以及 CONST_CAS 命名等 
Chinese (Simplified) Language Pack for Visual Studio Code 中文简体语言包

安装后,在 locale.json 中添加 "locale": "zh-cn",即可载入中文(简体)语言包。要修改 locale.json,你可以同时按下 Ctrl+Shift+P 打开命令面板,之后输入 "config" 筛选可用命令列表,最后选择配置语言命令。

Color Info 这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了 
CSS Peek 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码 
Debugger for Chrome 前端调试, 
ESLint EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性 
filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 
Git History 以图表的形式查看 git 日志 
GitLens — Git supercharged 显示文件最近的 commit 和作者,显示当前行 commit 信息 
HTML Boilerplate 通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构 
HTMLHint HTML 代码格式检测 
HTML Snippets 代码自动填充 
htmltagwrap 在选中HTML标签中外面套一层标签
”Alt + W” (“Option + W” for Mac) 
Image Preview 鼠标移到路径里显示图像预览 
Indenticator 突出目前的缩进深度 
intelliSense for CSS class names in HTML 把项目中 css 文件里的名称智能提示在 html 中 
JavaScript (ES6) code snippets es6代码片段 
Live Server 浏览器实时刷新 
Node.js Modules Intellisense 可以在导入语句中自动完成JavaScript / TypeScript模块 
npm Intellisense require 时的包提示 
Path Intellisense 路径自动补全 
Quokka.js Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈
使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了 
Regex Previewer 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项 
SVG Viewer 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项 
Vetur Vue 语法高亮显示, 语法错误检查, 代码自动补全 【vue项目必须】
(配合 ESLint 插件效果更佳) 
vscode-fileheader 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
快捷键: Ctrl+Alt+i
(默认信息可在 文件→首选项→设置 中修改)

setting.json

{
"window.zoomLevel": 1,
"terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe", // 使用git终端(直接显示当前分支)
"files.autoSave": "onFocusChange",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"fileheader.Author": "xxx",
"fileheader.LastModifiedBy": "xxx",
"prettier.semi": false, // 结尾不加分号
"prettier.singleQuote": true, // 单引号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true // 格式化以单引号为主
}
},
}

前端VScode推荐插件的更多相关文章

  1. 前端Vscode常用插件概述

    以下是我自己在工作中常用的插件,写给刚入门的前端coder.VSCode插件商店中实用的插件还是很多的,大家也可以对感兴趣的插件下载下来尝试一下的! 持续更新 插件名称 概述 作用 常用默认快捷键 C ...

  2. 前端vscode常用插件

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

  3. VSCode 开发插件 推荐

    VSCode 必装的 10 个高效开发插件  本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视 ...

  4. VSCode工具插件推荐

    一:VSCode简介 VSCode( Visual Studio Code)是微软出的一款轻量级代码编辑器 ,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual ...

  5. WordPress 前端投稿/编辑插件 DJD Site Post(支持游客和已注册用户)

    转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...

  6. vscode编写插件详细过程

    前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程.然而文章还没有写,园子里面已经有人发布一个文章 ...

  7. vscode编写插件

    vscode编写插件详细过程 前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程.然而文章还没有写 ...

  8. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

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

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

随机推荐

  1. Alpha_5

    一. 站立式会议照片 二. 工作进展 (1) 昨天已完成的工作 a. 我的·蜕变记录,我的·我的卡包,我的·习惯简记页面设计 b. 数据统计和数据详情页面设计 c. 实现自定义习惯图片和获取卡片功能页 ...

  2. Combox控件绑定大量数据卡顿问题与解决办法

    一般我们WPF中Combox的绑定都是下面这种写法. XAML: <ComboBox IsEditable="False" ItemsSource="{Bindin ...

  3. SQL Server Profiler 跟踪某个数据库某张表sql语句

    点击:事件选择 点击确定 点击确定 关键:选中显示所有事件.显示所有列,然后通过DatabaseName 筛选数据库名称为Ecology的数据库, TextData 筛选文本中包含表名T_Plant2 ...

  4. 复盘一篇讲sklearn库学习文章(上)

    认识 sklearn 官网地址: https://scikit-learn.gor/stable/ 从2007年发布以来, scikit-learn已成为重要的Python机器学习库, 简称sklea ...

  5. 升级openssh漏洞

    升级openssl和openssh 最近接收到客户的漏洞提醒,openssl和openssh的漏洞,解决办法就只有升级. 升级前环境 ~]# ssh -V OpenSSH_5.3p1, OpenSSL ...

  6. java继承 、方法重写、重写toString方法

    1.Java的继承,关键词Extends package cn.mwf.oo; public class TextExtends { public static void main(String[] ...

  7. JAVA-JNI调用使用

    准备工作: 1.打开eclipse,新建c++项目,编写c++ jni接口如下图: 2.编译运行生成dll文件,导入到java项目,在java中创建调用使用,如下图: C文件定义: 头文件 /* DO ...

  8. 一套兼容win和Linux的PyTorch训练MNIST的算法代码(CNN)

    第一次,调了很久.它本来已经很OK了,同时适用CPU和GPU,且可正常运行的. 为了用于性能测试,主要改了三点: 一,每一批次显示处理时间. 二,本地加载测试数据. 三,兼容LINUX和WIN 本地加 ...

  9. HDU - 3535:AreYouBusy (分组背包)

    题意:给你n个工作集合,给你T的时间去做它们.给你m和s,说明这个工作集合有m件事可以做,它们是s类的工作集合(s=0,1,2,s=0说明这m件事中最少得做一件,s=1说明这m件事中最多只能做一件,s ...

  10. C++中指针形参问题

    1.C++指针做形参,会有很多陷阱,很多时候也许并不如我们想的那样.比如我们想通过一个函数改变指针的值: #include<</SPAN>iostream> using nam ...