本文内容借鉴于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 "[javascript]": { "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报表自动化