@pvtnbr/eslint-config v1.3.0
This ESLint configuration was originally forked from Airbnb's ESLint config, taking inspiration from their comprehensive JavaScript style guide.
It's been enhanced with plugins, cutting edge tooling, and offers a comprehensive linting solution for a wide range of JavaScript ecosystems, including TypeScript, React, Vue.js, and Markdown code blocks.
Features
Streamlined syntax: Single quotes, semicolons, tabs, and arrow functions for a clear & intentional coding style.
Versatile language support: Tailored for TypeScript, React, Vue.js, and even Markdown code blocks, ensuring a wide range of applications.
Handy CLI command Comes with a quick and easy-to-use CLI command, which even supports
eslint.config.ts
.Extended plugin support: A rich set of plugins to lint ESlint comments, imports, JSON, YAML and more.
What does the linted code look like?
Checkout the code fixtures from the passing tests here.
Install
pnpm i -D @pvtnbr/eslint-config
lint
Command
This package includes a lint
CLI command as a direct alternative to eslint
, allowing you to lint your code with this config without any configuration or setup.
Lint files in the current directory
pnpm lint .
Apply auto fix
pnpm lint . --fix
Lint with caching enabled
pnpm lint --cache .
Lint only staged files
pnpm lint --staged .
Specify Node.js files
pnpm lint --node ./build .
Optional package.json
script
Adding it to package.json#scripts
gives you the convenience of not needing to pass in the current directory (.
) every time so you can simply run pnpm lint
instead. Also follows the best practice of documenting available commands in a central place.
"scripts": {
+ "lint": "lint .",
"build": "..."
"dev": "..."
}
Configuration
If you'd like to customize the linting rules further, you can add one of these ESLint config files to your project root and lint
will detect them automatically:
eslint.config.ts
: The typed version of the configuration file, ideal if you are working with TypeScript.eslint.config.js
: A standard JavaScript file for ESLint configuration, suitable for projects not using TypeScript.
!NOTE When creating your own ESLint config file, you must manually add the
pvtnbr
config. Read the section below to learn how.
--help
lint
by @pvtnbr/eslint-config
Usage:
lint [flags...] <files...>
Flags:
--cache Only check changed files
--cache-location <string> Path to the cache file or directory
--fix Automatically fix problems
-h, --help Show help
--ignore-pattern <string> Pattern of files to ignore
--node <string> Enable Node.js rules. Pass in a glob to specify files
--quiet Report errors only
--staged Only lint staged files within the files passed in
ESLint setup
To use the eslint
command, create a flat configuration file eslint.config.js
at your project root.
!TIP If you'd like to use TypeScript for your config file (
eslint.config.ts
), use thelint
command from the previous section. Theeslint
command only supportseslint.config.js
.
Simple config
If you want a simple setup with no customization, create the following eslint.config.js
:
Module:
export { default } from '@pvtnbr/eslint-config'
CommonJS:
module.exports = require('@pvtnbr/eslint-config')
Extended config
In eslint.config.js
:
Module:
// @ts-check
import { defineConfig, pvtnbr } from '@pvtnbr/eslint-config'
export default defineConfig([
{
// Don't lint these files
ignores: [
'tests/fixtures/**/*'
]
},
// Configure the pvtnbr config
...pvtnbr({
// Indicate Node.js project
node: true,
// Indicate Vue.js project (auto-detected by default)
vue: true
})
// Other configs...
])
CommonJS:
// @ts-check
const { defineConfig, pvtnbr } = require('@pvtnbr/eslint-config')
module.exports = defineConfig([
{
// Don't lint these files
ignores: [
'tests/fixtures/**/*'
]
},
// Configure the pvtnbr config
...pvtnbr({
// Indicate Node.js project or pass in file paths
node: true
})
// Other configs...
])
!TIP If you'd like to type check your
eslint.config.js
file, you can add// @ts-check
to the top.
Linting coverage
This ESLint config comprehensively supports a variety of languages and file types, ensuring coding standards and best practices across your project.
Language/File Type | Extensions |
---|---|
JavaScript | .js , .cjs , .mjs |
Node.js | .cjs , .mjs |
Service Workers | .sw.js , .sw.ts |
TypeScript | .ts , .cts , .mts , .d.ts |
Vue.js | .vue |
React | .jsx , .tsx |
JSON | .json , .json5 , .jsonc |
YML | .yml , .yaml |
Markdown | .md |
Integrated plugins
Each plugin in this ESLint configuration targets specific aspects of your code, ensuring quality and consistency.
Plugin | Focus area |
---|---|
eslint-comments | ESLint directive comments |
node | Node.js coding practices |
@typescript-eslint | TypeScript coding Practices |
@stylistic | JavaScript & TypeScript code style |
promise | Promises best practices |
regexp | Regular Expressions best practices |
import | ES6+ Import/Export |
jsonc | JSON, JSON5, and JSONC style |
yml | YAML style |
vue | Vue.js Templates & Scripts |
react | React best practices |
markdown | Markdown embedded code blocks |
no-use-extend-native | Native prototype extensions |
unicorn | Miscellaneous code quality rules |
Custom | Custom rules made for this config |
API
pvtbr(options)
The main config factory. It takes an object of options and returns a config object.
options.node
Type: boolean | string[]
Default: false
Whether to lint Node.js code. When true
, it will treat all files as Node.js files. You can also pass in an array of glob patterns to specify which files are Node.js files.
defineConfig(configs)
An identity function to enforce type checking on the config.
configs
Type: FlatConfig | FlatConfig[]
Other ESLint configs
Make sure you also check out these awesome ESLint configs. They are a constant source of inspiration for me, and are great alternatives to consider.
14 days ago
26 days ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
5 months ago
8 months ago
8 months ago
8 months ago
9 months ago
12 months 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
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
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
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
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
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
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