How to easily configure your Typescript project with Prettier and ESLint

Foto de Karolina Grabowska no Pexels

How to create the CLI?

{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "ES2020",
"lib": ["ES2020"],
"moduleResolution": "node",
"sourceMap": true,
"outDir": "./lib",
"baseUrl": "./",
"incremental": true
}
}
npm i --save-dev ts-node typescript
"main": "./lib/index.js",
"bin": {
"makin-cli": "./lib/index.js"
},

The CLI

npm i --save commander
program
.version('0.0.7')
.description('A CLI that scaffolds some quality gates in your app')
.option('-p, --prettier', prettierLintService.getPrettierDescription())
.option('-l, --lint', prettierLintService.getLintDescription())
.parse(process.argv);
  • -p: or --prettier which will configure Prettier to you
  • -l: or --lint which will configure Lint to you
if (!process.argv.slice(2).length) {
program.outputHelp();
} else {
console.info('Welcome back ;)');
const options = program.opts();
if (options.prettier) await prettierLintService.configPrettier();
if (options.lint) await prettierLintService.configLint();
}
➜  makin-cli git:(main) ✗ makin-cli 
[22:37:09] [info] _ _ _ _
_ __ ___ __ _ | | __ (_) _ __ ___ | | (_)
| '_ ` _ \ / _` | | |/ / | | | '_ \ _____ / __| | | | |
| | | | | | | (_| | | < | | | | | | |_____| | (__ | | | |
|_| |_| |_| \__,_| |_|\_\ |_| |_| |_| \___| |_| |_|

Usage: makin-cli [options]
A CLI that scaffolds some quality gates in your appOptions:
-V, --version output the version number
-p, --prettier add prettier to package.json, with a format script and a generic configuration file (.prettierrc)
-l, --lint add eslint to package.json, with a lint script and a generic configuration file (.eslintrc.js)
-h, --help display help for command
➜ makin-cli git:(main) ✗
➜  makin-cli git:(main) ✗ makin-cli -p -l
[22:38:01] [info] _ _ _ _
_ __ ___ __ _ | | __ (_) _ __ ___ | | (_)
| '_ ` _ \ / _` | | |/ / | | | '_ \ _____ / __| | | | |
| | | | | | | (_| | | < | | | | | | |_____| | (__ | | | |
|_| |_| |_| \__,_| |_|\_\ |_| |_| |_| \___| |_| |_|

[22:38:01] [info] Welcome back ;)
[22:38:01] [info] Configuring prettier...
[22:38:01] [info] Installing prettier
[22:38:02] [info] Adding .prettierrc
[22:38:02] [info] Adding format script to package.json
[22:38:02] [info] Configuring lint...
[22:38:02] [info] Installing eslint
[22:38:04] [info] Configuring .eslintrc
[22:38:04] [info] Adding lint script to package.json
➜ makin-cli git:(main) ✗
  • configPrettier: where I used a mix between child_process.exec function and fs.writeFileSync to create files. I also used a time saver package called npm-add-script which allowed me to add scripts to package.json dynamically. Last but still important, I also added a string with the representation of the prettier config file that I used to create the .prettierrc file. The code looks like:
console.info('Installing prettier');
await exec('npm i --save-dev prettier');
console.info('Adding .prettierrc');
await writeFileSync('.prettierrc', prettier);
console.info('Adding format script to package.json');
npmAddScript({ key: 'format', value: 'prettier --write "src/**/*.ts"', force: true });
  • configLint: the approach is the same as Prettier but with the follow ending:
console.info('Installing eslint');
await exec('npm i --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser');
console.info('Configuring .eslintrc');
await writeFileSync('.eslintrc.js', eslintrc);
console.info('Adding lint script to package.json');
npmAddScript({ key: 'lint', value: 'eslint "{src,apps,libs,test}/**/*.ts" --fix', force: true });
npm publish
Adding Prettier and ESLint in action!

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating a timezone conversion app with NUXT PWA

www.gmtnow.app

https://youtu.be/dT0qH-RMkoQ

Build Your Own Livestreaming App with Twilio Live

React vs Angular

I hate Redux Part 3: Data fetching and Server Side Render with GState

Build an Animated Page Indicator with Hooks in React

Understanding JavaScript: map, filter and reduce

Building a Pokemon web app with React Hooks and the Context API

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcos Henrique da Silva

Marcos Henrique da Silva

Software Engineer

More from Medium

Live Reload with Docker and React

Driving TypeScript Adoption With Automated Reports

Using Generators to create dummy data

[React] Unit Testing APIs with Mock Service Worker (MSW)