Just a small request, I have a npm package
A simple library that helps developers to make quick api responses from multiple responses.. Latest version: 1.0.8, last published: 2 years ago. Start using jx-response-generator in your project by running `npm i jx-response-generator`. There are no other projects in the npm registry using jx-response-generator.
This blog post provides a step-by-step guide to set up a React project using Vite, Husky, TypeScript, and ESLint. It explains the benefits of each tool and their role in ensuring a smooth and efficient development process. The post includes code snippets and screenshots to illustrate each step of the setup process, making it easy for readers to follow along. To get The full code go to https://github.com/pappijx/Vite-react-eslint-prettier-husky-setup Make sure you have Node.js installed on your machine. You can download it from the official website (https://nodejs.org/). 1. Generate Vite + Typescript App -> After this you will be asked to enter your project name -> Next you need to select the framework of your choice -> Next you need to add typescript to you project -> After this you will see the final config as -> To run the app we need to install dependencies, so just do -> After this you project directory and package.json looks like this 2. Setup eslint -> First we need to install eslint as dev dependency -> Now we need to add a basic config file for eslint, for that -> Just say y (yes) here and proceed. After this we need to select the way we want to use eslint -> I will select the second option for now, and we will use airbnb style guide for eslint afterwards. -> After this choose module type for your project, I will choose Javascript modules -> Next choose framework as react -> Next let the wizard know that we are using typescript -> Next select the platform where the will run, select browser and hit enter -> Now select the .eslintrc file extension, I will go with javascript format. -> Now the wizard will ask you for permission to install some dependencies, hit enter and proceed -> And last question is, which package manager are you using? I am using npm, you can choose your package manager. -> Hitting enter initiates deps installation. And your root directory will have .eslintrc.cjs file with some basic settings. -> Now your package.json and .eslintrc files will look something like below *There is an error in the * -> Now we need to setup a eslint style guide in our project, I am using airbnb() as the base style. So we run below command to get all the dependencies required by eslint airbnb style guide. -> Insert y and hit enter. Now your devDependencies looks like below. -> Just add "airbnb", "airbnb/hooks" in your .eslintrc files extends key. Now your .eslintrc files looks like below -> we need to add typescript support for eslint-airbnb -> After this add 'airbnb-typescript' to your .eslintrc extends array. -> After this we need to add project: './tsconfig.json' to out .eslintrc parserOptions. -> You have a different error at top line in .eslintrc file as shown below. -> This is because our .eslintrc file is not looked up by tsconfig file. So we need to add this in tsconfig.json, like below -> After this open any tsx file, you will see blood all over the screen. This is because we are following airbnb guide for javascript. Let open app.tsx file and remove all not so important code. So now the file looks like below with an error. The error says This error occurs because airbnb style guide forces us to import React from 'react' as in old react this was a requirement, but in new versions of react we don't need this. To escape this rule we will add exception in .eslintrc file in rules array. Thats it for eslintrc file. 3. Add Prettier -> We need prettier to format our code properly so that it it more readable and so everyone use similar code formatting -> So now just install all prettier dependencies -> Now create .prettierrc.cjs file in root directory Thats all for prettier!!! 4. Add husky to project -> To install husky just do and then just add the below lines to your package.json. Keep in mind to add eslint after prettier else it both will conflict and husky generates error
jx-response-generator - npm
<div class="color-secondary fs-s flex items-center">
<img
alt="favicon"
class="c-embed__favicon m-0 mr-2 radius-0"
src="https://static-production.npmjs.com/b0f1a8318363185cc2ea6a40ac23eeb2.png"
loading="lazy" />
npmjs.com
</div>
</div>
you guys can try it, it will help you convert your complex api responses to single output. Thank you
What we will learn
Prerequisites
Setup Guide
terminal> npm create vite@latest
? Project name: » test-project
-> Select react here
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript
JavaScript + SWC
TypeScript + SWC
terminal> npm create vite@latest
√ Project name: ... test-project
√ Select a framework: » React
√ Select a variant: » TypeScript
Scaffolding project in D:\Work\Blogs\test-project...
Done. Now run:
cd test-project
npm install
npm run dev
terminal> npm i
terminal> npm i -D eslint
terminal> npx eslint --init
// this generates
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
@eslint/create-config
Ok to proceed? (y)
? How would you like to use ESLint? ...
To check syntax only
> To check syntax and find problems
To check syntax, find problems, and enforce code style
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? ...
> React
Vue.js
None of these
? Does your project use TypeScript? » No / Yes
// select yes and hit enter
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
Node
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes
? Which package manager do you want to use? ...
> npm
yarn
pnpm
This helps a developer to write proper and clean code.
terminal> npx install-peerdeps --dev eslint-config-airbnb
Need to install the following packages:
install-peerdeps
Ok to proceed? (y) y
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"@vitejs/plugin-react": "^3.1.0",
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"typescript": "^4.9.3",
"vite": "^4.2.0"
}
terminal> npm install eslint-config-airbnb-typescript
'React' must be in scope when using JSXeslint
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
],
overrides: [],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json',
},
plugins: ['react', '@typescript-eslint'],
rules: {
'react/react-in-jsx-scope': 0,
},
};
terminal> npm i -D prettier eslint-config-prettier eslint-plugin-prettier
module.exports = {
trailingComma: "es5",
tabWidth: 2,
semi: true,
singleQuote: true,
};
-> Now, this is the easiest thing to do but the most important. Using husky you make your team follow the guidelines specified by you and that makes code cleaner and helps make good coding implementations.
npx mrm@2 lint-staged
npm i
"lint-staged": {
"*.{js,css,ts,tsx,jsx}": [
"prettier --write", "eslint --fix"]
}
Thats it, You now have a well structured project with prettier, eslint, husky and vite.
Just a small request, I have a npm package
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (3)
Very helpful! Thanks for the guide.
Thank you @sparshmalhotra means a lot.
Awesome. Thanks for this. Straight to the point and easy to follow.