After working with some of the more mature MVC frameworks like Laravel and Phoenix, I was excited to see AdonisJS hit 5.0 and fully support TypeScript.

It's fairly easy to start a new AdonisJS project:

# npm
npm init adonis-ts-app example-app

# yarn
yarn create adonis-ts-app example-app

Answer the questions for whichever build and setup you want. I selected web so AdonisJS brings in @adonisjs/view as a dependency. I also selected ESLint and Prettier since I want VSCode to automatically format my files for me.

Need to install the following packages:
  create-adonis-ts-app
Ok to proceed? (y)
    _       _             _         _
   / \   __| | ___  _ __ (_)___    | |___
  / _ \ / _` |/ _ \| '_ \| / __|_  | / __|
 / ___ \ (_| | (_) | | | | \__ \ |_| \__ \
/_/   \_\__,_|\___/|_| |_|_|___/\___/|___/


CUSTOMIZE PROJECT
❯ Select the project structure · web
❯ Enter the project name · example-app
❯ Setup eslint? (y/N) · true
❯ Setup prettier? (y/N) · true

RUNNING TASKS
❯ Scaffold project 80 ms
❯ Scaffold project 80 ms
❯ Install dependencies 42 s
❯ Configure installed packages 2.1 s

[ success ]  Project created successfully

╭─────────────────────────────────────────────────╮
│    Run following commands to get started        │
│─────────────────────────────────────────────────│
│                                                 │
│    ❯ cd example-app                             │
│    ❯ node ace serve --watch                     │
│                                                 │
╰─────────────────────────────────────────────────╯

If you look at the package.json file, you will see some useful scripts have already been generated for you.

{
  "scripts": {
    "build": "node ace build --production",
    "start": "node server.js",
    "dev": "node ace serve --watch",
    "lint": "eslint . --ext=.ts",
    "format": "prettier --write ."
  },
}

While you CAN run the linter and formatter through npm or yarn, I'd like VSCode to format files on save. Find Preferences>Settings on the dropdown menu then search for "formatOnSave". If you want this setting to apply to all your projects, click on the "User" tab, but I like to commit my .vscode/settings.json file to my git repository, so I'll select "Workspace" then click to edit the settings.json file. Update the file like so:

{
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

This tells VSCode to use "esbenp.prettier-vscode" to format TypeScript files which make up all the app files for AdonisJS 5.0 projects.

Now let's look at the .prettierrc file.

These are the AdonisJS defaults that I guess @AmanVirk1 likes, but I'm more partial to semicolons so I'll be changing my file:

{
  "trailingComma": "es5",
  "semi": true, // updated from false
  "singleQuote": false, // updated from true
  "useTabs": false,
  "quoteProps": "consistent",
  "bracketSpacing": true,
  "arrowParens": "avoid", // updated from "always"
  "printWidth": 100
}

I like double-quotes and I'd like to avoid the parentheses on my arrow functions.

There are a couple VSCode extensions that you'll need for everything to work: dbaeumer.vscode-eslint and esbenp.prettier-vscode

Now open start/routes.ts and save the file. It should now automatically add in those awesome semicolons. ;)

Now let's go and update all the files in the project:

npm run format

One last thing. Let's remove .vscode from the .gitignore file so we can commit it into the repo.