►
From YouTube: Workshop: Build your First VS Code Extension - Nicolas Carlo, Busbud & Florent Vilmart, Shutterstock
Description
Workshop: Build your First VS Code Extension - Nicolas Carlo, Busbud & Florent Vilmart, Shutterstock
Visual Studio Code is a text editor that has become very popular. A reason for such fame is Extensions. You can pick and install just the ones that fit your needs. You can customize VS Code to be super-productive. That's cool.
But have you ever considered going further, and extend VS Code at your will?
Have you ever thought about becoming the author of your own VS Code Extension?
Nicolas and Florent will guide you through this hands-on. You'll learn how to create, configure, package and publish a VS Code Extension.
In this workshop, you will understand how you can manipulate the structure of your code, using the Abstract Syntax Tree (AST). Together, we'll build your first VS Code Extension that will perform your own, custom, automated refactorings.
After this session, you'll know how to control your editor to give you (and your team) coding super-powers!
A
All
right,
let's
do
this!
Oh
good,
perfect,
so
hi
everyone
for
this
last
session
before
the
evening.
It's
gonna
be
a
workshop.
It's
a
one-hour
workshop,
so
it
might
be
hard
to
like.
We
cannot
afford
to
go
through
the
table,
holes,
etc.
We
will
need
to
move
on.
So
that's
why
we
did
a
repo
and
you
can
basically
follow
step
by
step
if
you
need
to,
but
we
are
here
to
like
present,
you
guide
you
through
the
steps
to
show
you
how
to
build
your
first
vs
code
extension.
A
My
name
is
Nicolas
I'm,
a
web
developer
working
on
the
company
name
bus,
but
here
in
Montreal
we're
developing
a
web
application,
which
is
like
the
Expedia
but
for
buses.
So
if
you
want
to
take
a
bus
to
go
from
Montreal
to
Ottawa,
you
can
go
on
buzzword.
You
will
compare
all
the
operators
and
you
can
do
that
not
only
in
Canada
but
in
80
countries
in
the
world
and
still
paying
Canadian
dollars.
For
example.
That's
what
we
do
know.
A
B
Engineer
at
shutterstock
Sherlock
has
an
office
in
Montreal
where
we
build
most
of
our
product
footage
and
premium
beats.
So
if
you
need
cool
images
for
your
project,
awesome,
soundtracks
or
3d
effects
go
to
church
talk
about
free
meal,
be
calm,
and
we
all
find
something
good
for
your
next
YouTube
video
or
Instagram
story.
B
C
A
Among
you
who
is
using
javascript
or
typescript,
most
of
you,
so
that's
perfect,
you're
in
the
right
room
and
even
if
you're
not
doing
JavaScript
typescript
what
you
will
learn
today,
it's
gonna
be
helpful,
so
I'm
not
gonna,
present
vs
code.
You
know
that
I'm
gonna,
insist
on
the
fact
that
vs
code
is
a
text
editor
with
a
marketplace
where
you
can
find
a
bunch
of
different
extensions
that
allows
you
to
configure
your
editor
to
your
the
project.
You
are
working
on.
A
So
if
you
want
to
work
with
you,
you
will
have
some
nice
Extension
to
improve
your
tooling
to
work
with
the
view
projects
and
if
you
want
to
move
to
a
lexer.
Well,
you
can
insult
extensions
to
work
with
LX
here,
but
not
only
you
can
install
different
extensions.
You
could
actually
build
your
own
extension.
It's
not
that
hard
and
that's
what
we're
gonna
do
today.
A
The
extension
we're
gonna
build
is
gonna.
Do
automated
refactorings
for
you
when
I
said
refactoring
I
mean
a
transformation
of
the
code
that
doesn't
change
the
behavior
of
the
code,
that's
important
because
we
tend
to
use
refactoring
for
almost
every
every
time.
We
change
the
code
without
a
business
need
for
it
here.
We
really
mean
that
transformation
of
the
code
to
redesign
it
in
a
different
way,
but
the
behavior
doesn't
change.
That's
what
we're
gonna
do
so,
let's
dive
in
directly
and
have
a
look
at
what
we
want
to
achieve.
A
A
The
goal
is
for
you
to
implement
a
feature
in
that
codebase
and,
as
you
can
see,
it's
not
a
very
nicely
written
code,
it's
quite
dirty.
So
the
call
of
the
the
goal
of
this
exercise
is
for
you
to
practice
refactoring.
So
you
are
like
cleaning
the
code
first
and
then
you
can
implement
the
feature.
So
when
you
do
this
exercise,
you
need
to
do
a
bunch
of
transformation.
Usually
the
first
step
is
to
change
that
impurity
for
loop,
more
like
declarative,
forage
on
the
items,
and
then
yes,
you
copy/paste
the
rest
of
the
code.
A
A
Then
maybe
I
want
to
extract
this
yeah.
This
is
a
magic
string.
I
want
to
put
that
in
a
variable,
H,
Bri
and
then
I
replaced
that
and
this
one
too,
to
the
same
reference,
etc,
etc.
So
you
do
that
kind
of
operation
and,
as
you
can
see,
it
takes
me
some
time
to
do
it
manually,
let's
rewind
a
bit
actually
I'm
gonna
rewind
with
yet.
A
So
see
the
the
difference
of
doing
that
because
of
the
tooling.
Allow
me
to
just
do
it
automatically
in
terms
of
productivity.
This
is
awesome,
so
this
is
the
kind
of
tooling
that
we're
going
to
build
today
together
in
fortunately,
in
one
hour,
we
won't
have
the
time
to
do
the
convert
for
loop
to
the
forage
or
the
extract
variable.
There
are
too
many
edge
cases
inside,
but
what
we're
gonna
do
is
convert
that
kind
of
function.
A
A
What
we're
going
to
build
today
is
this
automatic
transformation?
Okay,
so
we
need
to
build
a
vs
code
extension.
To
do
that,
you
need
to
create
a
new
project,
an
odd
project.
You
need
to
compile
your
project,
so
you
are
exposing
two
vs
code.
An
API
it
can
use
is
to
trigger
operation
in
the
in
the
editor
and
fortunately
for
us.
We
don't
have
to
do
that
by
hand
for
every
time.
We
want
to
do
that
Microsoft.
Well,
the
team
developing
vs
code.
A
They
are
providing
a
generator
for
us,
so
we
don't
have
to
do
the
boilerplate
code.
Every
single
time.
Kind
of
like
create
react
app.
If
you
will,
this
is
based
on
something
called
human
yeoman.
It's
it's
a
node
tool.
You
can
actually
use
it
with
you,
man,
you
can
create
code,
generators
and
yeoman
will
ask
you
some
question:
you
will
fill
the
blanks
and
it
will
boot
strap
like
scaffold
the
application,
the
the
basic
application
for
you,
so
the
you
don't
have
to
do
the
boilerplate
by
hand,
so
we're
gonna.
Do
that
what
you
need?
A
Is
it
big
enough
yeah?
So
you
need
to
install
globally
on
your
machine
human,
which
is
you
and
then
the
generator
you
want
to
use
which
in
this
case
is
generate
your
code
already.
Did
that
when
you
have
that
you
can
say
your
code,
and
here
is
human
in
action.
So
here
you
can
see
the
different
options
that
you
can
you
can
have.
You
can
create
a
new
extension
or
all
the
things
that
we're
not
going
to
get
into
and
you
can
even
select
if
you
want
to
do
that
in
tight
script
or
in
JavaScript.
A
Sorry,
in
our
case
it
will
be
test
trip.
Then
you
give
it
a
name,
and
then
you
select,
if
you
want
to
use
NPM
or
yarn
and
at
the
end,
what
you
end
up
with
is
the
the
code
I
made
you
clone
at
the
beginning
of
this
session.
So
when
you
have
clone
that
repository,
this
has
been
generated
by
a
human
we're,
starting
from
here.
I
don't
like
when
code
has
been
created
and
I
don't
know
what's
inside.
So
let's
make
a
tour
of
the
created
files.
A
The
first
thing
you
have
here
is
vs
code,
giving
you
some
useful
links
and
resources
to
know
how
to
build
an
extension.
Fortunately,
for
us
we're
doing
that
today,
so
we
don't
need
this
I
choose
to
use
a
typescript
project,
so
we
have
a
TS
lint
and
a
TS
configuration,
so
everything
is
already
ready
to
compile
the
code
etc.
For
you,
I
read
me.
The
Rima
is
important
because
when
you
are
done
with
coding
your
your
extension
and
you
want
to
package
it
and
publish
that
online.
That
will
be
the
front
page
of
your
extension.
A
That
will
be
what
the
people
will
see
when
they
want
to
install
your
extension.
Then
you
have
a
package.json.
It's
a
regular
one.
We're
gonna
get
back
to
the
vs
code,
custom
elements
which
are
inside
you
have
a
change.
Log
you're
encouraged
to
maintain
a
change
log.
You
have
a
git
ignore,
you
know,
I
get
ignore
and
you
also
have
a
BS
code
ignore
which
is
serving
the
same
purpose,
but
again
when
you're
packaging,
your
application
and
serving
that
to
everyone.
You
don't
want
to
include
the
test
file,
the
source
code.
A
You
don't
want
to
include
the
vs
code
extension
Quick,
Start,
markdown,
that
we
deleted.
All
of
that.
So
you
only
want
to
get
what's
packaged
and
ignore
the
rest.
Then
you
have
the
source
code
inside
you
have
the
test
folder.
So
you
already
have
an
environment
where
you
can
test
code
against
the
BS
code
API.
So
if
you
want
to
do
integration
tests
with
vs
code
SPI,
you
will
write
tests
in
there.
A
And
finally,
you
have
the
entry
point
or
your
extension,
so
I'm
gonna
present
that
a
bunch
of
comments
but
I'm
here
to
do
the
comments
for
you.
So
let's
get
rid
of
that
and
see
what
we
have
inside.
So
an
extension
really
is
2x
public
functions
for
BS
code,
an
activate
function
that
vehicle
will
call
whenever
your
extension
is
activated
and
a
deactivate
function
in
case
the
user
deactivate
your
extension,
for
example.
A
This
is
a
moment
where
you
clean
the
things
that
you're,
maybe
storing
in
the
global
state
or
anything,
let's
link
in
to
the
activate
function.
So
you
receive
the
current
context
of
execution.
You
can
start
doing
things
like
logging
and
you
will
see
that
in
the
in
the
console
the
output
of
your
extension,
but
we
don't
need
that
for
the
moment
and
then
what
do
we
have
here
here?
We
are
registering
a
comment
and
a
comment
is
the
thing
that
the
user
will
trigger
to
make
your
extension.
A
Do
some
work
in
our
case
convert
to
an
arrow
function,
expression
and
we
make
the
context
subscribe
to
that
new
comment.
This
is
the
comment
ID
comment.
Ids
are
shared,
so
usually
you
prefix
that
with
the
name
of
your
extension
and
then
this
is
usually
the
name
of
your
command,
but
it's
a
convention,
you
can
come
up
with
any
unique
string.
What's
important
is
in
the
package.json
you're
telling
vs
code
that
this
comment
needs
to
be
activated
and
you're
even
giving
it
like
a
name
to
be
displayed.
A
A
Oh
sorry,
I
run
the
test.
I
want
to
run
the
x10,
so
it
opens
a
BS
code
window,
a
new
one.
It's
a
bit
tiny
to
see,
but
you
can
see
on
top
of
the
window
title
you
have
a
extension
development
host
prefix.
This
is
telling
you
you
are
in
the
sandbox
and
in
this
specific
vs
code
you
have
your
regular
vs
code,
but
it
compiled
your
extension
and
it
made
it
available
in
this
sandbox.
So
you
can
test
your
extension
as
if
it
was
published
and
you
installed
it.
A
A
And
run
that
again,
it
works
so
so
far
we
are
followed
the
getting
started
of
the
vs
code
tutorial.
You
could
have
done
that
at
home.
Now
we
are
getting
into
the
interesting
part,
which
is
like
doing
something
from
this
extension.
So
I
told
you
we're
gonna
do
an
automated
refactoring.
The
first
thing
I
want
to
do
is
to
change
that
hello
world
to
something
more
meaningful,
so
convert
to
arrow
function.
C
A
C
C
A
A
Yes
right,
this
transform
code
back
okay.
So
let's
implement
this
three
functions,
so
read
code
text,
nothing
and
it
should
return
me
a
string
containing
the
code
of
the
editor.
So
this
is
a
part
where
I'm
giving
you
information
about
the
BS
code
API.
But
all
of
this
you
can
find
on
the
vs
code
documentation
and
that's
also
why
I
choose
typescript,
because
you
will
see
that
the
auto
completion
help
you
discover
what's
available
in
the
API,
so
in
vs
code
you
can
access
the
window
and
inside
the
window
you
have
the
active
text.
A
Editor
the
active
text
editor
for
example.
Now
it's
this
very
file
extension
dot,
TS,
tack
strip.
It's
telling
me
that
either
you
receive
a
text
editor
either
you
receive
nothing,
because
maybe
you
don't
have
an
active
text,
editor
open
when
you
run
that
comment,
so
I
retreat
that
editor
and
if
there
is
no
editor
well
too
bad.
So
sad,
I'm
gonna
just
throw
a
new
error
at
the
moment.
No
active
editor,
so
yeah
there
is
nothing.
I
can
do
from
there,
but
once
I
got
the
editor.
A
A
Then,
let's
implement
the
transform
function,
so
the
transform
function
takes
some
code
and
return
some
transform
code.
For
the
moment,
we're
just
gonna
show
that
it
works
and
I
will
append
to
the
new
to
a
new
line
like
a
damn
common,
just
to
see
that
it
works
when
I
run
the
code
so
transform
from
extension.
Freedom.
A
A
A
So
the
right
function,
you
don't
have
a
vs
code
method
to
write
directly.
This
is
a
part
where
you're,
when
you're
building
an
extension,
you
need
to
go
into
the
documentation,
see
what's
available,
you
have
lower
level
methods
and
you
need
to
come
up
with
your
own
write
function.
The
good
news
is
once
you
have
done,
that
you
don't
have
to
do
it
anymore
and
that
could
probably
be
published
in
some
package
to
give
you
more
high-level
functions
to
manipulate
vs
code.
Api,
you
you.
C
C
C
C
C
C
A
Thank
you
we're
back.
Thank
you.
So
how
do
we
write
into
V
s
code
in
vs
code?
You
have
that
concert
concept
of
workspace
that
you
probably
have
encountered
when
you
open
a
new
folder.
You
are
creating
a
workspace
to
work
on
and
on
this
workspace
you
can
apply
modifications
so
apply
it.
It
is
expecting
me
to
provide
a
workspace
edit.
So
let's
provide
that
I'm
gonna
create
a
workspace
edit.
A
And,
what's
available
in
the
workspace
edit
well,
I
can
do
a
bunch
of
things:
I
can
create
file,
delete
files,
etc,
etc.
What
I'm
interested
in
too
is
to
update
the
content
of
a
file
to
update
the
content
of
a
file.
I
need
to
provide
the
identifier
of
that
file,
so
that
will
be
my
document,
your
I
and
a
list
of
text
additions.
A
A
Okay,
a
tax
addict
is
taking
two
things
arranged
and
the
text
to
to
insert
the
wrench.
That's
because
you
can
I
can
I
could
select
some
text
in
a
partial
selection
in
my
document,
but
in
our
case
we
want
to
select
the
whole
document.
So,
let's
pretend
it
exists
and
the
the
the
text
I
want
to
put
it's
the
code.
I
I
received
as
an
input.
Okay,
so
I
need
to
create
that
whole
document
range
creating
that
and
it
takes
to
position
the
first
position.
What
do
you
think
it
will
be
zero?
A
Yes,
I'm
gonna,
I'm
gonna
start
from
the
very
top
of
the
file.
Zero,
zero
and
I
want
to
go
to
the
very
end
of
the
file.
How
vs
could
worked
when
it
creates
range?
If
you
provide
a
very
big
number,
it
will
cap
yours
up
to
the
end
of
the
file,
so
I
could
do
that.
I
could
provide
a
very
big
number
and
hope
you
never
get
past.
That
I
have
a
less
hacky
solution,
though,
which
is
to
use
the
duck.
A
The
document
that
we
have
we
can
access
the
line
count
and
the
position
is
zero
indexed.
So
pretty
much
like
an
array,
the
line
count
will
always
be
the
index
of
the
line
after
the
last
line,
so
I
can
I
can
get
there
and
I
know
that
I
will
always
be
at
the
end
of
the
document.
You
do
that
once
and
then
you
never
think
about
it
again.
A
A
Now
we
need
to
think
about
this
transform
function,
so
we're
done
with
the
vs
code
API.
When
you
have
done
that.
Basically,
you
can
forget
about
vehicle
API.
You
have
done
that
you're
good
and
then
the
the
the
core
of
our
logic
of
our
extension
or
domain.
If
I'm
a
will
be
the
transform
function-
and
this
doesn't
depend
on
vs
code,
this
I
could
extract
and
a
unit
test.
A
Yes,
that's
a
very
good!
First
answer.
Transformation
of
you
receive
a
string.
You
want
another
string.
Regular
expression
usually
works
until
some
point
because
it
will
be
very
hard
to
handle
like
you
only
get
a
primitive
string,
so
it
will
be
hard
for
you
to
get
all
of
the
nuances
and
the
more
you
are
getting
into
edge
cases
and
that
can
come
very
quickly.
The
more
it
will
be
difficult
to
create
and
maintain
regular
expression
transformation.
Now,
instead,
we
yeah
we
need
to
have
a
better
data
structure
and
syntax
tree.
Is
that
your
answer?
A
B
C
A
B
A
Would
recommend
you
to
you?
The
yeoman
I
will
put
I
will
update
the
repo
to
push
that
so
you
get
the
files.
I
didn't
write
them.
This
are
files.
You
can
write,
if
not
just
in
extension
code
like
in.
If
you
want
to
to
make
things
that
happen
when
you
press
f5,
this
is
in
vs
code.
You
configure
that
and
it
runs
it
for
you.
It's
just
a
convenient
way
to
you
know
open
the
debugger
mode,
so
you
have
a
proper
debugger,
you
can
add
breakpoints,
etc.
That's.
C
B
So
yeah
human,
your
code
and
then
grab
those
files,
but
them
in
the
folder
it's
gonna,
be
all
good.
Alright,
so
AST
is
so
far
off.
Code
is
just
a
bunch
of
characters
right.
It's
a
string
and
the
computer
cannot
really
reason
about
it.
Besides
being
a
string,
and
we
cannot
do
much,
there
is
a
nifty
data
structure
which
is
called
an
a
syntax
tree
or
an
abstract
syntax
tree.
There
is
different
flavors
of
syntax
trees.
The
one
that
we
care
about
is
the
AST
to
produce
an
AST
will
use
a
parser.
B
You
may
have
heard
this
term
parser,
who
uses
a
parser
every
day
who
uses
babel
who
uses
okay,
so
everybody
pretty
much
right
who
uses
webpack,
yeah
everybody.
So
underneath
you
use
a
parser
because
in
order
to
make
sense
of
your
code,
webpack
and
babel
use
a
parser.
There
is
a
lot
of
flavors
of
a
yes
trees.
They
are
all
the
same,
but
all
a
bit
different,
it's
kind
of
all
the
same
cousins.
They
talk
the
same
language
but
with
different
words.
B
The
AST
is
lossy
doesn't
really
care
whether
or
not
you
put
the
semicolons
at
the
end
of
your
lines
right,
it
doesn't
really
care
if
you
put
extra
parentheses
around
your
your
binary
statements.
It
only
cares
about
your
program.
It
represents
your
program,
so
many
same
identity
front
source
code
can
produce
the
same
ast
because
there
is
this
representation
that
gets
lost
in
the
middle,
but
that's
okay
for
us,
because
we
want
to
understand
our
program
and
write
it
out
again.
We
don't.
We
doesn't
really
matter.
B
What's
written
exactly
because
we're
going
to
transform
it,
you
may
have
heard
of
esprima,
acorn
or
Babylon,
which
is
the
babel
parcel.
Those
are
all
parsers.
So,
depending
your
project,
depending
your
company,
depending
where
you
live,
you
may
use
a
spring
instead
of
Babel
parser.
There
is
not
one
that
is
better
than
the
other.
In
my
opinion
is
just
you
know,
a
matter
of
preference,
personal
preference.
In
our
case
we
will
use
Babel
because
it's
widespread
and
it
makes
for
a
nice
use
case
in
our
demonstration
I
mentioned
recast
in
J's
code
shift.
B
You
may
have
heard
of
them.
They
are
both
tools
that
help
you
transform
your
code
and
automate
refactorings,
but
at
the
last
case,
so
basically
the
tools
that
do
what
we
want
to
achieve
today,
but
for
your
whole
code
base
that
not
part
of
just
a
nifty
vsq
left
extension.
You
could
actually
build
a
vs
code
extension
based
on
recast
with
some
transformation
of
Rica,
so
J's
code
shift.
That
would
be
totally
feasible.
So
here
yes,
T.
So
what
is
that?
Who
knows?
What's
the
name
of
that
data
structure?
B
A
tree
Christmas
tree
a
green
tree
all
right
and
the
tree
is
composed
of
nodes,
each
node
is
has
a
class
and
it
has
children
which
are
the
notes,
properties
right,
nothing
really
crazy.
So
far,
each
node,
as
you
know,
as
I
mentioned
a
certain
type,
each
parser
will
implement
a
different
kind
of
type,
so
the
transformation
that
you
implement
for
esprima
are
not
working
with
Babel
right.
These
are
not
the
same
objects.
There
are
very
similar
down
named
similarly,
but
these
are
not
the
same
object.
B
Take
this
small
example:
console.log
ello
well
likely
the
first
line
of
code.
You
ever
written
JavaScript,
let's
go
through
it
and
see
it
as
the
ASC
is
so.
The
first
thing
that
you
see
is
that
it's
an
expression
statement.
So
this
is
the
whole
line
as
an
expression
statements.
This
expression
statement
is
connected
as
a
child,
a
single
child,
which
is
the
expression
itself.
The
expression
in
blue
is
really
a
call
expression,
and
it's
really
just
those
parentheses.
B
If
you
want
to
think
about
what
kind
of
expression
it
is,
the
expression
is
putting
two
things
together:
Akali
on
the
left
and
a
call
argument
and
a
list
of
arguments
on
the
right.
So
this
call
expression
is
really
just
the
parentheses,
the
Kali
who
guesses
what
the
Kali
is.
Is
it
console
that
log
is
it
log?
Is
it
dot
log?
What
is
the
Kali.
B
Consult
that
log
yes
and
on
the
right,
the
arguments
quite
easy.
There
is
a
single
argument,
so
let's
not
spend
too
much
time
on
that.
This
console
that
log
is
actually
broken
down
even
more
as
a
member
expression.
It's
made
of
two
things
because
you're
calling
a
member
on
it
you've
got
the
left
part,
which
is
the
object
and
on
the
right,
the
property
that
is
getting
called
on
the
object.
B
So
every
time
you
see
something
as
a
dot
B,
it
is
gonna,
be
a
member
expression
if
you
consider
a
dot
b,
dot
c,
it's
gonna
be
a
member
expression
made
of
another
member
expression.
This
member
expression
is
that
you
got
the
object
in
the
property
and
then
the
string
literal
string
literal
is
a
final
node.
There
is
nothing
much
more.
We
can
do
to
it's
just
a
string
and
this
member
expression
is
made
of
two
parts.
B
The
object,
which
is
an
identifier
and
the
property
which
is
also
an
identifier
identifiers,
are
also
final
nodes
in
the
ast.
When
you
see
identifier,
it's
ever
something
that
you've
written
yourself,
not
as
a
string
but,
as
you
know,
like
an
identifier
in
the
code,
let's
write
this
one,
so
the
previous
one
was
six
elements
writes
to
three
of
six
elements.
This
one.
How
many
elements
you.
B
C
B
B
Step
from
the
light,
so
the
first
thing
is
the
declaration.
Really
it's
we
have
the
Const,
so
you
have
Const
declaration,
you
have
lead
declaration
and
the
kind
of
the
declaration
is
a
constant
declaration.
If
you
had
left
key
equal
objected
P,
it
would
be
a
let
if
you
used
var,
just
replace
kind
by
bar,
and
you
got
yourself
a
var
declaration.
We
see
where
we
can
go
with
this
ast.
You
know
we
can
reason
about
code
and
consult
your
thinking
on
how
to
shift
things
up.
What
is
the
next
thing?
B
There
is
a
declaratory,
chiz,
yeah
technically
the
assignment
part,
so
it
has
two
parts
on
the
left,
the
identifier
that
we
assign
and
on
the
right,
the
initialization
expression.
For
your
thing,
then
the
identifier:
what
is
the
identifier
thing
it's
key,
definitely
and
on
the
right,
what
what
kind
of
thing
we
got
on
the
right,
the
value,
but
what
kind
we've
just
seen
it
remember
expression,
but
a
computed
member
expression
right.
So
there
is
a
slight
difference,
but
for
the
computer,
whether
you
call
something
that
something
or
something
braces
quotes,
it's
exactly
the
same.
B
It's
represented
the
same
for
your
compiler
just
with
this
computed.
True,
that
is
different.
If
we
remove
computed
true
and
we
print
the
codes,
get
just
right
console
that
key
and
then
we've
got
an
identifier
and
the
string
literal
awesome,
which
is
six.
Thank
you.
So,
let's
check
it
out,
as
you
can
see,
even
a
small
thing
like
that,
it
can
be
really
hard
to
get
our
head
around.
You
know
like
a
simple
console.log
is
six
six
members
this.
B
So
this
website,
who
knows
aspx
Barnett,
you
know
it
cool,
so
this
website
works
with
JavaScript,
but
it
was
also
with
a
bunch
of
other
languages.
It
helps
you
print
the
first
representation
of
your
programs,
so
you
can
walk
around
it
and
go
around
it.
So,
let's
go
back
to
our
console
that
log
we've
got
our
expression
statement.
There
I'll
call
expression,
we've
got
the
collie,
that
is
the
member,
is
the
identifier,
etc.
B
So,
when
you're
actually
in
ast
world
that
don't
spend
your
time
trying
to
print
stuff
out
to
your
console,
because
it's
always
gonna
be
ugly
and
impossible
and
you
will
explode
vs
codes
console
buffer.
Just
go
there,
paste
your
program
and
try
to
understand
what
what's
going
on.
This
is
an
amazing
website.
B
If
you
are
interested
in
understanding
more
of
the
ast
I
would
only
I
would
recommend
that
you
just
go
there
and
I
have
fun
with
you
know
some
lines
of
code
that
you
know
or
that
you
want
to
want
to
play
with
all
right.
So
now,
I
want
to
talk
about
transformations
right.
What
we
want
to
do
is
take
this
function
and
transform
it
into
an
arrow
function.
So
how
are
we
gonna
do?
B
That
is
just
by
transforming
the
program
representation
in
memory,
so
we're
going
to
take
this
syntax
tree
and
we're
gonna,
transform
it
into
something
different
by
creating
new
nodes
and
removing
nodes
and
removing
elements
from
that
tree.
Well,
it's
just
that
and
because
it's
all
represented
with
a
grammar
and
and
some
objects
that
we
can
manipulate
and
understand
what
they
are.
Is
it
a
call
expression
or
is
it
a
function?
Declaration
like
we
can
make
the
difference
and
we
can
really
find
what
matters
as
I
mentioned.
B
Many
libraries
can
offer
transformation,
but
we're
going
to
focus
on
Babel
for
today
so
Babel.
How
does
it
work?
It's
a
compiler
right.
It
takes
a
blob
of
string
which
is
JavaScript
of
typescript
or
anything
actually
puts
it
into
a
parser
with
some
syntax
plug-in
if
you're
using
typescript
you're
using
a
syntax
plug-in
because
the
typescript
syntax
is
actually
not
understood
by
your
JavaScript
parser
right.
B
It's
not
the
same
language,
so
you've
got
plugins
these
parts
of
the
parser
we
spit
out
an
ast,
then
babel
will
run
a
bunch
of
plugins
like
hey,
make
it
compatible
with
es5,
because
I'm
targeting
browsers
and
boom.
You
got
yourself
a
new
JavaScript
in
the
end,
but
you
can
imagine
plugins
that
transform
your
JavaScript
code
into
PHP
code
right.
Why
not?
No
problem?
You
can
do
whatever
you
want.
B
B
B
So
here
we
are
back
in
the
ESV
Explorer
and
it's
really
practical
because
they
got
this
transform
element
here.
Well,
you
can
say:
okay,
I
want
bubble
as
a
transformer,
and
here
we
see
this
visitor
and
what
it
says
that
each
time
you
encounter
something
that
is
an
identifier
run,
this
function
a
neatness
function.
We
are
going
to
take
the
node
name
and
replace
it
with
the
camel
cased
version.
B
So
this
is
a
very
simple
transformation,
but
this
is
what
we
want
to
do
in
the
end.
We
want
to
take
our
function
declaration
and
transform
it
into
an
arrow
function.
So
we
know
how
to
do
that
now
and,
as
you
can
see,
we
started
with
the
code
on
the
top
left,
with
the
user,
underscore
name
John
Smith
and
at
once,
we've
replaced
all
the
occurrences
of
the
underscore
username
by
a
camelcase
username,
but
it
works
also
with
any
other
key.
If
oh
yeah
you've
got
it,
we
are
keyboard,
you
can
all
right.
C
B
B
Next,
we
want
to
replace
the
function
declaration,
so
what
we'll
do
is
that
will
implement
something
very
similar
through
a
visit,
the
same
visitor
pattern
so
for
each
function,
declaration
we'll
replace
it
with
a
neuro
function
and
we'll
write
this
to
a
row
function
together
that
takes
the
node
and
replaces
it
alright.
So,
let's
start
with
that,
we've
got
the
gate
function
as
we've
written
as
Nicolas
written
on
the
on
the
screen
with
this
body
that
is
empty.
So
this
is
a
function
declaration
as
an
identifier.
B
Yet
it
has
the
parameters,
the
list
of
parameters
that
are
passed
to
the
function
as
the
list
of
identifiers.
It
has
the
body
and
it
hasn't
a
sync
flag.
It's
got
more
properties,
but
these
are
the
ones
that
we
really
care
about
today.
So
it's
very
simple:
only
one
node
in
the
a
sees
is
needed
to
declare
this
function
right.
So
now,
if
we
go
for
this
one,
how
many
nodes
do
you
think
we
need.
B
B
So
the
the
question
is:
how
many
nodes
in
the
tree
do
we
need
to
have
or
how
many
nodes
does
this
second
implementation?
The
counts
get
equal,
we'll
represent
in
the
syntax
tree,
given
that
we
left
the
body
out,
but
the
body
is
a
single.
You
know
entry
point
as
we
can
see
in
the
function,
it's
a
block
statement
and
we
can
assume
that
it's
gonna
be
the
same.
On
the
other
side.
B
B
We're
gonna
stab
it
so
here,
I'm,
gonna
start
by
the
end.
When,
when
you
could
you
you,
you
may
find
yourself
in
situation
where
you
prefer,
starting
by
the
end,
starting
by
the
beginning
inside
outside
in
Nicholas
and
I,
have
different
ways
of
thinking
about
it.
It's
fine,
your
wrong
way.
You
have
to
practice
a
bit
to
transform
the
trees,
etc
and
and
you'll
find
a
way
where
you're
comfortable.
B
So
here
we're
gonna
start
with
your
real
function,
expression,
which
is
the
deepest
element
of
the
tree
where
we
pass
the
parameters
and
the
body
then
we'll
copy
the
identifier
and
next
put
it
into
a
decorator
and
then
finally
return
our
viable
declaration.
This
is
exactly
what
we
want
to
do
in
our
extension
right.
We
take
a
function
in
and
we
transform
it
as
a
neural
function,
and
this
is
what
Nikko
will
show
you
right
away
and
that
will
implement
in
the
extension
nice.
So.
A
A
A
A
A
C
A
The
way
this
is
a
moment
where
I
can
provide
parser
options.
So
if
I
want
to
tap
into
babble
plugins,
for
example,
hey
bubble,
can
you
handle
tight
script
files?
For
me?
I
will
just
ask
it
like
to
use
that
plug-in
type
script.
Yes
and
ya,
know
it
works
with
typescript
too,
and
all
kind
of
you
know
the
new
syntax
that
doesn't
is
is
not
yet
existing,
but
you
want
to
handle
so
you
provide
plugins
and
babel
will
be
able
to
parse
the
code
for
you
and
generate
a
valid
ast
behind,
but.
A
A
So
in
the
case
of
typescript
I
think
it's
because
I
think
it's
the
only
one
with
different
file
extension.
Yes,
I
think
it
will
look
at
the
file
extension
to
determine
that
it's
typescript
code
for
the
rest,
I
guess
it's
a
matter
of
I
can
convert
that
syntax
to
a
valid
ast
or
I
can't,
and
it
depends
on
the
grammar
you
are
giving
to
me
so,
for
example,
here
I'm
giving
to
you,
you
can
now
understand
what
a
New
Leash
coalescing
operator
is.
A
So
when
you're
in
control
that
syntax,
you
know
how
to
translate
that
if
I
don't
provide
when
it
encounters
the
syntax
is
invalid
and
it
will
throw
an
error
saying
I
cannot
the
code
is
invalid.
I
cannot
pass
that
that's
how
it
works
in
our
case,
I'm
gonna.
Keep
that
simple.
We
only
need
basic
JavaScript
code.
So
let's
parse
it,
we
got
our
AST.
Oh.
A
C
A
Are
you
here
and
I'm
doing
like
I'm
doing
it
for
real?
So
you
you
see
what's
behind
the
curtain,
turns
out.
You
cannot
find
the
type
declaration
for
this
module,
because
I'm
in
typescript
and
for
babel
pass
or
bubble
types.
They
provide
me
with
type
declarations,
not
bible
generator.
So
when
you're
in
that
situation,
and
that's
why
I
wanted
to
show
you
you
need
to
install
them
from
the
types
packages
which
contains
like
types
for
a
bunch
of
libraries
that
doesn't
provide
you
the
the
packages,
so
in
that
case
babel
generator
and
actually
babel.
A
I'm
gonna
install
from
types
Mabel
generator
and
Babel
Travers
you,
yes,
no
it
understands.
What's
behind
this
okay,
it
complains
again.
That's
because
generate
doesn't
return
me
a
code
strain.
It
returns
me
a
results
which
contains
the
code
string
and
the
source
map.
In
case
you
need
that
we
don't
alright
almost
there,
so
we're
traveling
that
ASD.
Now
we
want
to
do
exactly
what
front
teach
you.
So
when
we
encounter
a
function
declaration.
A
We
want
to
replace
that
pass
with
a
new
arrow
function
that
will
create
from
the
current
path.
Node
I
need
to
create
that
function
now
to
our
function,
so
it
takes
a
node
which
is-
and
this
is
where
I
will
need
the
Babel
types,
so
I'm
gonna
import
all
of
them.
This
is
a
nice
convention,
so
I
can
access
all
of
the
little
helpers
of
Babel.
A
All
right
I
need
to
implement
that
because
for
the
moment,
I
return
nothing.
So
personally,
I
start
from
the
end.
That's
why
Fleur
mentioned
that
we're
not
coding
the
same
way,
but
at
the
end
it
works
the
same
so
I'm
starting
from
the
very
end.
Okay,
you
need
the
variable
declaration
I'm,
giving
you
a
variable
declaration.
Okay,
to
create
a
variable
declaration.
You
need
to
provide
me
what
kind
of
flavor
corrosion
is
it.
So
in
our
case,
it's
a
Const
and
a
bunch
of
declare
a
terse
so
I'm
giving
you
an
empty
list.
A
Let
me
give
you
a
first
declare
ater,
so
I
need
to
create
that
again.
Declare
ATAR.
Can
you
create
a
variable
declare
a
tour
for
me?
Yes,
but
you
need
to
provide
me
an
identifier.
Okay,
I
will
give
you
an
identifier
and,
what's
so,
identify
on
the
on
the
left.
What's
on
the
right,
the
arrow
function,
expression,
yes,.
A
Oh
yeah,
the
firts
Oh,
you
know
it's
not
super
easy
to
read,
but
the
first
argument
is
the
ast.
The
second
argument
is
an
object
which
is
like
it's
the
implementation
of
the
visitor
pattern,
so
it
will
take
as
methods
the
the
methods
will
be
named
as
the
node
name.
So,
for
example,
I
could
provide
a
an
enter
method
that
will
work
for
every
single
node.
In
our
case,
we
want
to
target
only
the
function,
declaration,
nodes,
so
I'm
providing
function.
Declaration.
B
The
key
is
actually
the
function
declaration
yeah,
so
so,
basically
in
the
visitor
pattern,
you
provide
the
names
of
the
nodes
of
the
type
of
the
node
that
you
want
to
mutate.
So
if
we
put
identifier,
let's
say
instead
of
function
as
well
as
function
declaration
every
time
there
is
an
identifier
encountered
in
the
ast
while
traversing
this
method
is
going
to
be
executed
right.
B
Traversing
GIAC
can
be
also
expensive,
as
you
may
think.
You
know
like
if
you
got
like
thousands
of
nodes
you're
going
to
traverse
every
single
node
of
your
ast
and
etcetera
etcetera.
So
you
have
to
also
be
careful
when
you
write
those
kind
of
of
kind
of
transformation
that
it
doesn't
take
forever.
Yes,
so.
A
A
Yeah
at
some
point,
I
will
reach
the
input,
so
that
will
be
the
node
not
as
an
ID
and
this
as
a
name,
maybe
not
what
it.
Why
is
it
telling
me?
No!
That's
because
typescript
is
telling
me:
oh
okay,
it
can
be
an
intensifier
or
it
can
be
no
also.
It
can
be
in
a
scenario
where
you
don't
have
any
an
identifier.
So
thank
you
typescript
for
this.
So
in
that
case
there
is
an
identifier.
I
want
to
use
the
name
otherwise.
A
Well
I
will
need
to
give
up
a
fallback
name
so
converted,
maybe
so
it
forces
you
to.
This
is
more
technical
like
this
stuff,
but
it
forces
you
to
and
like
have
a
strategy
for
all
the
cases,
hopefully
and
finally,
that
arrow
function,
expression,
I'm,
gonna,
build
our
function,
expression
and
here
I
will
just
pipe
the
parameters
from
the
function
declaration
node
to
create
my
arrow
function,
expression.
So
it
takes
the
parents.
Then
it
takes
the
body.
Good
news,
I
got
the
body
and
I
will
also
provide
it.
The
asynch
boolean
value.
A
A
C
A
A
A
This
concept
of
AST
existed
before
it
applies
to
any
kind
of
languages,
so
that's
knowledge
that
can
be
useful
to
leverage,
and
then
we
use
a
vs
cut
API
to
write
back
the
code
and
we
make
that
vs
code
extension.
The
next
step
will
be
to
package
and
publish
that.
So
for
this
you
can
just
follow
the
official
documentation.
It's
very
good.
A
They
give
you
advices
on
the
you
know
the
readme,
the
images,
the
colors,
the
things
like
that,
if
you
want
to
pimp
your
extension
page
and
next,
steps
will
be
to
do
cover
more
things
that
we
didn't
have
time
to
cover.
First,
you
can
see
that
I
coded
and
then
after
some
time,
I,
recompile
and
I
tested
that
manually.
A
That's
fine
because
it's
a
workshop
honestly
when
you
are
really
working
to
a
project,
don't
do
that.
You
will
spend
so
much
time
testing
manually
and
you
will
like
miss
so
much
that
bugs
so
I
showed
you.
You
can
have
integration
tests
using
the
vs
code,
API
honestly
the
transform
function.
I
will
usually
unit
test
that
because
I
don't
need
the
vs
code
API.
So
just
saying
all
so
so
far
we
have
created
an
extension.
It
will
execute
on
all
the
function
declaration
of
your
file
and
convert
all
of
them.
A
A
But
we
could
also
end
all
partial
selection
like
we
have
the
ast.
So
we
know
the
location
of
nodes,
Luiz,
vs
code.
You
know
also
where
your
cursor
is
so
you
could.
You
could
say
when
my
cursor
is
inside,
that
node
I
consider
it's
working
on
that
node
and,
finally,
you
could
explode
that
refactoring
as
a
quick
fix.
So
you
know
the
little
light
bulb
that
sometimes
appear.
That's
the
code
action
or
a
quick
fix.
A
A
We
have
made
an
extension
that
is
doing
automated
refactorings,
like
that,
like
intuitive
automating
refactorings,
if
you're
doing
JavaScript
or
typescript
with
vs
code
I
will
encourage
you
to
like
install
it
and
use
it
to
see
how
it
goes
it
can
help
you
do
exactly
the
things
that
I've
done
at
the
beginning
of
the
session
and
it's
open
source.
So
if
you
want
to
contribute
you're
very
welcome,
you
have
the
knowledge.
Now
you
know
highest
Explorer
comm.
A
C
A
B
C
B
C
A
The
how
code
actions
work,
the
quick
fixes,
instead
of
registering
you,
come
in,
you
register
that
quick
fix
and
vs
code
is
gonna
call
your
code,
your
extension
I
think.
Every
time
the
user
is
changing,
the
selection,
for
example,
or
the
code.
It
will
call
your
function
and
and
tell
you
okay,
tell
me
if
there
is
a
light
bulb
I
need
to
show
with
something
what
you
do
in
that
case,
when
you're
cold,
you
take
the
current
code,
you
take
your
current
position
and
you
try
to
determine.
A
C
A
So
that's
exactly
what
recast
is
for
recast
was
built
on
top
and
recast
is
trying
to
solve
that
problem
by
preserving
the
this
missing
information
like
the
spaces
breaks,
they
do
a
better
job
with
comments,
also
to
preserve
that
when
you
transform
the
code,
another
way
is
not
to
rewrite
in,
like
the
whole
file,
only
the
parts
that
you
need.
That's
also
another
way
to
limit
the.
B
Risk
and
and
that's
a
personal
preference
but
I
know
that
we've
standardized
procedure
in
pretty
much
all
our
code
bases
now
and
that
we
do
stylee's
and
forced
on
us.
More
than
it's
honest,
so
it
makes
very
good
workflows
with
that,
because
this
way
you
can
really
focus
your
transformations
it
around
actually
the
code
and
not
really
the
aspect
of
it.
B
When
you
start
adding
all
these
extra
information
like
Enriquez,
it
gets
very
noisy
in
terms
of
what
you
want
to
output
and
what
kind
of
code
you
need
to
generate
so
I
think
enforcing
pressure
is
also
a
good
practice,
know
that
we
are
at
it
and
if
you
think
about
it
per
year,
is
also
an
AC
transformer.
It
takes
an
AST
and
produce
code
out
of
it.