Introduction
Starting a new project can sometimes be tedious, and sometimes there are so many things to configure that a good tutorial can really help. I developed a few small projects of my own in Atom Typescript and found a configuration that works for me. So in this article, I'll show you one way of doing things and hope it will help you start working on your projects much faster.
Prerequisites
IDE
So let's start with the IDE configuration and plugins.
There are plenty of good IDEs out there, after a little research, I chose to develop in Atom because of the large number of plugins available for it and the fact that it's free.
Plugins
There are lots of available plugins out there, you can search for them and install them, I will concentrate on the plugins to help you develop in Typescript. You can find and install the plugins inside the Atom settings in the "Packages" tab.
- atom-typescript: This plugin is basically the holy grail for typescript, it compiles it, arranges the files, allows intellisense and lots of other goodies. This is a must have plugin if you want to work in Typescript
- tree-ignore: This plugin allows you to hide not necessary files from the tree view. Since you will work in Typescript and transpile in to JavaScript, for each file there will be at least 2 files, the *.ts file and the .js file (there can also be mapping and *.d.ts files as well). The tree will be full of files you don't really use and it will be a pain in the eyes to search for the needed files. This plugin will help you hide the unneeded files. I will show you how to configure it later.
Configure the Environment
package.json
There are lots of tutorials on creating the package.json file, you can search for them, I will show the basic one here.
Open the git bash, navigate to your project folder and run the npm init
command. The setup will guide you through the minimum needed configurations.
tsconfig.json
This file will basically contain all the needed configuration for atom-typescript.
Open the project folder in the Atom. Press the Ctrl/Command + Shift + P
(Windows/Mac) and type "tsconfig
". You should see the command "Typescript: Create Tsconfig.json Project file
". Press enter. (If it does nothing, add an empty "something.ts" file to the project and try again, after the tsconfig.json is created, you can delete the file)
Open the tsconfig.json file, you can see the structure, it's quite straight forward, there are lots of available configurations that are available on the atom-typescript git page and here is the configuration file I decided to work with after a few projects:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": true,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true,
"allowUnreachableCode": false
},
"filesGlob": [
"**/*.ts",
"**/*.tsx",
"!node_modules/**"
],
"exclude": [
"src/**/*.d.ts",
"index.d.ts",
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"compileOnSave": true,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false,
"formatOnSave": true
},
"formatCodeOptions": {
"indentSize": 2,
"tabSize": 2,
"insertSpaceAfterCommaDelimiter": true,
"insertSpaceAfterSemicolonInForStatements": true,
"insertSpaceBeforeAndAfterBinaryOperators": true,
"insertSpaceAfterKeywordsInControlFlowStatements": true,
"insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"placeOpenBraceOnNewLineForFunctions": false,
"placeOpenBraceOnNewLineForControlBlocks": false
}
}
A few things to notice here:
compilerOptions.target
- You can change to whatever ES version you want compilerOptions.module
- I have chosen to use CommonJS
but feel free to chose others from the available ones in the atom-typescript documentation. compileOnSave
/buildOnSave
options atom.formatOnSave
option formattingOptions
You can see all the options and many more here.
.atomignore
As I said before, the tree-ignore
plugin allows you to hide files that are not needed from the tree view.
To configure which files to ignore, just add an .atomignore file inside your project folder and write the file patterns you want to ignore, you can modify the file whenever you like and add/remove whatever you want.
Here is an example of what I usually put inside the file:
.git
index.js
index.d.ts
src/*/*/*.js
src/*/*/*.d.ts
src/*/*.js
src/*/*.d.ts
src/*.js
src/*.d.ts
As you can see, I have all my source files inside the src directory. The one issue I found with the plugin is that it does not allow you to configure deep folder patterns so you can see multiple depths patterns for the src directory.
.npmignore
If you plan to publish your project on npm
, you should consider adding the .npmignore
file to make the package as small as possible without any files that are not needed.
Here is an example of what I usually add to the file:
.atomignore
node_modules
tests
typings
tsconfig.json
typings.json
*.ts
!*.d.ts
.npmignore
*.test.js
*.test.d.ts
.gitignore
If you work with GIT and for some reason you don't want some of the files to be committed, you can ignore them using the .gitignore
file. I usually don't add it because I want all my projects to be saved (even the node_modules
. There are many articles which debate whether you should do it or not, you can do whatever you want).
Basic Files and Folders
Add an empty index.ts file and press F6 to compile.
Add a src folder or any other name you are used to, this is where I put all the source files.
Tests
In the past, I used to create a different folder to contain all my tests but then I came across an article which suggested to put the test files near the source files which makes it easier to find them and saves the double managing of the folder structures for the source and the test folder trees, but again, you can do whatever you like.
So if for example, you add a file: src\someClass.ts, the test file for that file will be: src\someClass.test.ts
You can see that in the .npmignore
, I ignore all the files that match the "*.test.ts" pattern.
I write the tests in mocha + sinon + chai so I will show you the configurations for this, if you use some other test frameworks, you can apply the principles I show here to your framework.
You will see the typings
ambient installations because when I wrote the article, the d.ts files weren't available in the Typings
repository and only in the DefinitelyTyped
.
Install Mocha
npm install -g mocha
<s>typings install mocha --save-dev --ambient</s> (typings 0.x)
typings install dt~mocha --global --save-dev
I install it globally for easy access.
You can find the documentation on the official Mocka page.
Update the package.json file scripts with test script:
"scripts": {
"test": "mocha -c -b src/**/*.test.js"
}
The script runs all the test files inside the src folder. If you manage your test files inside a "test" folder, just change the src to test.
The -c
stands for color
, so the test output will be more readable and the -b
stands for break of first failed test, because I want to fail fast and fix the failing test and move to the next one. You can add/remove the flags as you wish using the documentation.
To run the tests you can open the git bash in the project folder and run the next command:
npm test
Install Sinon
npm install sinon --save-dev
<s>typings install sinon --save-dev --ambient</s> (typings 0.x)
typings install sinon --save-dev
You can find the documentation on the official Sinon page.
Install Chai
npm install chai --save-dev
<s>typings install chai --save-dev --ambient</s> (typings 0.x)
typings install chai --save-dev
You can find the documentation on the official Chai page.
After running all the scripts, you will notice a few things happened:
- Your package.json file now has a
devDependencies
section. - A typings.json file was added with the typings
ambientDevDependencies
. - A typings folder was added to the project containing the d.ts files for
Chai
, Sinon
and Mocha
.
That's It
Now all you need to do is just write your code.
When you need a d.ts file, just search the typings
repository with:
typings search something
If you don't find it there, search the ambient repository:
typings search something --abmient
After you find it, install just replacing the search
keyword with install
keyword.
For compiling the Typescript files, use F6.
Examples
Here is a project that is configured this way:
Here are some projects that are configured the same way except the tests are in a different folder:
Enjoy!