
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
eslint-config-kit
Advanced tools
ESLint Config Kit is a collection of useful ESLint configs for much more convenient project developing.
It uses only the necessary rules to provide error checking and readability improving. Nothing extra included.
Configs divided into base
and technology-specific parts, which can be used in "modular" style.
It doesn't enforce any doubtful rules, like prefer-default-export
in airbnb
config.
It helps you to write a more readable code.
Any use of implicit language mechanic will be warned.
It's designed to be a conflict-free.
For example, @typescript/eslint:recommended
config does not resolve conflicts with import
plugin, but kit/typescript
does.
The main goal is to create a zero-override config, which can be used almost in any project.
Here is the example for TypeScript React project:
{
"extends": [
"kit/base",
"kit/packs/react-typescript"
]
}
Install ESLint Kit CLI:
npm i -g @eslint-kit/cli
Run it:
eslint-kit
Learn more on @eslint-kit/cli page.
Install the base dependencies:
npm i -D eslint eslint-config-kit eslint-plugin-import
Create .eslintrc
file in the root of your project.
Extend from base
config:
{
"extends": ["kit/base"]
}
(optional) Integrate ESLint into your IDE/editor here.
Note: Base config does not include any formatting rules. It is strongly recommended to use
prettier
config for this purposes. Just openPrettier
section right below.
This config just enables the prettier
plugin and adds prettier/prettier
rule.
Installation:
Install dependencies:
npm i -D prettier eslint-plugin-prettier
Extend from prettier
config:
{
"extends": [
"kit/base",
+ "kit/prettier"
]
}
Create .prettierrc
file in the root of your project add specify your formatting settings.
(optional) Use the recommended settings:
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"quoteProps": "consistent",
"trailingComma": "es5",
"endOfLine": "lf"
}
Installation:
Install dependencies:
npm i -D babel-eslint eslint-plugin-react eslint-plugin-react-hooks
Note: babel-eslint
requires babel/core@>=7.2.0
and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.
Extend from react
config and specify a parser:
{
+ "parser": "babel-eslint",
"extends": [
"kit/base",
+ "kit/react"
]
}
This config just enables the node
env, it doesn't add any rules.
Installation:
Extend from node
config:
{
"extends": [
"kit/base",
+ "kit/node"
]
}
Installation:
Install dependencies:
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
Extend from typescript
config and specify a parser:
{
+ "parser": "@typescript-eslint/parser",
"extends": [
"kit/base",
+ "kit/typescript"
]
}
Config packs are just shortcuts for the most used config combinations.
Includes:
react
typescript
Installation:
Install dependencies:
npm i -D eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
Extend from packs/react-typescript
config and specify a parser:
{
+ "parser": "@typescript-eslint/parser",
"extends": [
"kit/base",
+ "kit/packs/react-typescript"
]
}
Install ESLint plugin
Choose any option you like:
Fix on save.
Add the following to your VSCode settings.json
:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
Fix on keyboard shortcut.
Add the following to your VSCode keybindings.json
:
{
"key": "alt+f", // or any other keys
"command": "eslint.executeAutofix"
}
Install dependencies:
npm i -D eslint-import-resolver-alias
Update .eslintrc
with your aliases:
{
"settings": {
"import/resolver": {
"alias": {
"map": [
["@folder-alias", "./src"],
["@file-alias", "./src/App.js"]
],
"extensions": [".js", ".jsx", ".json"]
}
}
},
"rules": {
"import/order": [
"warn",
{
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index"
],
"pathGroups": [
{
"pattern": "@folder-alias/**",
"group": "internal",
"position": "before"
},
{
"pattern": "@file-alias",
"group": "internal",
"position": "before"
}
]
}
]
}
}
Install dependencies:
npm i -D eslint-import-resolver-typescript
Update .eslintrc
:
{
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
},
"rules": {
"import/order": [
"warn",
{
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index"
],
"pathGroups": [
{
"pattern": "@folder-alias/**",
"group": "internal",
"position": "before"
},
{
"pattern": "@file-alias",
"group": "internal",
"position": "before"
}
]
}
]
}
}
Note: See eslint-import-resolver-typescript README for the details.
You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser
.
You should specify your tsconfig location manually in parserOptions
:
{
"parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "project": "./tsconfig.json"
+ },
"extends": [
"kit/base",
"kit/typescript"
]
}
If it doesn't work, try to rename eslint config file to .eslintrc.js
and resolve tsconfig.json
path:
const path = require('path')
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: path.resolve(__dirname, './tsconfig.json') // or your tsconfig location
},
extends: [
'kit/base',
'kit/typescript'
]
}
FAQs
A collection of useful eslint configs
The npm package eslint-config-kit receives a total of 6 weekly downloads. As such, eslint-config-kit popularity was classified as not popular.
We found that eslint-config-kit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.