共计 3670 个字符，预计需要花费 10 分钟才能阅读完成。
本文内容借鉴于 VS Code 插件官网。
前言
一个杰出的开发工具能够显著进步开发人员的开发效率，而优良的扩大插件则能更进一步地晋升工具的效率。在前端开发畛域，VSCode 毫无疑问是目前最受欢迎的开发工具。为了帮忙前端开发人员进步工作效率，明天小编将向大家举荐 10 个弱小的 VSCode 扩大插件。
1.JavaScript (ES6) Code Snippets
JavaScript(ES6) 代码片段插件能够帮忙开发人员节省时间：开发人员能够在一个中央获取所有的代码，而不须要反复的输出。除此之外，JavaScript(ES6) 代码片段插件还能够查看 TypeScript/TSLint 的代码。
导包补全代码：
| 触发条件 | 触发内容 |
|---|---|
| imp→ | 导入整个模块 import fs from ‘fs’; |
| imn→ | 导入没有模块名称的整个模块 import ‘animate.css’ |
| imd→ | 应用毁坏仅导入模块的一部分 import {rename} from ‘fs’; |
| ime→ | 从模块中导入所有内容作为别名 import * as localAlias from ‘fs’; |
| ima→ | 仅导入模块的一部分作为别名 import {rename as localRename} from ‘fs’; |
| rqr→ | 须要包 require(”); |
| req→ | 要求包常量 const packageName = require(‘packageName’); |
| mde→ | 默认模块.exportsmodule.exports = {}; |
| env→ | 导出名称变量 export const nameVariable = localVariable; |
| enf→ | 导出名称函数 export const log = (parameter) => {console.log(parameter);}; |
| edf→ | 导出默认函数 export default function fileName (parameter){console.log(parameter);}; |
| ecl→ | 导出默认类 export default class Calculator {}; |
| ece→ | 通过扩大基类来导出默认类 export default class Calculator extends BaseClass {}; |
办法补全代码：
| 触发条件 | 触发内容 |
|---|---|
| fof→ | for … of 循环 for(const item of object) {} |
| fin→ | for … 在循环中 for(const item in object) {} |
| anfn→ | 创立一个匿名函数 (params) => {} |
| nfn→ | 创立一个命名函数 const add = (params) => {} |
| dob→ | 毁坏对象语法 const {rename} = fs |
| dar→ | 毁坏数组语法 const [first, second] = [1,2] |
| sti→ | 设置距离辅助办法 setInterval(() => {}); |
| sto→ | 设置超时辅助办法 setTimeout(() => {}); |
| prom→ | 创立一个新的 Promisereturn new Promise((resolve, reject) => {}); |
| thenc→ | 将 then 和 catch 申明增加到 Promise.then((res) => {}).catch((err) => {}); |
控制台补全代码：
| 触发条件 | 触发内容 |
|---|---|
| cas→ | 控制台警报办法 console.assert(expression, object) |
| ccl→ | 控制台革除 console.clear() |
| cco→ | 控制台计数 console.count(label) |
| cdb→ | 控制台调试 console.debug(object) |
| cdi→ | 控制台目录 console.dir |
| cer→ | 控制台谬误 console.error(object) |
| cgr→ | 控制台组 console.group(label) |
| cge→ | 控制台组完结 console.groupEnd() |
| clg→ | 控制台日志 console.log(object) |
| clo→ | 带有名称的控制台日志对象 console.log(‘object :>> ‘, object); |
| ctr→ | 控制台跟踪 console.trace(object) |
| cwa→ | 控制台正告 console.warn |
| cin→ | 控制台信息 console.info |
| clt→ | 控制台桌 console.table |
| cti→ | 控制台工夫 console.time |
| cte→ | 控制台工夫完结 console.timeEnd |
2.CSS Peek
CSS Peek(CSS 一览) 插件能够间接从 HTML 文件中查看 CSS 的 ID 和类，并跳转到对应的 CSS 定义。
（CSS Peek 实现成果）
3.Auto Close Tag
Auto Close Tag（主动敞开标签）插件从 VS Code 1.16 开始，实现了对 HTML、Handlebars 和 Razor 文件的敞开标记反对。此扩大反对其余语言，如 XML、PHP、Vue、JavaScript、TypeScript、JSX、TSX 等。
插件用法：
（1）输出开始标记的右括号后，将主动插入完结标记：
（2）手动增加完结标签
应用快捷方式 Alt+.（Command+Alt+. 实用于 Mac），或按 F1，而后抉择 / 键入 Close Tag
4.Prettier — Code formatter
Prettier — Code formatter（代码格式化工具）插件能够帮忙开发者格式化 JavaScript、HTML、CSS 代码。
用法
应用命令面板（CMD/CTRL + Shift + P）
| Plaintext 1. CMD + Shift + P -\> Format Document OR 1. Select the text you want to Prettify 2. CMD + Shift + P -\> Format Selection |
|---|
键盘快捷键
Visual Studio Code 提供用于代码格式化的默认键盘快捷键。您能够在 VS Code 文档中理解每个平台的这些信息。
如果您不喜爱默认设置，能够在 vscode 的键盘快捷键菜单中从新绑定 editor.action.formatDocument 和。editor.action.formatSelection
保留时格式化
开发者能够通过限定设置范畴来针对每种语言关上保留时格局：
| JSON // Set the default “editor.formatOnSave”: false, // Enable per-language ““: {“editor.formatOnSave”: true} |
|---|
格局抉择
格局抉择实用于多种语言，具体取决于 Prettier 自身反对的语言。目前反对以下语言：
| Plaintext javascript javascriptreact typescript typescriptreact json graphql handlebars |
|---|
5.Auto Rename Tag
Auto Rename Tag（主动重命名标签）能够帮忙开发人员主动重命名配对的 HTML/XML 标签。
6.Path intellisense
Path intellisense（门路感知）插件能够更轻松地辨认文件门路，开发者只须要输出文件名的前缀，插件会主动补全该文件夹的全门路：
7.Better Comments
Better Comments（正文优化）插件能够帮忙开发者在代码中实现更加人性化的正文：
通过此插件，能够将正文分为以下几类：
- 警报
- 查问
- 待办事项
- 强调
8. MarkDown all in one
MarkDown all in one（MarkDown 多合一）插件能够实现在 VS Code 上编辑和应用 MarkDown 文件：
键盘快捷键
请参阅键盘快捷键局部中的残缺按键绑定列表
列表编辑
更多具体操作可参考 VS Code 官网：https://marketplace.visualstudio.com/items?itemName=yzhang.ma…\#user-content-q-this-extension-has-overridden-some-of-my-key-bindings-eg-ctrl–b-alt–c
9.Gitlens
借助 GitLens 扩大，开发者能够轻松查看 Web 应用程序中每一行代码的批改者。只需简略地点击，就能轻松实现这一指标！这种便捷的浏览历史记录办法打消了在页面或屏幕间来回切换的懊恼，使查找特定更改变得轻而易举。
10.Live Server
Live Server（实时服务器）插件无疑是开发者中应用最为宽泛的插件之一，它可能启动本地开发服务器，并具备动态和动静页面的实时从新加载性能。借助这个弱小的插件，开发者可能享受到实时预览的便当，极大地晋升开发效率。
总结
通过介绍上述 10 种 VS Code 插件，心愿可能为开发者提供多样化的抉择，进一步晋升开发效率。无论是代码编辑、调试、版本控制还是项目管理，这些插件都为开发人员提供了弱小的性能和工具。心愿这些插件可能满足开发者的需要，在开发过程中更加高效、便捷。
扩大链接：
高级 SQL 剖析函数 - 如何用窗口函数进行排名计算
3D 模型 +BI 剖析，打造全新的交互式 3D 可视化大屏开发计划
React + Springboot + Quartz，从 0 实现 Excel 报表自动化
