nirtamir2 / eslint-config-nirtamir2 Goto Github PK

Nir Tamir's ESLint config

License: MIT License

Shell 0.12% JavaScript 99.88%

eslint-config-nirtamir2's Introduction

eslint-config-nirtamir2

Installation

pnpm add -D eslint eslint-config-nirtamir2

Edit your package.json file

{
  "engines": {
    "node": ">=20.0.0"
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Edit your .eslintrc file (choose the configs you want)

module.exports = {
  root: true,
  extends: [
    "nirtamir2",
    "nirtamir2/recommended",
    "nirtamir2/typescript",
    "nirtamir2/react",
    "nirtamir2/query",
    "nirtamir2/solid",
    "nirtamir2/security",
    "nirtamir2/compat",
    "nirtamir2/jest",
    "nirtamir2/storybook",
    "nirtamir2/i18n",
    "nirtamir2/query",
    "nirtamir2/tailwindcss",
    "nirtamir2/astro",
    "nirtamir2/next", // should be after recommended react and typescript
  ],
};

Next.js

You may add

 overrides: [
    {
      // Frontend
      files: ["apps/next-app/**/*.{ts,tsx}"],
      extends: ["@nirtamir2/next"],
      settings: {
        next: {
          rootDir: "apps/next-app",
        },
      },
      parserOptions: {
        project: ["apps/next-app/tsconfig.json"],
      },
    },

Import resolution

If you have problems with the import resolution try

 root: true,
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ["**/tsconfig.json"],
  },
  settings: {
    "import/resolver": {
      typescript: {
        alwaysTryTypes: true,
        project: ["**/tsconfig.json"],
      },
    },
  },

Prettier

pnpm add -D prettier prettier-plugin-tailwindcss @trivago/prettier-plugin-sort-imports prettier-plugin-packagejson

Edit your .prettierrc.mjs file

export default {
  plugins: [
    "prettier-plugin-packagejson",
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss", // must come last
  ],
  // @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss#resolving-your-tailwind-configuration
  tailwindConfig: "./tailwind.config.ts",
  // @see https://github.com/trivago/prettier-plugin-sort-imports
  importOrder: [
    "^react$",
    "<THIRD_PARTY_MODULES>",
    // Internal modules
    "^@app/(.*)$",
    // TypeScript TSConfig path aliases
    "^@/(.*)$",
    // Relative imports
    "^[./]",
  ],
  importOrderSortSpecifiers: true,
  overrides: [
    {
      files: "*.svg",
      options: {
        parser: "html",
      },
    },
  ],
};

Husky

pnpm add -D husky lint-staged
npx husky-init && pnpm i

In .husky/pre-commit add

pnpm run type-check
npx lint-staged

Edit your package.json file

{
  "scripts": {
    "prepare": "husky install",
    "format": "prettier \"**/*\" --write --ignore-unknown",
    "lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\" \"**/locales/**/*.json\"",
    "type-check": "tsc --pretty --noEmit"
  },
  "lint-staged": {
    "*.{ts,tsx,md}": "eslint --cache --fix",
    "*.{ts,tsx,css,html,md}": "prettier --write"
  }
}

TypeScript

pnpm add -D @tsconfig/strictest

In tsconfig.json add to the top

"extends": "@tsconfig/strictest/tsconfig.json",

Release / Publish

Create release

changeset

Bump version

changeset version

Publish to pnpm

changeset publish

Notes

[!WARN] Maintaining When you upgrade deps - notice that you need to use the same Next.js versions numbers for dependencies in https://github.com/vercel/next.js/blob/v14.1.0/packages/eslint-config-next/package.json. If you want to upgrade eslint-config-next - you need to use the matching version numbers.

Note

You can run pnpm to test it, and connect it to existing repository by using

{
  "eslint-config-nirtamir2": "file:./eslint-config-nirtamir2-0.0.63.tgz"
}

eslint-config-nirtamir2's People

Contributors

Stargazers

Watchers

eslint-config-nirtamir2's Issues

Try prettier-plugin-jsdoc and add to docs

https://github.com/hosseinmd/prettier-plugin-jsdoc

storybook rules

.eslintrc

extends: ["plugin:storybook/recommended",
"plugin:storybook/csf-strict"
"plugin:storybook/addon-interactions"]

see https://github.com/storybookjs/eslint-plugin-storybook

ESLint sort imports

// This won't clash with import/order and will order imports inside the {}.
sort-imports: ["error", { ignoreDeclarationSort: true }],
"import/order": [
      "warn",
      {
        groups: [
          ["builtin", "external"],
          "internal",
          ["parent", "index", "sibling"],
        ],
        pathGroups: [
          // replace @projectName with your project name
          {
            pattern: "@projectName/**",
            group: "external",
            position: "after",
          },
          {
            pattern: "*.svg",
            patternOptions: {
              dot: true,
              nocomment: true,
              matchBase: true,
            },
            group: "sibling",
            position: "after",
          },
        ],
        pathGroupsExcludedImportTypes: ["builtin"],
        "newlines-between": "always",
        alphabetize: {
          order: "asc",
        },
      },
    ]

i18n-json rules

.eslintrc:

const path = require(['path'](https://nodejs.org/api/path.html));

module.exports = {
  root: true, // since this example folder is embedded into the project. just ignore this.
  extends: [
    'plugin:i18n-json/recommended'
  ],
  rules: {
    'i18n-json/valid-message-syntax': [2, {
      syntax: path.resolve('./custom-message-syntax')
    }]
  }
}

custom-message-syntax:

const validate = (message = '') => {
  if (!(message || '').trim()) {
    throw new SyntaxError('Message is Empty.');
  }
  if (typeof message !== 'string') {
    throw new TypeError('Message must be a String.');
  }
  if (
    (message.includes('{') || message.includes('}')) &&
    !/{{ ?(?:- |\w+?)(, ?)?\w+? ?}}/g.test(message)
  ) {
    throw new SyntaxError(
      'Interpolation error. See: https://www.i18next.com/misc/json-format',
    );
  }
  if (message.includes('$t(') && !/\$t\([\w]+:\w+(?:\.\w+)*\)/g.test(message)) {
    throw new SyntaxError(
      'Nesting error. See: https://www.i18next.com/misc/json-format',
    );
  }

As shown here

godaddy/eslint-plugin-i18n-json#40 (comment)