Setting Up Visual Studio Code for AdonisJs Development

March 31, 2021

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.

Subscribe

I'd like to send you a weekly recap of all the articles I write as well as my take on the latest news on web development with Vue, React, Elixir/Phoenix, and others. Just fill out your email and name below!


Prev: Adding a Date Format Filter in Nuxt
Next: Easily Add TailwindCSS to Your AdonisJS Project