Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cuppachino/eslint-config
Lint TypeScript with ESLint, format with Prettier. Type-safe. Zero-conflict.
https://github.com/cuppachino/eslint-config
changesets eslint eslint-config eslint-prettier-config eslint-typescript format jsdoc lint prettier tsdoc typescript
Last synced: 12 days ago
JSON representation
Lint TypeScript with ESLint, format with Prettier. Type-safe. Zero-conflict.
- Host: GitHub
- URL: https://github.com/cuppachino/eslint-config
- Owner: cuppachino
- License: mit
- Created: 2023-03-03T03:42:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-09T10:21:11.000Z (6 months ago)
- Last Synced: 2024-10-12T18:32:23.334Z (27 days ago)
- Topics: changesets, eslint, eslint-config, eslint-prettier-config, eslint-typescript, format, jsdoc, lint, prettier, tsdoc, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@cuppachino/eslint-config
- Size: 108 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @cuppachino/eslint-config
[](https://github.com/cuppachino/eslint-config/actions/workflows/release.yml)
- [x] **Extendable**... fully customized [ESLint](https://eslint.org/) configuration
- [x] **Optimized**... for explosive [**TypeScript**](https://www.typescriptlang.org/) development
- [x] **Consistent**... comment doc formatting with [jsdoc](https://github.com/gajus/eslint-plugin-jsdoc) and [tsdoc](https://tsdoc.org/)
- [x] **Seamless**... integration with [Prettier](https://prettier.io/)
- [x] **Granular**... keep Prettier and ESLint separate without conflict
## Using this package in your project
### Install
```ps
pnpm add -D eslint @cuppachino/eslint-config
```
Create a `tsconfig.eslint.json` at the root of your project and extend your own `tsconfig.json`:
```jsonc
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": true
},
"include": [
"pkg/",
// "src/",
// "./vite.config.ts",
// "./apps/*/tsconfig.json"
],
}
```
### Configure
Create a `.eslintrc.cjs` file in the root of your project and extend the config:
> or `.eslintrc.js` or `.eslintrc.json`
```js
module.exports = {
/* 1️⃣ focus eslint to not look outside of your project */
root: true,
/* 2️⃣ extend your config with the package */
extends: ['@cuppachino/eslint-config'],
/* 3️⃣ point your own tsconfig(s) */
parserOptions: {
tsconfigRootDir: __dirname,
project: [
'./tsconfig.eslint.json', // REQUIRED
'./apps/*/tsconfig.json',
'./packages/*/tsconfig.json'
]
},
settings: {
'import/resolver': {
typescript: {
alwaysTryTypes: true,
project: [
'./tsconfig.eslint.json', // REQUIRED
'./apps/*/tsconfig.json',
'./packages/*/tsconfig.json'
]
}
}
},
/* ⭐ Override rules here */
rules: {
// ...
}
}
```
If you extend additional configs after `@cuppachino/eslint-config`, you may introduce conflicts between Prettier and ESLint. You can work around this by always including the config last ***OR*** by manually adding the `eslint-config-prettier` package to your project and adding `"prettier"` to the end of your `extends` array.
```js
// ❌ NOT OK
extends: [
'@cuppachino/eslint-config',
'plugin:react/recommended',
]
```
```js
// ✅ OK
extends: [
'plugin:react/recommended',
'@cuppachino/eslint-config',
]
```
```js
// ✅ OK
extends: [
'@cuppachino/eslint-config',
'plugin:react/recommended',
'prettier'
]
```
## IDE Integration
### TypeScript 
Make sure to use your workspace's version of TypeScript and your `tsconfig.json` for type checking!
### ESLint 
To highlight code **quality** errors in vscode, you can use [dbaeumer.vscode-eslint](https://github.com/Microsoft/vscode-eslint).
Add the following scripts to your package.json for usage in your pipeline:
```jsonc
{
"scripts": {
"lint:check": "eslint",
"lint": "eslint --fix"
}
}
```
### Prettier 
Follow the setup directions for [rvest.vs-code-prettier-eslint](https://github.com/idahogurl/vs-code-prettier-eslint). This will allow you to fix linting errors with eslint and format your code with prettier, on save, in one step.
These scripts can be used to format your entire project:
```jsonc
{
"scripts": {
"format": "prettier --check .",
"format:fix": "prettier --write ."
}
}
```
## Development Cycle
> If you have the previously mentioned extensions installed, you should be able to use them during development.
### Install Dependencies
This package is managed with [PNPM](https://pnpm.js.org/). To get started, run the following commands:
```ps
cd YOUR-eslint-config
pnpm install
```
### Change, Commit, Merge & Release & Publish
1. After you make changes and save, create a new changeset and follow the cli prompts:
```ps
cd YOUR-eslint-config
pnpm new
```
2. Push your changes to a new branch and open a PR.
3. Once your PR is merged, changesets will automatically create a new
release and publish it to NPM.