Fullstack Svelte Course Overview

Introduction

Setting up your local development environment

Setting Up a Svelte Local Development Environment

How to Initialize a Boilerplate Svelte Project

Setting Up a Formatter and Linter for Svelte Development

Setting Up A Development Environment

Setting up a Single Page Application Router

An Introduction to Svelte Routing for Single Page Applications

Creating a Front End Layout for Admin Pages

Front End Layouts - Creating Reusable Parent Components

Front End Routing

Using Front End Component Libraries for Svelte Development

Learn Svelte - How to Create a Basic Landing Page

Using Svelte to handle DOM events and bind inputs

A Guide to Handling DOM Events and Input Binding with Svelte

User Interface Styles and Interactions

Initialize an Express Node.js Project for Svelte Development

Creating REST API GET, POST, PUT, and DELETE Requests

School Lunch Data Model

Creating the Backend Application

Fetching Data from the Frontend with Axios

How to Use Axios to Fetch Data From APIs for Svelte Apps

Using Svelte Each Blocks to Iterate a List

Svelte 'each' Blocks - Loop Through an Array and Update a DOM

Using Svelte to Show and Hide Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Configuring Knex js Migrations for Database Management Scripts

How to Use Knex js in an Express Backend App

Adding Post, Put and Delete Endpoints to the Backend

Sveltekit Endpoints - How to Use Post, Put, and Delete

Adding Persistence with PostgreSQL

Cleaning Up the Front End of a Single Page Application in Svelte

Building a Form in Svelte That Lets Users Create Data Entities

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

Securing the application with JSON Web Tokens

Securing a Svelte Application with JSON Web Tokens

Evolving the App to a Multi Tenant Architecture

Get Started Creating a Multi Tenant Application in Svelte

Creating a User Signup Flow for a Multi Tenant Svelte App

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building Svelte Single Page Applications and Serving Static Files

Production Deployment

This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

Persistence with a relational PostgreSQL database

Frontend create, read, update and delete operations

How to integrate Auth0 for JWT authentication

As developers, we want to craft consistent and readable code. It is worth spending a little bit of extra time now to set up formatting and linting tools that will help keep your code clean and enforce good development practices.

Linting is the process of statically analyzing code for problems such as undeclared variables, unused variables and other syntax and best practice issues.

 and look at a few examples of how these tools help developers create more professional and bug-free code.

First off, go to the Extensions tab in VSCode and install the Prettier extension. This will integrate Prettier into VSCode.

 in the Default Formatter field under Settings:

After this, head over to the command line under the 

 directory and install the following NPM dev dependencies:

$ npm install --save-dev prettier-plugin-svelte

The last step for setting up Prettier is to create the file 

 containing the Prettier settings below. You can change these according to your own preference - for example, if you like semicolons with JavaScript, change the 

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

 and hit Cmd-S or Ctrl-S to save the file. Since we have set 

, VSCode should use Prettier's configuration to format the file.

You should notice that Prettier's settings have been implemented - for example, the semicolons may have been removed and the tab width changed from four to two.

---
title: Setting Up a Formatter and Linter for Svelte Development
description: Setting up a Formatter and Linter
privateVideoUrl: https://fullstack.wistia.com/medias/z0f2mfu0re
codeFolder: course/code/module_01/lesson_03/school-lunch/frontend
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code_postgres_(author_original)/module_01/lesson_03/App/frontend
---

### Formatting and Linting

As developers, we want to craft consistent and readable code. It is worth spending a little bit of extra time now to set up formatting and linting tools that will help keep your code clean and enforce good development practices.

> Linting is the process of statically analyzing code for problems such as undeclared variables, unused variables and other syntax and best practice issues.

In this lesson, we will configure **Prettier** and **ESLint** and look at a few examples of how these tools help developers create more professional and bug-free code.

### Prettier.js

First off, go to the Extensions tab in VSCode and install the Prettier extension. This will integrate Prettier into VSCode.

![Prettier](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_02/lesson_02.03/public/prettier-extension.jpg)

Next, go to VSCode _Preferences > Settings_ and search for `format`. Make sure the option _Format on Save_ is checked.

![format on save](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_02/lesson_02.03/public/format-on-save.jpg)

Additionally, you may need to choose `esbenp.prettier-vscode` in the Default Formatter field under Settings:

![default formatter](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_02/lesson_02.03/public/default-formatter.png)

After this, head over to the command line under the `frontend` directory and install the following NPM dev dependencies:

```shell
$ npm install --save-dev prettier-plugin-svelte
```

The last step for setting up Prettier is to create the file `frontend/.prettierrc.json` containing the Prettier settings below. You can change these according to your own preference - for example, if you like semicolons with JavaScript, change the `semi` property to true.

```json { actualFilename=../../../code/module_01/lesson_03/school-lunch/frontend/.prettierrc.json endChar=86 endLine=7 startChar=0 startLine=1 statedFilename=.prettierrc.json url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_02/lesson_02.03/.../../code/module_01/lesson_03/school-lunch/frontend/.prettierrc.json }
{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}
```

freeman-g

In this lesson, we're going to talk about formatting and linting.

As developers, we want to craft consistent and readable code.

And even though it's a little bit of a pain, it's worth spending some extra

set up formatting and linting tools that'll help us keep our code clean.

So formatting is just like what it sounds like.

It's a tool that will automatically indent and space the code.

And linting is the process of statically analyzing code for problems, such as

unused variables, and other syntax issues.

In this lesson, we're going to use the prettier and ES lint extensions for VS

And then we'll look at a few examples of how the tools actually help.

So head over to VS code, and then click the extensions tab.

Now I've already installed these extensions and some other ones, and there's

extensions you can use from the marketplace.

So I'd encourage you to check those out as well.

But the ones we're interested in right now are prettier.

So go ahead and search for that one and install it.

Go ahead and install the Svelte language support for VS code extension.

And then go ahead and install ES lint as well.

Now once you have those installed, I think it's really nice to format on save.

So you can go to VS code, preferences, and go to settings, and then search for

And so this will just automatically format your files every time you save them.

Now with different versions of VS code, sometimes this could be a little bit

So you may also need to set prettier in the default form matter box here.

And then if you're still having trouble specifically with Svelte files, you may

button here to open settings in JSON mode and add this bit of code right here.

And this will specifically point the James Burdles Svelte code formatter, which

And it'll specifically set that up with Svelte files.

So you may have to tweak it and spend a little bit of time with it to get it

But like I said, I think it's worth it for that formatting feature.

So another thing that we need to do at this point is install the prettier plug-

So copy this command here and head over to the command line.

If you're running your local development environment still, you can hit Ctrl C

And that'll save this as it'll install it and save it as a dev dependency in

And then heading back to VS code, we're going to set up a prettier RC.json file

And this'll be configuration for prettier.

So back in VS code, go to the root of the front end project here.

And then paste this configuration into that file.

So these are just some rules that we're giving prettier.

And so this will enforce single quotes so that we're consistent with that.

And I have mine set up with semicolons as false.

Now of course, if you do like those, you can set that to true.

And you can play with your tab width and so forth to tailor it to how you like

So now that we have that set up heading back to main JS, if I hit control S

save it, you'll notice that the semicolon went away.

So now every time I save a file, even if I add semicolons in, it will

Let's go one step further now and look at ES lint.

So we've already installed the ES lint plugin for VS code.

And next we need to run an npm command to install ES lint libraries.

So go ahead and run that in your terminal.

And while that's running, we also need to set up an ES lint RC.json file.

So we'll go ahead and set up that in the root of the project.

And this will be the configuration that we use for that file.

And so this configuration will use a svelte plugin.

And so that'll tell ES lint to actually lint.svelte files, which we want to do.

We want to do svelte files in addition to JS files and HTML files and so forth.

So this configuration will work for that.

Now in order to actually lint the files, we need to run npxes lint and tell ES

And so what we're going to do is add this to our npm scripts.

So in package.json, we have a build script and a dev script.

And this is what they look like out of the box.

So we're going to update them to run our linter first.

And this will be an opportunity to catch errors while we start the project.

And then find the script section and at the front of the build script, add in

Now this syntax will work for max and Linux machines, but you might have to