Setup + Config Backend Environment For Coding

[bentran1vn]

No description provided.

[bentran1vn]

https://github.com/PiedTeam/UniqloCloneTraining-BE-Project

[ghost]

setup nodejs project environment

install nodejs + ts + eslint + prettier

Includes the following toolkits
eslint: Main Linter
prettier: Main code formatter
eslint-config-prettier: Configure ESLint to not conflict with Prettier
eslint-plugin-prettier: Use some additional prettier rules for eslint
@typescript-eslint/eslint-plugin: ESLint plugin provides rules for Typescript
@typescript-eslint/parser: Parser allows ESLint to check for Typescript errors
ts-node: Used to run TypeScript code directly without building
tsc-alias: Handle alias when building
tsconfig-paths: When setting import alias in a project using ts-node, we need to use tsconfig-paths so that it understands the paths and baseUrl in the tsconfig.json file
rimraf: Used to delete the dist folder before building
nodemon: Used to automatically restart the server when there is a change in the code

configure ts using tsconfig.json file

TypeScript Compiler Configuration:

module: Specifies the type of output module to be used, in this case CommonJS.
moduleResolution: Defines the module resolution strategy, here 'node'.
target: The destination of the output code is the ES version of JavaScript, here ES2020.
outDir: Path for output directory after build.
esModuleInterop: Enable feature to support importing CommonJS modules, here 'true'.
strict: Enable all strict type checking options.
skipLibCheck: Skip checking all .d.ts files.
baseUrl: Base path for relative imports.
paths: Defines relative paths and aliases for imports.

ts-node Configuration:

require: Use tsconfig-paths/register to handle aliases when running TypeScript code with ts-node.

Related Files and Folders:

files: Lists files used to define global styles for the project.
include: Paths for files that need to be included in the build process.

configure eslint using the .eslintrc file

Install ESLint Extensions: First, install the ESLint extension to your code editor.

Create .eslintrc File: Use the touch .eslintrc command to create a new file named .eslintrc.

.eslintrc File Contents:

• Define the .eslintrc file as the configuration file for ESLint.
• Use JSON to define settings and rules for ESLint.
• Define parser as @typescript-eslint/parser to support testing TypeScript code.
• Define plugins and extends to use extension rules and settings.
• Set up rules and settings for Prettier and TypeScript.
• Create .eslintignore File: Use the touch .eslintignore command to create a new file named .eslintignore.
• In the .eslintignore file, list the folders or files that you want ESLint to ignore when checking and fixing code formatting errors.

configure the prettier to automatically align the margins beautifully

• Install Prettier Extensions: Start by installing the Prettier extension to your code editor.

• Create .prettierrc File for Configuration:

• Use the touch .prettierrc command to create a new file named .prettierrc.

• In the .prettierrc file, configure Prettier by specifying rules such as arrowParens, semi, trailingComma, tabWidth, endOfLine, useTabs, singleQuote, printWidth, and jsxSingleQuote according to your wishes.

• Create a .prettierignore File to Remove Unwanted Aligned Folders/Workspaces:

• Use the touch .prettierignore command to create a new file named .prettierignore.

• In the .prettierignore file, list the folders or workspaces that you do not want Prettier to align, such as node_modules/ and dist/.

editor to standardize when coding

• Create .editorconfig File: set the size and indentation style of your code to 2 spaces.

add .gitignore

to avoid pushing unnecessary things to git

configure nodemon.json

Functions:

• File Tracking: Manage changes in files in the src folder.
• Sort Files By Extension: Monitor files with extensions .ts and .js to perform the following actions.
• Skip Files: Do not skip any files during monitoring.
• Run File Index: Execute the index.ts file in the src directory with the command npx ts-node.

configure package.json

• "dev": "npx nodemon", //used for code
• "build": "rimraf ./dist && tsc && tsc-alias",//code finished building the product
• "start": "node dist/index.js", //run the newly built code, must build first
• "lint": "eslint .", //check for errors
• "lint:fix": "eslint . --fix",//fix error
• "prettier": "prettier --check ."This command uses Prettier to check the syntax of files in the project without making any changes. It checks to see if there is any syntax that needs to be improved, and displays corresponding error or warning messages, but does not make changes to the files.
• "prettier:fix": "prettier --write .": This command also uses Prettier, but with the --write option, it automatically fixes syntax problems found in the source code file. Prettier will edit source files directly, improving their syntax according to configured rules. This helps keep the source code in your project syntactically consistent.