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, 24
- Duration
- 6m 27s
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
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create ThemLesson 2.05m 24s
-
2.1Rendering a View for a RouteLesson 2.16m 30s
-
2.2Linking Between RoutesLesson 2.27m 52s
-
2.3Loading A Movie Using Route ParametersLesson 2.39m 18s
-
2.4Validating Route ParametersLesson 2.46m 7s
-
2.5Vite and Our AssetsLesson 2.56m 39s
-
2.6Setting Up Tailwind CSSLesson 2.67m 5s
-
2.7Reading and Supporting Markdown ContentLesson 2.74m 32s
-
2.8Listing Movies from their Markdown FilesLesson 2.88m 51s
-
2.9Extracting Reusable Code with ServicesLesson 2.97m 4s
-
2.10Cleaning Up Routes with ControllersLesson 2.104m 52s
-
2.11Defining A Structure for our Movie using ModelsLesson 2.119m 38s
-
2.12Singleton Services and the Idea of CachingLesson 2.126m 11s
-
2.13Environment Variables and their ValidationLesson 2.134m 16s
-
2.14Improved Caching with RedisLesson 2.1410m 44s
-
2.15Deleting Items and Flushing our Redis CacheLesson 2.156m 46s
-
2.16Quick Start Apps with Custom Starter KitsLesson 2.166m 28s
-
2.17Easy Imports with NodeJS Subpath ImportsLesson 2.178m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating BasicsLesson 3.08m 49s
-
3.1HTML Attribute and Class UtilitiesLesson 3.16m 9s
-
3.2Making A Reusable Movie Card ComponentLesson 3.210m 24s
-
3.3Component Tags, State, and PropsLesson 3.34m 53s
-
3.4Use Slots To Make A Button ComponentLesson 3.46m 56s
-
3.5Extracting A Layout ComponentLesson 3.55m 13s
-
3.6State vs Share Data FlowLesson 3.62m 59s
-
3.7Share vs Global Data FlowLesson 3.76m 8s
-
3.8Form Basics and CSRF ProtectionLesson 3.86m 13s
-
3.9HTTP Method Spoofing HTML FormsLesson 3.93m 3s
-
3.10Easy SVG Icons with Edge IconifyLesson 3.107m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database ConnectionLesson 4.04m 3s
-
4.1Understanding our Database SchemaLesson 4.19m 35s
-
4.2Introducing and Defining Database MigrationsLesson 4.218m 35s
-
4.3The Flow of MigrationsLesson 4.38m 28s
-
4.4Introducing Lucid ModelsLesson 4.45m 43s
-
4.5Defining Our ModelsLesson 4.56m 49s
-
4.6The Basics of CRUDLesson 4.611m 56s
-
4.7Defining Required Data with SeedersLesson 4.711m 11s
-
4.8Stubbing Fake Data with Model FactoriesLesson 4.813m 48s
-
4.9Querying Our Movies with the Query BuilderLesson 4.915m 30s
-
4.10Unmapped and Computed Model PropertiesLesson 4.103m 24s
-
4.11Altering Tables with MigrationsLesson 4.117m 6s
-
4.12Adding A Profile Model, Migration, Factory, and ControllerLesson 4.122m 57s
-
4.13SQL Parameters and Injection ProtectionLesson 4.139m 19s
-
4.14Reusable Query Statements with Model Query ScopesLesson 4.148m 11s
-
4.15Tapping into Model Factory StatesLesson 4.159m 15s
-
4.16Querying Recently Released and Coming Soon MoviesLesson 4.164m 59s
-
4.17Generating A Unique Movie Slug With Model HooksLesson 4.177m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid ModelsLesson 5.05m 49s
-
5.1Model Factory RelationshipsLesson 5.12m 54s
-
5.2Querying Relationships and Eager Vs Lazy LoadingLesson 5.25m 17s
-
5.3Cascading and Deleting Model RelationshipsLesson 5.35m 16s
-
5.4Defining One to Many Relationships with Lucid ModelsLesson 5.46m 56s
-
5.5Seeding Movies with One to Many Model Factory RelationshipsLesson 5.55m 24s
-
5.6Listing A Director's Movies with Relationship Existence QueriesLesson 5.68m 41s
-
5.7Listing and Counting a Writer's MoviesLesson 5.78m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and DirectorLesson 5.85m 18s
-
5.9Defining Many-To-Many Relationships and Pivot ColumnsLesson 5.99m 48s
-
5.10Many-To-Many Model Factory RelationshipsLesson 5.104m 50s
-
5.11A Deep Dive Into Relationship CRUD with ModelsLesson 5.1118m 5s
-
5.12
-
Join The Discussion! (8 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
fadli-hidayatullah
It looks, this config doesn't work
"[edge]":{
"editor.defaultFormatter": "adonisjs.vscode-edge"
},
I tried to format the edge file but there is no formatter except html language. How to solve it?
Please sign in or sign up for free to reply
tomgobich
Hi Fadli! Yeah, EdgeJS, at the moment, doesn't have formatting capabilities. Though there is an effort via a member of the community to get it added. I need to revisit a few portions of this lesson, one of which, is removing that line from my config as it doesn't do anything. Apologies about that!
Please sign in or sign up for free to reply
jeffrey
Are you using a specific icon theme in VS code? My .edge file extensions are not rendered with the icon that I see in the video.
Please sign in or sign up for free to reply
tomgobich
Hi Jeffrey! Yeah, I'm using the Bearded Icons file icon theme.
Please sign in or sign up for free to reply