eslint-config-productsway v1.3.2
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
Author
š¤ Huynh Duc Dung
- Website: https://productsway.com/
- Twitter: @jellydn
- Github: @jellydn
Show Your Support
If this project assists you, give it a āļø!
2 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago