-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog2.html
152 lines (140 loc) · 9.02 KB
/
blog2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!Doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Blog 2</title>
<link rel="stylesheet" type="text/css" href="blog2.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="icon" href="https://www.designinggeeks.com/wp-content/uploads/2018/03/web-design-1024x1024.png"
type="image/x-icon">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="blog1.html">The Best Visual Studio Code Extensions for Front End
Developers</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Portfolio Website</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog1.html">Blog 1</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="blog2.html">Blog 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog3.html">Blog 3</a>
</li>
</div>
</div>
</nav>
</nav>
<div class="container">
<h1>The Best Visual Studio Code Extensions for Front End Developers</h1>
<h3>Here we will see the various extensions of vs code we can use in our daily front end development.</h3>
<h5>Created By Ritek Rounak</h5>
<img id="one"
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80"
alt="Web Development">
<p data-aos="fade-left">Great tooling can help developers write faster, cleaner, and more consistent code.
Visual Studio Code extensions allow you to add tools, languages, debuggers, and more, to help you do just
that. A while back, I asked front end developers here at Shopify what extensions, packages, and plugins they
couldn’t live without.
Based on those conversations, I wrote two articles about the best Sublime Text plugins and the best Atom
packages for front end developers. In this article, I’ve highlighted my top picks for Visual Studio Code (VS
Code) extensions, and broken them down into the following six categories. If you want to ensure that what
you're building is secure, you can also check out our article on how to improve your client’s website
security.
</p>
<h4 data-aos="zoom-in" class="head">Introduction</h4>
<p data-aos="fade-up-right">You should note that Visual Studio Code has a lot of built-in support for many of
the widely used extensions, plugins or packages found in other editors. These include support for Emmet, an
integrated terminal, IntelliSense for a bunch of different languages out-of-the-box (JavaScript, TypeScript,
JSON, HTML, CSS, Less, and Sass), as well as version control support.
Browsing and installing extensions from within Visual Studio Code is pretty easy. Simply type cmd + shift +
x (on a Mac) or ctrl + shift + x (on a PC) to bring up the View: Extensions panel, then click on the Install
button to install the Visual Studio Code extension you want.
You can also browse and install extensions by clicking on the Extensions tab in the Activity Bar at the top
of the VS Code home page. Or, you can use the Command Palette to install extensions (all at the same time)
by typing cmd + shift + p (OSX) or ctrl + shift + p (Windows, Linux), then type “Install extensions” and
select Extensions: Install Extensions.
</p>
<img data-aos="flip-left"
src="https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1053&q=80"
alt="HTML">
<h4 data-aos="zoom-in-down" class="head">HTML Snippets</h4>
<p data-aos="zoom-in-up">HTML Snippets adds in rich language support for HTML markup, including snippets, quick
info, and descriptions that include whether a tag is deprecated.
</p>
<img data-aos="flip-up"
src="https://webconnection.west-wind.com/docs/images/misc/vscodeintellisensesnippets.png"
alt="HTML Snippets">
<h4 data-aos="zoom-in-left" class="head">ES Lint</h4>
<p data-aos="zoom-out-left">This extension integrates ESLint into VS Code, and it requires you to have already
installed ESLint on your computer either locally or globally. You can do this with npm, by running npm
install -g eslint. There are more detailed configuration and installation settings and instructions on the
Visual Studio Code extension marketplace page.
</p>
<img data-aos="flip-right" src="https://miro.medium.com/max/5760/1*dvvNjcPydPLfeOswJ9u-Sg.png" alt="ES Lint">
<h4 data-aos="zoom-out-up" class="head">Git Lens</h4>
<p data-aos="fade-down">The GitLens extension is truly amazing; it enables you to visualize code authorship
within VS Code. You can
browse and explore the history of a file, view a git blame annotation for each file line, and even add a
changes (diff) hover annotation, all of which are fully customizable.
</p>
<img data-aos="flip-down"
src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/branches-view.png"
alt="Git Lens">
<h4 data-aos="flip-up class="head">CSS Peek</h4>
<p data-aos="fade-left">CSS Peak extends HTML and Embedded JavaScript templates with Go To Definition support
for CSS classes and IDs
found in your markup.
</p>
<img data-aos="flip-left"
src="https://dariofuzinato.gallerycdn.vsassets.io/extensions/dariofuzinato/vue-peek/1.0.2/1503254564126/Microsoft.VisualStudio.Services.Icons.Default"
alt="CSS Peek">
<h4 data-aos="zoom-out-left" class="head">Rainbow Brackets</h4>
<p data-aos="fade-up">Add some fun into your editor with Rainbow Brackets! This Visual Studio Code extension
provides rainbow
colors for round brackets, square brackets, and curly brackets. This can be especially helpful for
JavaScript programmers!
</p>
<img data-aos="flip-up"
src="https://camo.githubusercontent.com/6336a11378313b70d00490c262117996a91d1cb78f9f019f78d19f160de79c28/687474703a2f2f692e696d6775722e636f6d2f493845416654552e706e67"
alt="Rainbow Brackets">
<h4 data-aos="flip-up" class="head">Indent Rainbow</h4>
<p data-aos="fade-right">
The Indent Rainbow is a simple extension that colorizes the indentation in front of your text, alternating
between different colors on each step. It makes your indentation easier to read, especially if you’re
writing code for Python or Nim.
</p>
<img data-aos="flip-right" src="https://pbs.twimg.com/media/D_lF-abUYAAiBLl.jpg:large" alt="Indent Rainbow">
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</html>