-
-
Save rabindranathfv/89c98c57c22338b41d9771d054ca21e7 to your computer and use it in GitHub Desktop.
Revisions
-
rabindranathfv revised this gist
Feb 7, 2023 . 1 changed file with 10 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -39,7 +39,7 @@ After adding the dev dependency, create a `ts.config.json` file under the root o "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "noUnusedLocals": false, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, @@ -215,7 +215,7 @@ A good pratcice is to lint before commit. `Husky` is a very popular plugin to ac Install lint-staged by ``` npm install lint-staged husky@4 -D ``` Install husky with npx like this @@ -249,6 +249,14 @@ Open your package.json file and add the code that I have specified at the same l Next time you commit, husky would exit the `git commit` when the code does not pass linting. IMPORTANT If you have troubles remenbers install husky as Dev dependency with v4 ``` npm install -D husky@4 ``` and try it again and you should see the magic ## The End There are so many more things you could do to your project to ensure productivity, consistency and coding styles, but I think this is a good start. This article will be subject to improvements to the latest changes and practices. -
Oct 2, 2022 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,4 @@ # How to Setup/Configure a Node.js project with Typescript, ESLint, Prettier and Husky  > Starting a personal node project could be easy; starting a team node project could be challenging. -
Oct 2, 2022 . No changes.There are no files selected for viewing
-
Oct 2, 2022 . 1 changed file with 104 additions and 33 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,7 @@ > Starting a personal node project could be easy; starting a team node project could be challenging. I Forked from https://gist.github.com/silver-xu/1dcceaa14c4f0253d9637d4811948437 and customize for myself. In my experience, common mistakes developer make when starting a projects are: @@ -12,42 +12,57 @@ In my experience, common mistakes developer make when starting a projects are: * Inconsistent code styling * Linter breaking the build In this article, I am going to not only to share how to address these above problems, but also some of the best practices. **The article assumes the reader knows the basics about nodes and typescripts** ## Typescript We can start off by a simple node project consisting only the package.json file (could be -D for DevDependencies it's depends on your neeeds) ```shell npm install typescript ``` After adding the dev dependency, create a `ts.config.json` file under the root of the node project ```json { "compileOnSave": true, "compilerOptions": { "target": "es2021", "module": "commonjs", "moduleResolution": "node", "outDir": "./build", "typeRoots": ["node_modules/@types"], "resolveJsonModule": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "skipLibCheck": true, }, "include": [ "src/**/*.ts", "test/*.*.ts"], "exclude": [ "node_modules", "src/logs", "src/tests" ] } ``` The above are the minimal settings of typescript compiler `tsc`. It tells the compiler to * use `es2021` syntax when generating the distributable * use the `commonjs` module format. * generate *.js to `/build` folder * generate source map * include all *.ts file inside `/src` folder * exclude all files inside `/node_modules` folder @@ -67,7 +82,7 @@ Adding the following line to package.json To build, run the following in shell ```shell npm run build ``` ## ESLint @@ -77,7 +92,7 @@ We have a handful choices of linting tools for node development, but the de-fact Again we are starting off by adding the dev dependencies ```shell npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser -D ``` ESLint does not support typescript out of the box. Fortunately we are able to add the typescript support by these two packages `@typescript-eslint/eslint-plugin` `@typescript-eslint/parser` thanks to the ESLint team's modular design. @@ -88,8 +103,22 @@ The next thing is to create a `.eslintrc` file. It does not have a file extensio { "parser": "@typescript-eslint/parser", "extends": ["plugin:@typescript-eslint/recommended"], "parserOptions": { "ecmaVersion": 2021, "sourceType": "module" }, // 0 = off, 1 = warn, 2 = error "rules": { "@typescript-eslint/explicit-member-accessibility": 0, "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/no-parameter-properties": 0, "@typescript-eslint/interface-name-prefix": 0, "@typescript-eslint/explicit-module-boundary-types": 0, "@typescript-eslint/no-explicit-any": 0, "@typescript-eslint/ban-types": 0, "@typescript-eslint/no-var-requires": 0, "@typescript-eslint/no-empty-function": 1 } } ``` @@ -113,21 +142,21 @@ Add the following lines in `package.json`: To lint, run the following in shell ```shell npm run lint ``` To format the code to comply with linting rules, run the following in shell ``` npm run format ``` ## Prettier Prettier drastically improves team consistency by automatically formatting the code. To enable prettier, we first install it by running: ```shell npm install prettier eslint-config-prettier eslint-plugin-prettier -D ``` Configure prettier by adding a `.prettierrc` to the root of the project with the following content @@ -152,27 +181,69 @@ The setting let Prettier to In Visual Studio Code, `Ctrl (CMD) + P` then select `Format Code`, or enable `Format on Save` in settings for best result. after that update your `.eslintrc` add prettier config add `prettier` and `plugin:prettier/recommended` on extends key, should be looks like this ```json { "parser": "@typescript-eslint/parser", "extends": ["prettier", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"], "parserOptions": { "ecmaVersion": 2021, "sourceType": "module" }, // 0 = off, 1 = warn, 2 = error "rules": { "@typescript-eslint/explicit-member-accessibility": 0, "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/no-parameter-properties": 0, "@typescript-eslint/interface-name-prefix": 0, "@typescript-eslint/explicit-module-boundary-types": 0, "@typescript-eslint/no-explicit-any": 0, "@typescript-eslint/ban-types": 0, "@typescript-eslint/no-var-requires": 0, "@typescript-eslint/no-empty-function": 1 } } ``` ## Husky No matter how careful I am, I always endup with situations where I changed and committed the code to Github without linting, and that can lead to failure CI builds. (YOU SHOULD HAVE SOME ESLINT + PRETTIER READY BEFORE THIS). A good pratcice is to lint before commit. `Husky` is a very popular plugin to achieve so. Install lint-staged by ``` npm install lint-staged -D ``` Install husky with npx like this ``` npx husky install ``` Now generate and config lint-staged ``` npx husky add .husky/pre-commit "npx --no-install lint-staged" ``` Make sure to commit the auto-generated husky folder to your Git repo. The above code will run lint-staged command against the staged files before committing. Make sure to run npx husky install if you clone your Husky configured git repo. So now let's add the lint-staged in our package.json file. Open your package.json file and add the code that I have specified at the same level as dependencies. You can configure some script for running unit or functional test if you want after commit or implement for push. ```json "lint-staged": { "*.{js,jsx,ts,tsx}": [ "npm run lint", "npm run unit-test" // example ] } ``` -
silver-xu revised this gist
Jan 12, 2020 . 1 changed file with 1 addition and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,9 +1,8 @@ # Setup a Node.js project with Typescript, ESLint, Prettier, Husky  > Starting a personal node project could be easy; starting a team node project could be challenging. I am a developer currently working in SEEK Australia. In my experience, common mistakes developer make when starting a projects are: -
Jan 12, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,4 @@ # Setup a Node.js project with Typescript, ESLint, Prettier, Husky > Starting a personal node project could be easy; starting a team node project could be challenging. -
Jan 12, 2020 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,5 @@ ## Setup a Node.js project with Typescript, ESLint, Prettier, Husky > Starting a personal node project could be easy; starting a team node project could be challenging.  -
Jan 12, 2020 . 1 changed file with 5 additions and 5 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -166,13 +166,13 @@ yarn add husky --save-dev Husky does not have its own configuration files. Instead we will add its config into package.json: ```json { "husky": { "hooks": { "pre-commit": "yarn lint" } } } ``` Next time you commit, husky would exit the `git commit` when the code does not pass linting. -
Jan 12, 2020 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -102,10 +102,10 @@ Add the following lines in `package.json`: ```json { "scripts": { "lint": "eslint src/**/*.ts", "format": "eslint src/**/*.ts --fix" } } ``` -
Jan 12, 2020 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -57,9 +57,9 @@ Adding the following line to package.json ```json { "scripts":{ "build": "tsc" } } ``` -
Jan 12, 2020 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,7 @@ > Starting a personal node project could be easy; starting a team node project could be challenging.  I am a developer currently working in SEEK Australia. In my experience, common mistakes developer make when starting a projects are: -
Jan 12, 2020 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Jan 12, 2020 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,183 @@ > Starting a personal node project could be easy; starting a team node project could be challenging. I am a developer currently working in SEEK Australia. In my experience, common mistakes developer make when starting a projects are: * No Linting * Lack of compile-time type checking (not really mistake but less desirable in my preference) * Inconsistent code styling * Linter breaking the build In this article, I am going to not only to share how to address these above problems, but also some of the best practices we implement in our team at SEEK. **The article assumes the reader knows the basics about nodes and typescripts** ## Typescript We can start off by a simple node project consisting only the package.json file ```shell yarn add typescript --dev ``` After adding the dev dependency, create a `ts.config.json` file under the root of the node project ```json { "compilerOptions": { "target": "es2018", "module": "commonjs", "outDir": "dist", "sourceMap": true, }, "include": ["src/**/*.ts"], "exclude": ["node_modules"], } ``` The above are the minimal settings of typescript compiler `tsc`. It tells the compiler to * use `es2018` syntax when generating the distributable * use the `commonjs` module format. * generate *.js to `/dist` folder * generate source map * include all *.ts file inside `/src` folder * exclude all files inside `/node_modules` folder **Fancy configuration of `ts.config.json` is beyond the scope of this article** Adding the following line to package.json ```json { "scripts":{ "build": "tsc" } } ``` To build, run the following in shell ```shell yarn build ``` ## ESLint We have a handful choices of linting tools for node development, but the de-factor standard these days for typescript is `ESLint`. Partnering with prettier it really improves consistency and productivity of a development team. Again we are starting off by adding the dev dependencies ```shell yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev ``` ESLint does not support typescript out of the box. Fortunately we are able to add the typescript support by these two packages `@typescript-eslint/eslint-plugin` `@typescript-eslint/parser` thanks to the ESLint team's modular design. The next thing is to create a `.eslintrc` file. It does not have a file extension but the default is `JSON` format: ```json { "parser": "@typescript-eslint/parser", "extends": ["plugin:@typescript-eslint/recommended"], "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" }, "rules": {} } ``` It tells the ESLint linter to: * use Typescript parser * use `Recommended Typescript preset` for linting * use `ES2018` and `module` sourceType to match ts.config settings Add the following lines in `package.json`: ```json { "scripts": { "lint": "eslint src/**/*.ts", "format": "eslint src/**/*.ts --fix" } } ``` To lint, run the following in shell ```shell yarn lint ``` To format the code to comply with linting rules, run the following in shell ``` yarn format ``` ## Prettier Prettier drastically improves team consistency by automatically formatting the code. To enable prettier, we first install it by running: ```shell yarn add prettier --dev ``` Configure prettier by adding a `.prettierrc` to the root of the project with the following content ```json { "semi": true, "trailingComma": "all", "singleQuote": true, "printWidth": 120, "tabWidth": 2 } ``` The setting let Prettier to * Ensure semi colon at the end of each statement * Ensure trailing comma at the end of each statement * Convert all double quotes to single quotes where applicable * Break into new lines for all lines greater than 120 characters wide * Ensure tab width is 2 characters In Visual Studio Code, `Ctrl (CMD) + P` then select `Format Code`, or enable `Format on Save` in settings for best result. ## Husky No matter how careful I am, I always endup with situations where I changed and committed the code to Github without linting, and that can lead to failure CI builds. A good pratcice is to lint before commit. `Husky` is a very popular plugin to achieve so. Install Husky by ``` yarn add husky --save-dev ``` Husky does not have its own configuration files. Instead we will add its config into package.json: ```json { "husky": { "hooks": { "pre-commit": "yarn lint" } } } ``` Next time you commit, husky would exit the `git commit` when the code does not pass linting. ## The End There are so many more things you could do to your project to ensure productivity, consistency and coding styles, but I think this is a good start. This article will be subject to improvements to the latest changes and practices. If you find this article useful please let me know.