Personal Config
ESLint, Jest, TSconfig and Prettier rules for all of my personal projects. Feel free to use these conventions :-)
How it works
This repository contains set of ESLint, Jest, Typescript & Prettier configurations to be used in JavaScript and Typescript projects.
ESLint
For ESLint there are two set configurations to be used to:
- the base configuration, which defines the common ESLint rules, the ECMAScript version and the module system.
- the enhancers, which contain specific settings for different frameworks, like React or Vue.
By using one or more of these packages, you can enforce the desired code styles for each type of project.
For more information on how to use each package and their specific configurations, please read the package's README by following the links below. You may also check the examples listed in Typical Configs to see how the packages may be combined for the most common scenarios.
For more information on how to use each package and their specific configurations, please read the package's README by following the links below. You may also check the examples listed in Typical Configs to see how the packages may be combined for the most common scenarios.
Base config
The base config is published as @isfawwaz/eslint-config-base
, check out its README to know how to use it.
Enhancer configs
There are several enhancer packages, which are intended to be used in conjunction with the base configuration:
-
@isfawwaz/eslint-config-babel
- If you are going to use Babel to transpile source code. -
@isfawwaz/eslint-config-jest
- If you are going to use Jest to develop tests.
Jest
For Jest there are same with ESLint which have two set configurations to be used to, but unfortunely on current version only base configuration available.
Base config
The base config is published as @isfawwaz/jest-config-base
, check out its README to know how to use it.
Typescript Config
For Typescript config there are two set configuration to be used to:
- `@isfawwaz/tsconfig/react-library.json - If you want to detect accessibility issues on your library project which based on React.
- `@isfawwaz/tsconfig/nextjs.json - If you want to detect accessibility issues in web projects based on NextJS.
Prettier
For Prettier config file, that only one config that can be used. check it out README.md
to know how to use it.
Typical configs
Standard JavaScript project
{
"root": true,
"env": {
"browser": true
},
"extends": [
"@isfawwaz/eslint-config-base/esm",
"@isfawwaz/eslint-config-babel",
"@isfawwaz/eslint-config-jest"
]
}
node
environment as well.
Node.js project
{
"root": true,
"env": {
"node": true
},
"extends": ["@isfawwaz/eslint-config-base/cjs/es2019", "@isfawwaz/eslint-config-jest"]
}
es2019
version instead of the latest ECMAScript version because there's no Babel compilation and we are restricted to what the Node.js runtime supports. Please check node.green and select the most appropriate ECMAScript version based on the Node.js version you are targeting.
Extend prettier config
Note: This method only when you need to extend the configuration, import the file in a .prettierrc.js file and export the modifications, e.g:
// .prettierrc.js
module.exports = {
...require('@isfawwaz/prettier-config'),
singleQuote: false,
};
React library tsconfig
{
"extends": "@isfawwaz/tsconfig/react-library.json",
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Special Thanks
Thanks to @moxy/eslint-config for such amazing inspiration for me to create my version of config.