Installation

This section explains how to install and set up @mohammad_obed/config from scratch in any project.

1. Install the package

Run the following command in your project root:

npm i -D @mohammad_obed/config

This will add the package as a dev dependency.

---

2. Initial configuration

1. Make sure you have Prettier & ESLint extensions installed in VS Code.
2. Open the installed package inside node_modules/@mohammad_obed/config.
3. Copy the contents of vscode.settings.json into your project’s .vscode/settings.json file.
   • If .vscode folder does not exist in your project root, create it.
   • Make Sure/Add .vscode/ to .gitignore so it does not get pushed to your repo.

This file ensures consistent ESLint and Prettier behavior across projects.

---

note

After all the steps below, you should Ctrl+Shift+P → Developer: Reload Window or restart VS Code, so you make sure vs code and the extensions pick up the changes!

3. TypeScript configuration

Create a tsconfig.json in the root folder of your project:

{
  "extends": "@mohammad_obed/config/tsconfig.base",
  "include": ["src"]
  // You can add your own settings here...
}

• You must always have an include → this defines exactly which files TypeScript compiles (e.g. your src folder and entry files). src is an example for most typescript & react apps.
• You can optionally use exclude → to skip build artifacts, configs, or test folders that are inside the items included in the "includes". e.g. src/test.ts.

VS Code will read this configuration and apply the settings automatically.

Recommended

Always add these options for cleaner imports:

"compilerOptions": {
  "baseUrl": "src",
  "paths": {
    "@/*": ["*"]
  }
}

This allows importing like:

import { getRandomNumber } from "@/utils/number";

instead of long relative paths like ../../utils/number.

---

4. Prettier configuration

In your package.json, add:

"prettier": "@mohammad_obed/config/prettier.config"

Make sure you have the Prettier extension installed in VS Code.

---

5. ESLint configuration

In the root of your project, create a file eslint.config.ts with:

import config from "@mohammad_obed/config/eslint.config";
export default config;

VS Code will automatically pick it up. Works across TypeScript, React, and React Native.

---

Important Statement

This package does not configure explicit paths for TypeScript, ESLint, or Prettier at the package level.
Always define project-level paths (e.g., include, exclude, baseUrl, paths) in your app's tsconfig.json to avoid paths resolving to the package root.

Bad (will resolve inside node_modules):

"baseUrl": "./node_modules/@mohammad_obed/config/src"

Good (set in your project):

"compilerOptions": {
  "baseUrl": "src",
  "paths": { "@/*": ["*"] }
}

---

6. Troubleshooting

• If nothing works:
  Ctrl+Shift+P → Developer: Reload Window or restart VS Code.

• If TypeScript is not picking changes:
  Ctrl+Shift+P → TypeScript: Restart TS Server

• If ESLint is not updating:
  Ctrl+Shift+P → ESLint: Restart ESLint Server