For future me, Here you'll find the configs setup you need when you create a new React project

Config Files Manual.md

Configs Files

.editorconfig

This is a basic config which is required in all languages. It's the basic config for IDEs and Editors on how to handle formatting, etc.

Create .editorconfig file then change the following as you wish:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
# end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,jsx,ts,tsx}]
charset = utf-8
indent_style = space
indent_size = 2

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

[*.{json,yml}]
indent_style = space
indent_size = 2

Read more HERE

ESLint

Install ESLint:

npm init @eslint/config

or manually install these packages (with react and typescript linting):

npm install eslint-plugin-react@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest

then create a config file: .eslintrc.json

Note: for this step, you better use the default init method, or you should then visit each framework and see how to integrate its rules with ESLint, including React and Typescript.

If you're using React with Vite, you need to disable this rule:

	"rules": {
		...
		"react/react-in-jsx-scope": "off"
	}

Create ignore file: .eslintignore

node_modules
dist
dist-ssr
build
coverage

.*.cjs
.*.js
.*.ts

*.config.cjs
*.config.js
*.config.ts

*.min.*

Stylelint

Install Stylelint:

npm install --save-dev stylelint stylelint-config-standard

Create config file: .stylelintrc.json

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "rule-empty-line-before": null,
    "declaration-empty-line-before": null
  }
}

Note: if your gonna use *.module.css for imports, you maybe want to add this rule:

{
  ...
  "rules": {
    ...
    "selector-class-pattern": null,
  }
}

Create ignore file: .stylelintignore

node_modules
dist
dist-ssr
build
coverage

*.min.*

Read more HERE

Prettier

Install Prettier:

npm install --save-dev --save-exact prettier

Create .prettierrc.json config file:

{
  "printWidth": 80
}

Create .prettierignore file:

node_modules
dist
dist-ssr
build
coverage

*.min.*

Format Files with this command:

npx prettier --write .

ESLint Integration

Install Package:

npm install --save-dev eslint-config-prettier

Add prettier to .eslintrc.json:

{
  "extends": [
    ...,
    "prettier"
  ]
}

Stylelint Integration

Install Package:

npm install --save-dev stylelint-config-prettier

Add prettier to .stylelintrc.json:

{
  "extends": [
    ...,
    "stylelint-config-prettier"
  ]
}

Tailwind

Tailwind has config file, so there you go.

Install Tailwind:

npm install -D tailwindcss && npx tailwindcss init

Edit tailwindcss.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Edit the line below
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Insert this line at the beginning of main css file, usually index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Stylelint Integration

Edit .stylelintrc.json rules:

	"rules": {
		...
		"at-rule-no-unknown": [
			true,
			{
				"ignoreAtRules": [
					"tailwind",
					"apply",
					"variants",
					"responsive",
					"screen"
				]
			}
		],
		"declaration-block-trailing-semicolon": null,
		"no-descending-specificity": null
	}

Framework Integration

Go here to see all latest supported frameworks and guides.

Vite Integration

Install the following packages:

npm install -D postcss autoprefixer

Run:

npx tailwindcss init -p

Change tailwind.config.cjs content property to the following:

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],