Hello everyone, today I am going to be teaching you how I make new typescript projects. Most of the files here are based on my personal preference but you can change them to yours. I plan on making a series of posts for working with monorepos (workspaces) and installing the necessary Visual Studio Code Extensions.
Installation
You can use any package manager (yarn or npm), but today I'll be using pnpm.
Initializing the Project
This command will create the template package.json file for us to use. This file will store all of our dependency versions and our npm scripts.
pnpm init -y
The next command we will be running is for initializing a git repository. Git is a version control system will help us to manage and store our code and to help us with collaboration.
git init
Typescript + Prettier + ESLint Installation
The next thing you'll want to do is install all of the development dependencies. Prettier is for formatting your code which makes it much more readable.
pnpm i -D typescript @types/node prettier eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
Setting Up The Configuration Files
Next we will need to set up the configuration files for the various packages.
.prettierrc (Prettier)
{
"tabWidth": 4,
"printWidth": 80,
"trailingComma": "all",
"semi": true
}
.eslintrc.json (ESLint)
{
"extends": [
"prettier",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint"
],
"parser": "@typescript-eslint/parser"
}
tsconfig.json (Typescript)
This is our typescript build configuration file. You can set declaration to true if you are making a library for other developers to use in their own packages.
{
"compilerOptions": {
"target": "ES2019",
"module": "CommonJS",
"moduleResolution": "node",
"skipLibCheck": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"declaration": false,
"outDir": "dist"
},
"include": ["src"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
.gitignore
# Distribution
dist
out
build
node_modules
# Logs
*.log*
logs
# Environment
*.env*
# Misc
.DS_Store
package.json
Finally, we will add a scripts section to the package.json. This will let us build the project with pnpm run build
. Keep in mind that the following code block does not contain the full package.json, only the scripts section.
"scripts": {
"build": "tsc --build"
},
Final Notes
Now you can create your source files in the src
folder of your project. I have also created a github template repository for you to initialize your projects with if you do not want to follow all of these steps each time you create a new project.
That's it! Thanks for reading one of my first dev.to posts.
Top comments (0)