DEV Community

loading...
Cover image for Setting Up Visual Studio Code for AdonisJs Development

Setting Up Visual Studio Code for AdonisJs Development

wrrnwng profile image Warren Wong Originally published at warrenwong.org ใƒป2 min read

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
Enter fullscreen mode Exit fullscreen mode

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                     โ”‚
โ”‚                                                 โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
Enter fullscreen mode Exit fullscreen mode

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 ."
  },
}
Enter fullscreen mode Exit fullscreen mode

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"
  },
}
Enter fullscreen mode Exit fullscreen mode

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
}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide