https://github.com/jellydn/eslint-config-productsway
Enhance your code quality with XO's ESLint config, further augmented with TypeScript and Prettier support.
https://github.com/jellydn/eslint-config-productsway
eslint-config prettier-eslint xojs
Last synced: 6 months ago
JSON representation
Enhance your code quality with XO's ESLint config, further augmented with TypeScript and Prettier support.
- Host: GitHub
- URL: https://github.com/jellydn/eslint-config-productsway
- Owner: jellydn
- License: mit
- Created: 2021-07-13T12:29:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-14T00:27:24.000Z (6 months ago)
- Last Synced: 2025-04-14T01:27:34.519Z (6 months ago)
- Topics: eslint-config, prettier-eslint, xojs
- Language: JavaScript
- Homepage: https://github.com/jellydn/eslint-config-productsway
- Size: 1.24 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# eslint-config-productsway 👋
[](https://www.npmjs.com/package/eslint-config-productsway)
[](#)
[](https://twitter.com/jellydn)
> Enhance your code quality with XO's ESLint config, further augmented with TypeScript and Prettier support.
[![IT Man - A Guide to Professional JavaScript & TypeScript Development [Vietnamese]](https://i.ytimg.com/vi/FTG0rTnhjV8/hqdefault.jpg)](https://www.youtube.com/watch?v=FTG0rTnhjV8)
## Installation
```sh
npx install-peerdeps --dev eslint-config-productsway
```
## Usage
Create a `.eslintrc.cjs` file at the root of your project's directory.
For TypeScript projects:
```js
module.exports = {
extends: ['productsway/typescript'],
};
```
For TypeScript and React projects:
```js
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:
```js
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:
```sh
npx eslint . --ext .js,.jsx,.ts,.tsx
```
For Vite React App, include .ts and .tsx extensions and report unused disable directives:
```sh
"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:
```json
{
"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](https://github.com/azat-io/eslint-plugin-perfectionist) for sorting various entities (imports, types, enums, JSX props, etc.)
- [ ] Extend support to Vue.js with [eslint-config-xo-vue](https://github.com/ChocPanda/eslint-config-xo-vue#use-with-xo).
## Tips
### Sorting Imports with Prettier Plugin
For consistent import ordering, utilize the [trivago/prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports#usage) plugin.
In your `.prettierrc.js` file:
```js
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](https://github.com/xojs/xo#configs)
- [prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.](https://github.com/prettier/eslint-config-prettier)
- [tsdoc/eslint-plugin](https://github.com/microsoft/tsdoc/tree/main/eslint-plugin)
- [ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggable JavaScript Linter](https://eslint.org/blog/2022/08/new-config-system-part-2/)
## Author
👤 **Huynh Duc Dung**
- Website: https://productsway.com/
- Twitter: [@jellydn](https://twitter.com/jellydn)
- Github: [@jellydn](https://github.com/jellydn)
## Show Your Support
If this project assists you, give it a ⭐️!