Setting Up Visual Studio Code for AdonisJs Development
Tags: node, adonisjs, typescript, vscode
Published: 2021-04-01 10:32:39

---
title: Setting Up Visual Studio Code for AdonisJs Development
description: Set up your VSCode editor to work with your new AdonisJS 5.0 project. Make sure all your files are updated automatically. 🚀
published: true
tags: NodeJS, AdonisJS, TypeScript, VSCode
canonical_url: https://warrenwong.org/posts/setting-up-vscode-for-adonisjs
cover_image: https://warrenwong.org/_nuxt/img/christopher-gower-m_HRfLhgABo-unsplash-960.jpg
---
After working with some of the more mature MVC frameworks like Laravel and Phoenix, I was excited to see [AdonisJS](https://preview.adonisjs.com) hit [5.0](https://preview.adonisjs.com/blog/introducing-adonisjs-v5) and fully support TypeScript.

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

```bash
# 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.

```json
{
  "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:

```json
{
  "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](https://twitter.com/AmanVirk1) likes, but I'm more partial to semicolons so I'll be changing my file:

```json
{
  "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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=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:

```bash
npm run format
```

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