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.
Top comments (0)