Looking to set up VSCode for a TypeScript project? This article will walk through the initial configuration steps for just that.
This walk-through assumes you have the already have the following installed:
To begin, let’s install the typescript
module globally:
$ npm install -g typescript
$ tsc --version
Great! Now we can code our .ts
files. A small issue remains. In order to compile those files to .js
, we must run tsc
or npm run build
manually. To avoid this, we can auto-compile on save in our IDE.
Configure Auto-Compile on Save
Using the build tasks in VSCode, you can trigger auto-compile on save. This can be done through the settings search bar, or the application's menu bar in macOS.
Option 1:
- Enter
CMD+SHIFT+P
- Select:
Tasks: Configure Default Build Task
- Choose:
tsc: watch - tsconfig.json
Option 2:
- Find tabs: in OS VSCode menu bar
- Click:
Terminal
(open dropdown) - Select:
Configure Default Build Task
- Choose:
tsc watch
option
Now during development, anytime you save the .ts
files, it will generate .js
output automatically.
Hiding Compiler Output In Editor File Tree
After running tsc build
, it will populate the directory with compiled files. You may find .js
, .js.map
, or .d.ts.
files, which could be useful to explore when learning. However, these can clutter up the file tree in the IDE.
There is an easy was to hide these files in the workspace, without deleting them from the file system.
To configure the following VSCode settings, it can be done in the global settings.json
file, or for the projects workspace
To set up a workspace, Do "CMD+SHIFT+P" => "Preferences: Open Workspace Settings"
. This creates the <rootDir>/.vscode/settings.json
file in the project directory. Note, you include the .vscode
folder in the git history, unless a team is not sharing these settings.
To find the settings file do "CMD+SHIFT+P" => "Preferences: Open User Settings (JSON)"
or "CMD+SHIFT+P" => "Preferences: Open Workspace Settings"
.
Add the following options for file ignoring to the VSCode settings.json
:
{
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js.map": true,
"**/*.js": {"when": "$(basename).ts"}
}
}
Or
{
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.d.ts": {
"when": "$(basename).ts"
},
"**/*.js": {
"when": "$(basename).ts"
},
"**/*.js.map": {
"when": "$(basename)"
}
}
}
Using .gitignore
When using git for your TypeScript project, you are not committing the compiled JavaScript code. You most likely will ignore the files generated, so you can configure that in the .gitignore
. Be aware of needed files however, for example a jest.config.js
file.
Keeping the source .ts
files, a .gitignore
file may look like this:
*.js
!jest.config.js
*.d.ts
node_modules
!lambda/*.js
Configure Format On Save
Optionally, you can avoid wasting time on formatting with formatOnSave
. Add the following key to your settings.json
file to enable:
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
Conclusion
That's it! You can now begin development for your new TypeScript project, with auto-compile and format-on-save enabled. The main purpose of this article was to document the setup project for my own use, and strengthen my understanding by teaching.
That’s all for today, I hope this article was helpful. If you have any questions, feel free to connect with me.
Follow my journey or connect with me here:
- LinkedIn: /in/spencerlepine
- Email: spencer.sayhello@gmail.com
- Portfolio: spencerlepine.com
- GitHub: @spencerlepine
- Twitter: @spencerlepine
Top comments (0)