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)