Setting Up Visual Studio Code for AdonisJs Development

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.

Blog

Setting Up Visual Studio Code for AdonisJs Development

Warren Wong

Join Our Newsletter. No Spam, Only the good stuff.

Related