Skip to content
This repository has been archived by the owner on Jun 14, 2024. It is now read-only.

ugistelmokaitis/fusion

Repository files navigation

fusion

! _Linting rules for React apps.

Fusion Config: A seamless blend of pre-defined ESLint rulesets, encompassing essential aspects including:

Installation

  1. Install the package:
  • if you're using npm:
npm install --save-dev @ugistelmokaitis/fusion
npm install --save-dev \
eslint \
eslint-plugin-import \
prettier \
prettier-plugin-tailwindcss \
eslint-plugin-jsx-a11y \
eslint-plugin-react \
eslint-plugin-jest \
eslint-plugin-promise \
eslint-plugin-n \
@typescript-eslint/eslint-plugin \
eslint-plugin-react-hooks \
@typescript-eslint/parser \
typescript \
stylelint \
stylelint-prettier \
jest
  • if you're using yarn:
yarn add -D @ugistelmokaitis/fusion
yarn add -D \
eslint \
eslint-plugin-import \
prettier \
prettier-plugin-tailwindcss \
eslint-plugin-jsx-a11y \
eslint-plugin-react \
eslint-plugin-jest \
eslint-plugin-promise \
eslint-plugin-n \
@typescript-eslint/eslint-plugin \
eslint-plugin-react-hooks \
@typescript-eslint/parser \
typescript \
stylelint \
stylelint-prettier \
jest
  1. Install the VS Code extensions:
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension stylelint.vscode-stylelint
  1. Add the following fields to your package.json:
{
    "eslintConfig": {
        "extends": "./node_modules/@ugistelmokaitis/fusion/eslint.js",
        "parserOptions": {
            "project": "./tsconfig.json"
        }
    },
    "prettier": "@ugistelmokaitis/fusion/prettier",

    // optional: only if you use Stylelint otherwise omit this field
    "stylelint": {
        "extends": "@ugistelmokaitis/fusion/stylelint"
    }
}
  1. Remove any existing .eslintrc, stylelint.config.js and .prettierrc files from your project to avoid conflicts. As long as you have the fields above in your package.json, you don't need these files.

  2. Add folder .vscode to your project root and create the following .vscode/settings.json:

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.tabSize": 4,
    "editor.wordWrapColumn": 120,
    "prettier.tabWidth": 4,
    "prettier.printWidth": 120,
    "emmet.showExpandedAbbreviation": "never",
    "editor.codeActionsOnSave": {
        "source.fixAll.esbenp.prettier-vscode": "explicit",
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}