eslint-config-productsway

eslint-config-productsway 👋

Enhance your code quality with XO's ESLint config, further augmented with TypeScript and Prettier support.

Installation

npx install-peerdeps --dev eslint-config-productsway

Usage

Create a .eslintrc.cjs file at the root of your project's directory.

For TypeScript projects:

module.exports = {
    extends: ['productsway/typescript'],
};

For TypeScript and React projects:

module.exports = {
    root: true,
    env: { browser: true, es2020: true },
    extends: ['productsway/react'],
    ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts'],
    parserOptions: {
        project: ['./tsconfig.json', './tsconfig.node.json'],
    },
    rules: {},
};

Configuring the ESLint TypeScript Parser

If your project uses TypeScript, ensure to configure the ESLint TypeScript parser by specifying your tsconfig.json files in the parserOptions.project array:

module.exports = {
    extends: ['productsway/typescript'], // or 'productsway/react' for TypeScript and React
    parserOptions: {
        project: ['./tsconfig.json', './tsconfig.node.json'], // include all your tsconfig.json files here
    },
};

Executing ESLint

From your project's root directory, execute:

npx eslint . --ext .js,.jsx,.ts,.tsx

For Vite React App, include .ts and .tsx extensions and report unused disable directives:

"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

Integration with Next.js

For Next.js projects, you can use the following configuration in your .eslintrc.json file:

{
    "extends": ["productsway/react", "plugin:@next/next/recommended"]
}

Please note: You need to install eslint-config-next to use the recommended ESLint configuration for Next.js.

Roadmap

• Add eslint-plugin-perfectionist for sorting various entities (imports, types, enums, JSX props, etc.)
• Extend support to Vue.js with eslint-config-xo-vue.

Tips

Sorting Imports with Prettier Plugin

For consistent import ordering, utilize the trivago/prettier-plugin-sort-imports plugin.

In your .prettierrc.js file:

module.exports = {
  ...
  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

Resources

• xojs/xo: ❤️ JavaScript/TypeScript linter (ESLint wrapper) with great defaults
• prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
• tsdoc/eslint-plugin
• ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggable JavaScript Linter

Author

👤 Huynh Duc Dung

• Website: https://productsway.com/
• Twitter: @jellydn
• Github: @jellydn

Show Your Support

If this project assists you, give it a ⭐️!