8 Visual Studio Code Extension for Web Development

Debugger for Chrome

[{"selector":"#anim-b04ba09e-2aaa-48c1-8b85-5ec3da6d296d [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-d17fdb14-b710-4c3e-892c-9912e3cbdd70","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f32c643f-a4d2-48e9-9c60-6986b0a13f75","keyframes":{"transform":["translate3d(-545.83348%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-601104f7-2f12-4ebb-bf96-37d41cac61f7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-40f9e2fb-838b-4102-95d9-80739d089345","keyframes":{"transform":["translate3d(129.95950%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

JavaScript (ES6) code snippets

[{"selector":"#anim-db671a1b-3ebb-4a06-9c6d-d0fc55bd9e3f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-ed164581-61ed-4ac6-adb3-aad303ca2931","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5bd5158f-b57d-4b1d-bdfc-0a0fdf46635b","keyframes":{"transform":["translate3d(136.48648%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-af5a3c55-87b0-4cf1-80d0-4aecbab402da","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3f18b519-c518-4b0e-806a-b198c3cbcb66","keyframes":{"transform":["translate3d(-500.00017%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Live Server

[{"selector":"#anim-e3a001a7-8fa6-471a-9345-15ced19be7bf [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-ce704cb1-4372-467b-b965-16f6e2cac7e7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2f95cd3b-0e9f-4ed3-9855-2a9aca99a7fd","keyframes":{"transform":["translate3d(133.60324%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-829cae36-2ce4-4810-b520-fedeebdd31f4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bb7c995d-f4a2-49ec-a176-a5ac1ba41fd2","keyframes":{"transform":["translate3d(-537.50026%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Auto Close Tag

[{"selector":"#anim-fd873fcc-8444-42a8-88fe-a1d7ae5e6f74 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b4eaea85-f015-4a1b-b86d-8c525ea81c44","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-72621f26-70b1-4dfb-a218-c7fecbe44433","keyframes":{"transform":["translate3d(128.81357%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2378985e-654e-45a1-b6a3-9133074eda43","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f240af8e-dd46-48b1-b5e8-7fa279d6a5ca","keyframes":{"transform":["translate3d(-500.00017%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Prettier - Code formatter

[{"selector":"#anim-22719c8e-6fa6-4c49-9447-6f0ab3ebc205 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-5ef4dcc2-1da0-4be4-a3da-10fea27d5480","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-80a8c19c-5e00-42f2-a78c-b4f1fb007963","keyframes":{"transform":["translate3d(127.93522%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c7de5fe5-28c9-47ac-b304-54260e4fbc09","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2179b4e6-f17e-4699-9e0d-92625bfcc530","keyframes":{"transform":["translate3d(-500.00017%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

TODO Highlight

[{"selector":"#anim-82757460-807c-43a2-a63b-cb665d2bbe29 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-6e398438-1411-4de5-be2e-8edeb5403fc2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-17ca0a40-d407-4769-915a-e05568c223e1","keyframes":{"transform":["translate3d(127.93522%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-368af5ee-8149-40cb-bc15-79684b334628","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-22045e7c-f60d-4647-8e75-c5c6fb18da57","keyframes":{"transform":["translate3d(-500.00017%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Auto Rename Tag

[{"selector":"#anim-2af1881c-1a2a-4e30-92bf-c203b08075ce [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-e6b2ea76-3957-4193-a475-e3094c54720a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1fd128c4-7dbd-413c-8767-768ae62ad6c2","keyframes":{"transform":["translate3d(143.54065%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4424035c-3cf8-498c-942b-5d2d798996e4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-427bf9ef-d903-44ea-861f-d2f006154523","keyframes":{"transform":["translate3d(-516.66678%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Better Comments

[{"selector":"#anim-bf2f8aec-5a5d-4f27-b379-de1557e5e8ff [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(8.836206904440498%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-d71c6bfa-64e2-4ddc-87c3-e1f379ea187f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fcaa00e4-048c-4e0f-9b3c-4b0fe18c0b93","keyframes":{"transform":["translate3d(122.67206%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2a8166e1-3cb6-4914-b358-844b4bb0225f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20bd743e-c5d4-4dbb-a244-a2a978c541ab","keyframes":{"transform":["translate3d(-504.16687%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more here