This repository combines all the best practises of Javascript & TypeScript with your desired configs which will make the development more easier. It's a monorepo managed by TurboRepo by Vercel.

♻️ Advanced JavaScript & TypeScript

Package	Documentation
📦 @codewithhridoy/eslint-config	Documentation
📦 @codewithhridoy/prettier-config	Documentation
📦 @codewithhridoy/tailwind-browser	Documentation

Legend: 📦: Package | 📝: Configuration file

---

📦 @codewithhridoy/eslint-config

📥 Installation

#If you use npm
npm install --save-dev @codewithhridoy/eslint-config

#If you use yarn
yarn add -D @codewithhridoy/eslint-config

#If you use pnpm (preferred)
pnpm add -D @codewithhridoy/eslint-config

🔩 Usage

// .eslintrc.js
module.exports = {
  extends: ['@codewithhridoy/eslint-config'],
};

⚙️ Rules overview

Rule	Style	Type	Documentation
linebreak-style	Unix	🚫 Error	Documentation
prettier/prettier	Warn	⚠️ Warning	External rule
quotes	Single	🚫 Error	Documentation
semi	Never	⚠️ Warning	Documentation
newline-before-return	Error	🚫 Error	Documentation
import/newline-after-import	-	🚫 Error	External rule
comma-dangle	Documentation	🚫 Error	Documentation
no-eval	Error	🚫 Error	Documentation
func-names	As-needed	🚫 Error	Documentation
camelcase	Documentation	⚠️ Warning	Documentation
no-unused-vars	Documentation	⚠️ Warning	Documentation
import/order	-	⚠️ Warning	External rule
prefer-arrow-callback	Error	🚫 Error	Documentation
block-spacing	Error	🚫 Error	Documentation
comma-spacing	Error	🚫 Error	Documentation
keyword-spacing	Error	🚫 Error	Documentation
space-infix-ops	Error	🚫 Error	Documentation
space-unary-ops	Error	🚫 Error	Documentation
brace-style	Error	🚫 Error	Documentation
object-curly-spacing	Always	🚫 Error	Documentation
space-before-function-paren	Documentation	🚫 Error	Documentation
space-in-parens	Never	🚫 Error	Documentation
array-bracket-spacing	Never	🚫 Error	Documentation
template-curly-spacing	Never	🚫 Error	Documentation
computed-property-spacing	Never	🚫 Error	Documentation
no-use-before-define	Documentation	🚫 Error	Documentation
no-label-var	Error	🚫 Error	Documentation
no-undef	Error	🚫 Error	Documentation
no-undefined	Off	💡 Disabled	Documentation
complexity	20	⚠️ Warning	Documentation
no-alert	Error	🚫 Error	Documentation
require-await	Off	💡 Disabled	Documentation
yoda	Error	🚫 Error	Documentation
no-empty	Error	🚫 Error	Documentation
no-extra-semi	Error	🚫 Error	Documentation
valid-typeof	Documentation	🚫 Error	Documentation
jsx-quotes	Prefer-double	💡 Disabled	Documentation
unicode-bom	Never	🚫 Error	Documentation
no-process-env	Off	💡 Disabled	Documentation
no-process-exit	Off	💡 Disabled	Documentation
global-require	Error	🚫 Error	Documentation

---

📦 @codewithhridoy/prettier-config

📥 Installation

#If you use npm
npm install --save-dev @codewithhridoy/prettier-config

#If you use yarn
yarn add -D @codewithhridoy/prettier-config

#If you use pnpm (preferred)
pnpm add -D @codewithhridoy/prettier-config

🔩 Usage

// .prettierrc.js
module.exports = {
  ...require('@codewithhridoy/prettier-config'),
};

// prettier-config.js
import prettierConfig from "@codewithhridoy/prettier-config";

export default {
  ...prettierConfig,
};

{
  "extends": "@codewithhridoy/prettier-config"
}

⚙️ Rules overview

Rule	Style	Documentation
arrowParens	always	Documentation
bracketSpacing	true	Documentation
embeddedLanguageFormatting	auto	Documentation
htmlWhitespaceSensitivity	css	Documentation
jsxSingleQuote	true	Documentation
printWidth	120	Documentation
proseWrap	preserve	Documentation
quoteProps	as-needed	Documentation
requirePragma	false	Documentation
semi	false	Documentation
singleQuote	true	Documentation
tabWidth	2	Documentation
trailingComma	es5	Documentation
useTabs	false	Documentation

TailwindCSS :browser

Tailwind browser helps you to develop efficiently for cross-browser platform

---

📥 Installation

Tailwind.css v3 or newer is required.

#If you use npm
npm install --save-dev @codewithhridoy/tailwind-browser

#If you use yarn
yarn add -D @codewithhridoy/tailwind-browser

#If you use pnpm (preferred)
pnpm add -D @codewithhridoy/tailwind-browser

📦 Usage

Add to plugins in your tailwind.config.js:

module.exports = {
 // ...
 plugins: [
  require("@codewithhridoy/tailwind-browser"),
  // ...other plugins.
 ],
};

Style your components using {browser_name}:{class}, e.g. firefox:bg-red-100, chrome:bg-blue-100, etc.

<div className="firefox:bg-red-400 chrome:bg-blue-400 bg-yellow-400">
 <p>On firefox background should be red, on chrome should be blue and on other browsers it should be yellow</p>
</div>

🔐 Supported browsers

Browser	Variant	CSS Property	Example
Firefox	firefox:	-moz-appearance: none	firefox:bg-yellow-400
Chrome	chrome:	background: -webkit-named-image(i)	chrome:bg-red-400
Safari	safari:	-webkit-app-region: inherit	safari:bg-blue-400

⁉️ Issues

If you have any issues with the page please create new issue here

📥 Pull Requests

When submitting a pull request:

• Clone the repo.
• Create a branch off of master and give it a meaningful name (e.g. my-awesome-new-feature).
• Open a pull request on GitHub and describe the feature or fix.

📋 License

This project is licensed under the MIT. See the LICENSE file for details