Developing code in JavaScript is evolving at a rapid pace. Whereas once JavaScript was considered a little scripting language to make web pages a bit more dynamic, it is now (according to StackOverflow) the most popular language in the world, and is growing year-on-year in popularity.
This explosion in popularity has resulted in a wide ecosystem of tooling to make developing code with JavaScript easier and more efficient. In this post, we’re going to be discussing four of these tools, and how to get them set up and working all together:
Here’s the lineup:
Before we dive in, we’ll set up our codebase. We’ll be writing a node.js TypeScript based app, and we’ll be taking advantage of the npm package manager to install our dependencies.
We’ll be targeting node.js version 10 and above. If you don’t have the correct version of node.js, use homebrew or head on over to the node.js download page to get it installed.
To follow along with this article, create a new npm based project as follows:
mkdir ts-prettier-example
cd ts-prettier-example
npm init -y
You should now have a folder named ts-prettier-example/ which contains a single file package.json.
Now that we have our codebase initialised, let’s begin to explore these tools in more depth.
Note: whilst this post assumes we’ll be building a node.js app, you can also apply these concepts to work with a browser-based app too. With the recent enhancements in TypeScript, it’s now possible (and preferred) to use TypeScript as a static type checker only, and output JavaScript which in turn is transpiled by Babel.
Much has been written about VSCode, an open source code editor from Microsoft. A relative newcomer to the code editor scene, VSCode has exploded in popularity amongst web developers, providing a similar interface to other much-loved development environments (Sublime Text, Atom) with a focus on common use cases (such as working with source control) in an open source package.
If you are a web developer and you haven’t yet tried VSCode, it’s worth spending some time to evaluate whether it will fit your needs. The official docs provide an excellent ‘Getting Started’ guide.
The instructions in the rest of this post assume that you are using VSCode as your editor.
TypeScript is a typed superset of JavaScript. It allows you to write JavaScript code with static types.
There are many benefits to this approach:
TypeScript is a very useful language to author code, but it must be compiled to plain JavaScript before the code can be run in the browser or on the server. As a result, TypeScript must be compiled to JavaScript before code can be run.
VSCode supports TypeScript out of the box, with no further configuration needed. We will however be installing our own version of TypeScript, to ensure that the other tools in this post work correctly.
In the terminal, make sure you are inside the ts-prettier-example repository, and run the command:
# Install TypeScript locally
npm install -D typescript
# Initialise a TypeScript config file
node_modules/.bin/tsc --init \
--target es2018 \
--module commonjs \
--sourceMap \
--rootDir src \
--outDir lib \
--strict \
--esModuleInterop \
--resolveJsonModule
After running these commands, you will have a new tsconfig.json file in your codebase, which is used by TypeScript when your code is compiled to plain JavaScript.
Here, we are setting the following configuration:
target: this controls the version of JavaScript that is emitted. node v10 has full support for ES2018 so we set this value to es2018.module: emits CommonJS modules, which are natively supported by node.sourceMap: emits source maps, which allows debuggers to map the resulting JavaScript file back to its TypeScript source counterpart.rootDir: defines the folder where the TypeScript source files will live.outDir: defines the folder where the resulting JavaScript files will be compiled to.strict: sets ‘strict mode’, ensuring that common gotchas with TypeScript are prevented.esModuleInterop: allows you to use standard ES6-style import/export in the code, which will be converted to CommonJS during compilation.resolveJsonModule: allows you to import json files as well as TypeScript ones.For more details see the official documentation.
Let’s test that the TypeScript config is working.
src/ and add a new file src/index.ts.index.ts:console.log("Hello, World");
node_modules/.bin/tsc
You should see a new folder lib/ generated, with two files: index.js and index.js.map.
Run the file with
node lib/index.js
and you should see Hello, World printed to the terminal.
By default, VSCode will use the version of TypeScript that it ships with. We can tell it to use the workspace-local version of TypeScript that we’ve just installed:
.vscode/ and add a file .vscode/settings.json.{
"typescript.tsdk": "./node_modules/typescript/lib"
}
index.ts file in VSCode. In the statusbar at the bottom of the screen, the TypeScript version number will be reported. Click on it, and ensure that the ‘Use Workspace Version’ option is checked (see here for more details).As TypeScript is a statically typed language, it is very good at catching errors in your code. There are some issues however that TypeScript itself cannot catch, such as ensuring your code conforms to best practices regarding readability and maintainability.
This is the gap that TSLint attempts to fill. TSLint is a linting tool for TypeScript - it analyses your code as you type for common readability and maintainability issues, and suggests areas for improvement.
To install and configure TSLint:
npm install -D tslint
tslint.json in the project root and add the following contents:{
"extends": [
"tslint:recommended"
],
"rules": {
"quotemark": [true, "single"]
}
}
The tslint configuration file will pick up any rules you set and use them to show potential issues in your code. A full list of rules can be found here - I like to enforce single quotes instead of double quotes, but if you prefer double quotes then you can safely remove the quotemark rule.
If you open up the file src/index.ts you should now see that VSCode is reporting three errors, all stemming from TSLint. These are:
console.log()" instead of single 'Let’s fix the first error - add a newline to the end of the file.
For the second error, TSLint is complaining that we are using console.log(), but in this case it is a valid use of the function. We are going to inform TSLint that this is correct by disabling the rule via a rule flag. In particular, we are going to use the // tslint:disable-next-line:rule1 form to disable the warning. Update your code to the following (making sure to preserve the newline at the end of the file):
// tslint:disable-next-line:no-console
console.log("Hello, World");
At this point, we should have one TSLint error, reporting the use of double quotes instead of single quotes. Instead of fixing this manually, we are going to delegate this to Prettier.
The next tool that we’ll be setting up is Prettier, a formatting tool which automatically rewrites your code to meet a specific coding style.
To install and configure Prettier:
npm install -D prettier
.prettierrc.json (note the leading .) in the root of your project and add the following contents:{
"singleQuote": true,
"trailingComma": "es5"
}
.vscode/settings.json{
"editor.formatOnSave": true,
"javascript.format.enable": false
}
To check that prettier is set up correctly, open the file src/index.ts and save the file. You should see that the double quote marks are converted to single quotes.
Now that we have prettier formatting our code automatically, we need to make TSLint aware of prettier, otherwise changes made by prettier may conflict with the TSLint rules. It would also be nice if any prettier warnings were surfaced as TSLint errors, so we can see them in our editor.
We can achieve this by installing two new packages:
npm install -D tslint-config-prettier # Makes TSLint accept any rules that prettier enforces
npm install -D tslint-plugin-prettier # Show prettier warnings as TSLint errors in the editor
Now that these packages are installed, make TSLint aware of them by changing the tslint.json configuration to the following:
{
"extends": [
"tslint:recommended",
"tslint-config-prettier",
"tslint-plugin-prettier"
],
"rules": {
"prettier": true,
"quotemark": [true, "single"]
}
}
These changes will ensure that prettier and TSLint play together nicely.
We’ve set up our editor with the following tools:
Enjoy the increased productivity and the feeling of automation that improves your daily life.