提高 Web 开发效率的10个VS Code扩展插件，你知道吗？

标签：Web 插件 Code console object 开发者控制台

前言

一个出色的开发工具可以显著提高开发人员的开发效率，而优秀的扩展插件则能更进一步地提升工具的效率。在前端开发领域，VSCode毫无疑问是目前最受欢迎的开发工具。为了帮助前端开发人员提高工作效率，今天小编将向大家推荐10个强大的VSCode扩展插件。

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