VS Code Extensions and Configuration
In this lesson, we'll install three extensions for VS Code from the AdonisJS Core Team to make our lives easier as we build applications. We'll also configure Prettier and ESLint with auto-formatting and lint fixing on save.
- Author
- Tom Gobich
- Published
- Jan 24
- Duration
- 6m 26s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
VS Code Extensions and Configuration
-
[MUSIC]
-
>> There's a couple of extensions that we can install and
-
settings that we can set within Visual Studio Code to make
-
our lives a lot easier whenever we're working with AdonisJS.
-
So let's go and install those now.
-
You'll notice first that I have a new bar over here.
-
You've probably had this all along
-
unless you've explicitly turned it off like I had.
-
This allows us to switch out
-
our File Explorer with various other things.
-
There's the search icon,
-
source control, run and debug, and extensions.
-
Extensions is what we care about in this particular lesson.
-
Now, if you did hide this away,
-
you can always show your extensions by doing
-
Command or Control Shift X.
-
That will take you into a panel like this,
-
where we can search the extension marketplace.
-
By default though, it will show
-
you a list of what you have installed.
-
So first, let's take care of the coloring for our Edge files.
-
So to start out with, let's search for EdgeJS, and there we go.
-
We see the Edge Template Syntax Highlighter right here.
-
You want to go ahead and install this package.
-
Once you do, your Edge file
-
should start getting highlighted like mine is.
-
Now, it might be different colors.
-
That's going to vary depending on the theme that you have
-
installed within Visual Studio Code.
-
By default, it might be something like this.
-
If you're interested in my particular theme,
-
I'm using a theme called GitHub.
-
I have a lot of them, dark.
-
Specifically, I believe it's one of the two default options.
-
So there we go. That particular extension
-
would be from the GitHub theme extension.
-
So if you're interested in that one,
-
you can install it just like so.
-
That one's completely optional though.
-
Next, there's a theme specifically for
-
AdonisJS called the AdonisJS extension.
-
This one's by Jillian Raboteau,
-
who is a core member for AdonisJS.
-
If we click into this, it'll give us
-
a nice little overview of what exactly this extension does.
-
So it's going to give us a command palette for Ace,
-
which is AdonisJS's command line interface.
-
It's going to allow us to use all of the assembler commands,
-
which will allow us to make different files
-
within our project in a nice easy manner.
-
Once we get to it, it will allow us to migrate,
-
seed, and run database commands.
-
We can write commands from the activity bar,
-
view routes, open and see documentation,
-
offer validation for Adonis RC file.
-
And another really nice one is the go-to controller,
-
which will allow us to command control click
-
into a controller from a route definition.
-
Now some of that verbiage you're probably
-
not going to be familiar with at this point in time.
-
Don't worry about it.
-
That'll all come with time later on.
-
Now there's also another one by Jillian Raboteau
-
called the Joppa extension.
-
This is AdonisJS's test runner.
-
And this extension is very nice
-
whenever you're working with tests,
-
because it's going to offer its testing API integration
-
directly into our code base.
-
And we'll be able to run a specific test
-
just by clicking a button right above that test declaration.
-
We can see snapshot information,
-
have snippets and some other things as well.
-
So you want to make sure to install these three.
-
They'll make your lives a lot easier with AdonisJS.
-
But there's a couple of non-AdonisJS things
-
that AdonisJS actually provides configurations for
-
if we want to use them.
-
First, Prettier.
-
So we can type in Prettier
-
within the marketplace extension search,
-
and we'll see a couple.
-
We see Prettier right here,
-
which is from the official Prettier team.
-
And then we also see Prettier ESLint.
-
Now ESLint is the second thing
-
that AdonisJS provides a configuration for
-
if we decide to use it.
-
Now you don't need to install these extensions
-
if you don't want them.
-
But what Prettier will do is it provides code formatting,
-
which means that it's going to make things aligned.
-
It'll make sure that our lines don't get too long
-
and things like that,
-
that help make our code overall more readable
-
and standardized.
-
ESLint provides linting.
-
Linting is essentially holding your code
-
to a specific set of rules.
-
Things like always including or omitting semicolons,
-
wrapping code within parentheses,
-
so on and so forth, things like that.
-
So if you care about both of those,
-
I would go ahead and install the Prettier ESLint extension.
-
If you just want the code formatting,
-
go ahead and install just the Prettier one.
-
And if you did choose the Prettier ESLint,
-
there's also a specific ESLint package from Microsoft
-
that works with as well.
-
So you can go ahead and install that too.
-
All of those are completely optional
-
depending on whether or not you care about linting
-
and formatting help.
-
Now, if you do care about linting and formatting help,
-
there's a couple of settings that we can change
-
within our Visual Studio Code configuration
-
to make these happen automatically for us
-
whenever we save our files or paste code in.
-
So let's go ahead and head into our settings.
-
Within your menu bar, mine's off screen,
-
go ahead and hit code,
-
or if you're in Microsoft, it's probably underneath file,
-
and then find settings.
-
It should open up something like this.
-
What we wanna do is get to the underlying
-
JSON configuration file.
-
So you can just type in code actions
-
and this should pop up
-
where we can see edit in JSON right here.
-
Go ahead and give that a click
-
and it will open up our JSON file
-
and it will look something like this.
-
Now, I have a lot going on here.
-
I have my Visual Studio Code pretty configured,
-
but it's down at the bottom of my configuration
-
where some of the options that we care about are.
-
Primarily, these ones right here.
-
If you installed Prettier or Prettier ESLint,
-
you'll wanna set that as your default formatter.
-
So you can set editor.defaultformatter
-
and then provide that extension name as the value.
-
This will auto-complete.
-
So if we just provide strings here,
-
we'll see an option
-
of all the different extensions that we have.
-
Should be able to just type in some form of Prettier.
-
That will narrow it down
-
and you can select whichever one you have installed there.
-
Then there's two options that we can have
-
to have our formatting happen automatically for us.
-
Format on paste, you can set that to true
-
and format on save, you can set that to true as well.
-
And those do exactly what the name suggests.
-
It will run the default formatter for the file
-
whenever you paste code or whenever you save your files.
-
And then lastly for linting, if you have that installed,
-
you can set editor.codeactions on save.
-
An example of a code action will be
-
like the linter automatically fixing something for us.
-
So that could be things like adding in a line break
-
at the end of our files to make sure
-
that it always ends with a clean line
-
or adding or removing semicolons automatically for us.
-
Those are code action examples.
-
So we can have the linter run that automatically
-
for us whenever we save our files
-
by setting this editor.codeactions on save
-
and specifically setting source.fixall.eslint
-
and set it to explicit.
-
If we give that a save, jump back into our code
-
which is this top option over here in our activity bar
-
and head back into our routes file.
-
Let's remove line 13, which is that last line.
-
You'll see this red squiggly over here now.
-
That's our linter suggesting
-
that we have some kind of an issue.
-
And right here, it's specifically saying
-
that we need a new line break.
-
The configuration that we have says
-
that we should always end our files with a clean line break.
-
So without hitting enter,
-
I'm just going to click up here at line nine,
-
hit command or control save,
-
and it will automatically add that line break in for us
-
thanks to our configuration set.
-
The same thing here.
-
If we replace this import from single ticks to double ticks,
-
you'll see now this is all red and underlined
-
because it's suggesting that we replace those double ticks
-
with single ticks as defined by our linter.
-
So we can give this a save
-
and it will automatically swap those back for us.
-
You'll see that happen a lot for us as we get going along.
-
And along the way,
-
it's going to help us keep our code consinged, intact,
-
and the formatter will come along
-
to help keep it as legible as possible.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (4 Comments)
Please sign in or sign up for free to join in on the dicussion.
adonisdev
I followed exactly same steps in VSCode for eslint and prettier installation and settings configuration for VS Code.
But eslint does not seem to be working. I tried removing new line, removing semicolons at end.
But I dont see eslint errors / suggestions.
Please sign in or sign up for free to reply
tomgobich
Hey there! A few things that come to mind that may turn off or disable ESLint are:
Ensure the ESLint extension is enabled in your VSCode workspace
Ensure the ESLint extension doesn't need a VSCode reload (would say "Reload VS Code" on the extension)
Ensure you have ESLint enabled within VS Code, you can find this within VS Code's settings by typing "eslint" within the search bar.
Please sign in or sign up for free to reply
redeemefy
It looks like the edge extension got merged into the AdonisJS Extension?
Please sign in or sign up for free to reply
tomgobich
Looks like it's still separated, though there is an AdonisJS Extensions Pack that includes all the AdonisJS-based extensions in one install
AdonisJS Extension
Japa Extension
EdgeJS Extension
Please sign in or sign up for free to reply