- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
前言 。
一个出色的开发工具可以显著提高开发人员的开发效率,而优秀的扩展插件则能更进一步地提升工具的效率。在前端开发领域,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]": |
---|
格式选择 。
格式选择适用于多种语言,具体取决于 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.markdown-all-in-one&ssr=false#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插件,希望能够为开发者提供多样化的选择,进一步提升开发效率。无论是代码编辑、调试、版本控制还是项目管理,这些插件都为开发人员提供了强大的功能和工具。希望这些插件能够满足开发者的需求,在开发过程中更加高效、便捷。 注:本文内容借鉴于 VS Code插件官网 .
扩展链接:
高级SQL分析函数-如何用窗口函数进行排名计算 。
3D模型+BI分析,打造全新的交互式3D可视化大屏开发方案 。
React + Springboot + Quartz,从0实现Excel报表自动化 。
最后此篇关于提高Web开发效率的10个VSCode扩展插件,你知道吗?的文章就讲到这里了,如果你想了解更多关于提高Web开发效率的10个VSCode扩展插件,你知道吗?的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
要构建我的远程环境,我需要设置几个环境变量(它们在 docker-compose 文件中使用)。这些是在我的 ZSH 环境中设置的,因此从终端运行 docker-compose build 可以按预期
这是vscode在主机中安装vscode-server时的日志 我发现它得到了 vscode-server 提交 ID,如下日志: [13:07:27.334] Using commit id "f8
在 devContainer 实例中安装 LiveShare 扩展时出现错误。 例如使用:https://github.com/microsoft/vscode-remote-try-go/然后将扩展
在 devContainer 实例中安装 LiveShare 扩展时出现错误。 例如使用:https://github.com/microsoft/vscode-remote-try-go/然后将扩展
我尝试在代码中构建和调试扩展。 我从https://github.com/microsoft/vscode-wordcount下载了字数统计的样本. 当我单击 F5 时,未生成 ./out 文件夹,并
你好,我最近从 Atom 切换到 Vs-code,并尝试了一些解释如何在他们的网站上添加语言支持的教程,我知道语言支持应该有着色器 问题是如何为自定义语言添加颜色?当我基本上使用每种语言时,我习惯了自
为了为我的数据科学工作流提供足够的计算能力,我在远程机器上使用 Docker 容器。虽然我可以通过 vscode-remote 连接到我的远程机器,但我无法连接到运行在这台机器上的 Docker 容器
我有一个创建多个 Docker 镜像的项目。我想在 vscode-remote 中为每个图像设置一个 devcontainer,以便我可以为每个图像启动一个容器。 我一次只需要启动并连接到一个容器/图
我认为这是可以通过编辑实现的 keybindings.json .由于我似乎无法找到可用命令的列表,因此通过自动完成我已经做到了这一点: { "key": "SHORTCUT"
gopls 需要在工作区的根目录下有一个模块。 您可以通过将每个模块作为工作区文件夹打开来处理多个模块。 此工作流程的改进即将推出 ( https://github.com/golang/go/iss
我的电脑上已经安装了 vscode。不久前我注意到它现在包含在 anaconda 发行版中。与我已经安装的 vscode 相比,使用 anaconda 附带的 vscode 有什么好处吗? 仅供引用,
我的电脑上已经安装了 vscode。不久前我注意到它现在包含在 anaconda 发行版中。与我已经安装的 vscode 相比,使用 anaconda 附带的 vscode 有什么好处吗? 仅供引用,
我想为 VSCode 编写一个扩展,重用 vscode-python 的重构/重命名功能扩大。这样,当用户执行我的命令时,我的扩展程序将对 .py 文件的变量进行重命名。我不知道 vscode-pyt
环境 vscode 版本 1.19.1 (1.19.1) 鲁博科普 (0.52.1) Darwin mbp 16.7.0 Darwin 内核版本 16.7.0:2017 年 10 月 4 日星期三 0
我在写 Markdown 文本时尝试自动换行:我希望当我输入比 wrap line length 长的行时自动换行设置,由硬 中断(即 newline 字符)。 我已经设定 word wrap至 wo
我想制作一个涉及发布到我的 API 的 VSC 扩展,但是当我将我的 fetch 语法写出以发布到我的服务器时,它不起作用。所以我想也许我需要添加 node-fetch,所以我做了npm i --sa
我有一个 master 分支,它是生产分支,因此我创建了几个其他分支来修复和缺陷。我在这些分支中做了一些更改,所以我在这些分支中提交了很多次。根据政策,我必须为 master 分支中的缺陷创建单个提交
我正在使用 Visual Studio Code Insiders 版本 1.65.0-insider。直到 3 天前,我通过 VPN 从工作笔记本电脑连接到工作中的远程服务器时没有遇到任何问题。我有
在 Windows 上,我必须在打开的每个新终端 session 上运行命令 start-ssh-agent.cmd。我的开发环境是VSCode,每天都会打开十几个新终端。每次打开终端后,我都必须手动
我最近开始使用 VSCode,我真的很喜欢它。我用谷歌搜索了我的问题,并试图找到与 VSCode 相关的任何答案。 考虑我有以下代码: if (a === 'some condition') re
我是一名优秀的程序员,十分优秀!