@szum-tech/eslint-config 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,96 +1,238 @@
1
1
  # @szum-tech/eslint-config
2
2
 
3
- > Github
4
- >
5
- > ![GitHub release (latest by date)](https://img.shields.io/github/v/release/JanSzewczyk/eslint-config-szum-tech) >
6
- > [![GitHub pull requests](https://img.shields.io/github/issues-pr/JanSzewczyk/eslint-config-szum-tech)](https://github.com/JanSzewczyk/eslint-config-szum-tech/pulls) >
7
- > [![GitHub issues](https://img.shields.io/github/issues/JanSzewczyk/eslint-config-szum-tech)](https://github.com/JanSzewczyk/eslint-config-szum-tech/issues) >
8
- > ![GitHub Repo stars](https://img.shields.io/github/stars/JanSzewczyk/eslint-config-szum-tech?style=social)
3
+ ![GitHub release (latest by date)](https://img.shields.io/github/v/release/JanSzewczyk/eslint-config)
4
+ [![GitHub pull requests](https://img.shields.io/github/issues-pr/JanSzewczyk/eslint-config)](https://github.com/JanSzewczyk/eslint-config/pulls)
5
+ [![GitHub issues](https://img.shields.io/github/issues/JanSzewczyk/eslint-config)](https://github.com/JanSzewczyk/eslint-config/issues)
6
+ ![GitHub Repo stars](https://img.shields.io/github/stars/JanSzewczyk/eslint-config?style=social)
9
7
 
10
- > Github Actions
11
- >
12
- > [![🚀 publish](https://github.com/JanSzewczyk/eslint-config-szum-tech/actions/workflows/publish.yml/badge.svg?branch=main)](https://github.com/JanSzewczyk/eslint-config-szum-tech/actions/workflows/publish.yml) >
13
- > [![test](https://github.com/JanSzewczyk/eslint-config-szum-tech/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/JanSzewczyk/eslint-config-szum-tech/actions/workflows/test.yml) >
14
- > [![CodeQL](https://github.com/JanSzewczyk/eslint-config-szum-tech/actions/workflows/codeql.yml/badge.svg?branch=main)](https://github.com/JanSzewczyk/eslint-config-szum-tech/actions/workflows/codeql.yml)
8
+ [![🚀 publish](https://github.com/JanSzewczyk/eslint-config/actions/workflows/publish.yml/badge.svg?branch=main)](https://github.com/JanSzewczyk/eslint-config/actions/workflows/publish.yml)
9
+ [![CodeQL 📈](https://github.com/JanSzewczyk/eslint-config/actions/workflows/codeql.yml/badge.svg)](https://github.com/JanSzewczyk/eslint-config/actions/workflows/codeql.yml)
15
10
 
16
- > NPM
17
- >
18
- > [![npm](https://img.shields.io/npm/v/@szum-tech/eslint-config-szum-tech)](https://www.npmjs.com/package/@szum-tech/eslint-config-szum-tech) >
19
- > ![npm](https://img.shields.io/npm/dm/@szum-tech/eslint-config-szum-tech)
11
+ [![npm](https://img.shields.io/npm/v/@szum-tech/eslint-config)](https://www.npmjs.com/package/@szum-tech/eslint-config)
12
+ ![npm](https://img.shields.io/npm/dm/@szum-tech/eslint-config)
20
13
 
21
- [![MIT License](https://img.shields.io/badge/license-MIT-red.svg?style=flat)](https://github.com/JanSzewczyk/eslint-config-szum-tech/blob/main/LICENSE)
14
+ [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
15
+ [![MIT License](https://img.shields.io/badge/license-MIT-red.svg?style=flat)](https://github.com/JanSzewczyk/eslint-config/blob/main/LICENSE)
22
16
 
23
- These are settings for ESLint working as
24
- [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html).
25
-
26
- ## What it does 🤔
17
+ ---
27
18
 
28
- This setup lints your JavaScript code based on practices. It supports [React](https://reactjs.org/) projects with
29
- typescript and uses plugins like:
19
+ A shared configuration is an NPM package that exports a configuration as an array. It's super convenient for anyone to
20
+ use, because the configuration dynamically adapts to the needs of the project.
21
+
22
+ ## 📚 Features
23
+
24
+ - [Opinionated code formatter with support for: JavaScript, Typescript, JSX, ...](https://eslint.org/)
25
+ - [Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names](https://www.npmjs.com/package/eslint-plugin-import)
26
+ - [Typescript support](https://typescript-eslint.io/packages/typescript-eslint/) - **only** if
27
+ [typescript](https://www.npmjs.com/package/typescript) is used in project
28
+ - [React](https://www.npmjs.com/package/eslint-plugin-react) &
29
+ [React Hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) specific linting rules - **only** if
30
+ [react](https://www.npmjs.com/package/react) is used in project
31
+ - [Tailwindcss](https://www.npmjs.com/package/eslint-plugin-tailwindcss) specific linting rules - **only** if
32
+ [tailwindcss](https://tailwindcss.com/) is used in project
33
+ - [Next.js](https://nextjs.org/docs/app/api-reference/config/eslint) specific linting rules - **only** if
34
+ [next](https://www.npmjs.com/package/next) is used in project
35
+ - [Tests](https://www.npmjs.com/package/eslint-plugin-testing-library) specific linting rules - **only** if
36
+ [@testing-library/dom](https://www.npmjs.com/package/@testing-library/dom) is used in project
37
+ - [Tests with jest-dom](https://www.npmjs.com/package/eslint-plugin-jest-dom) specific linting rules - **only** if
38
+ [@testing-library/jest-dom](https://www.npmjs.com/package/jest) is used in project
39
+ - [Vitest](https://www.npmjs.com/package/@vitest/eslint-plugin) specific linting rules - **only** if
40
+ [vitest](https://www.npmjs.com/package/vitest) is used in project
41
+ - [Playwright](https://www.npmjs.com/package/eslint-plugin-playwright) specific linting rules - **only** if
42
+ [@playwright/test](https://www.npmjs.com/package/@playwright/test) is used in project
43
+ - [Storybook](https://www.npmjs.com/package/eslint-plugin-storybook) specific linting rules - **only** if
44
+ [storybook](https://www.npmjs.com/package/storybook) is used in project
45
+
46
+ ## 📖 Table of Contents
47
+
48
+ <!-- TOC -->
49
+
50
+ - [@szum-tech/eslint-config](#szum-techeslint-config)
51
+ - [📚 Features](#-features)
52
+ - [📖 Table of Contents](#-table-of-contents)
53
+ - [🎯 Getting Started](#-getting-started)
54
+ - [⚙️ Installation](#-installation)
55
+ - [Configuration](#configuration)
56
+ - [💻 Scripts](#-scripts)
57
+ - [🚀 Minimal GitHub ESlint check workflow](#-minimal-github-eslint-check-workflow)
58
+ - [🛠️ Developer Info](#-developer-info)
59
+ - [Dependencies](#dependencies)
60
+ - [Changelog](#changelog)
61
+ - [📜 License](#-license)
62
+ <!-- TOC -->
63
+
64
+ ## 🎯 Getting Started
65
+
66
+ ### ⚙️ Installation
67
+
68
+ [@szum-tech/eslint-config](https://github.com/JanSzewczyk/eslint-config) is available as
69
+ [npm package](https://www.npmjs.com/package/@szum-tech/eslint-config).
70
+
71
+ ```shell
72
+ # NPM
73
+ npm install --save-dev eslint @szum-tech/eslint-config
74
+
75
+ # YARN
76
+ yarn add -D eslint @szum-tech/eslint-config
77
+
78
+ # PNPM
79
+ pnpm add --save-dev eslint @szum-tech/eslint-config
80
+
81
+ # BUN
82
+ bun add --dev eslint @szum-tech/eslint-config
83
+ ```
30
84
 
31
- ![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/JanSzewczyk/eslint-config-szum-tech/eslint-plugin-import)
85
+ ### Configuration
32
86
 
33
- ![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/JanSzewczyk/eslint-config-szum-tech/eslint-plugin-jest)
87
+ Basic information needed to understand, how to set up eslint configuration, you are able to find in
88
+ [Configuration Files](https://eslint.org/docs/latest/use/configure/configuration-files) documentation.
34
89
 
35
- ![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/JanSzewczyk/eslint-config-szum-tech/eslint-plugin-react)
90
+ A `@szum-tech/eslint-config` is an npm package that exports a configuration object or array.
36
91
 
37
- ![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/JanSzewczyk/eslint-config-szum-tech/eslint-plugin-react-hooks)
92
+ **`@szum-tech/eslint-config` could be set via either:**
38
93
 
39
- Check the [index.js](https://github.com/JanSzewczyk/eslint-config-szum-tech/blob/main/index.js) file to see what is
40
- included. Feel free to override the rules that make sense for you.
94
+ - A `eslint.config.(js|cjs|mjs)` file that exports an array
41
95
 
42
- ## Installing ⚙️
96
+ **The following examples show how to integrate configuration in project:**
43
97
 
44
- In your project folder, run:
98
+ - Via `eslint.config.mjs` file:
45
99
 
46
- ```
47
- npm i -D @szum-tech/eslint-config-szum-tech
48
- # or yarn install --dev @szum-tech/eslint-config-szum-tech
100
+ Once you use a predefined configuration, you can export the entire configuration.
49
101
 
50
- npx install-peerdeps --dev @szum-tech/eslint-config-szum-tech
102
+ ```js
103
+ export { default } from "@szum-tech/eslint-config";
51
104
  ```
52
105
 
53
- ## Usage
106
+ `@szum-tech/eslint-config` is flexible enough to allow for configuration extensions. You’ll need to use the spread
107
+ operator to insert those items into the configuration array.
54
108
 
55
- Once the `@szum-tech/eslint-config-szum-tech` package is installed, you can use it by specifying
56
- `@szum-tech/eslint-config-szum-tech` in the
57
- [extends](https://eslint.org/docs/user-guide/configuring/#extending-configuration-files) section of your
58
- [ESLint configuration](https://eslint.org/docs/user-guide/configuring/).
109
+ ```js
110
+ // eslint.config.js
111
+ import szumTechEslintConfig from "@szum-tech/eslint-config";
59
112
 
60
- ### Set configuration
113
+ export default [
114
+ ...szumTechEslintConfig,
61
115
 
62
- Use one of following way:
116
+ // your modifications
117
+ {
118
+ rules: {
119
+ "no-unused-vars": "warn"
120
+ }
121
+ }
122
+ ];
123
+ ```
63
124
 
64
- #### 1. Create (or update) a `.eslintrc.yml` file with the following content:
125
+ - Via `eslint.config.cjs` file:
65
126
 
66
- ```yaml
67
- extends:
68
- - "@szum-tech/eslint-config-szum-tech"
127
+ ```js
128
+ module.exports = require("@szum-tech/semantic-release-config/with-npm");
69
129
  ```
70
130
 
71
- #### 2. Or add to `package.json` file the following content:
131
+ OR, extends
72
132
 
73
- ```json
74
- {
75
- "eslintConfig": {
76
- "extends": ["@szum-tech/eslint-config-szum-tech"]
133
+ ```js
134
+ const szumTechEslintConfig = require("@szum-tech/semantic-release-config/with-npm");
135
+
136
+ module.exports = [
137
+ ...szumTechEslintConfig,
138
+
139
+ // your modifications
140
+ {
141
+ rules: {
142
+ "no-unused-vars": "warn"
143
+ }
77
144
  }
78
- }
145
+ ];
79
146
  ```
80
147
 
81
- ---
148
+ ## 💻 Scripts
82
149
 
83
- ### Add scripts to `package.json`
150
+ Suggested scripts you can add to `package.json` file:
84
151
 
85
152
  ```json
86
153
  {
87
154
  "scripts": {
88
- "lint": "eslint {**/*,*}.{js,ts,jsx,tsx}",
89
- "lint:fix": "eslint --fix {**/*,*}.{js,ts,jsx,tsx}"
155
+ "lint": "eslint .",
156
+ "lint:ci": "eslint . -o eslint-results.sarif -f @microsoft/eslint-formatter-sarif",
157
+ "lint:fix": "eslint . --fix",
158
+ "lint:inspect": "npx @eslint/config-inspector@latest"
90
159
  }
91
160
  }
92
161
  ```
93
162
 
94
- ## License
163
+ **Scripts description:**
164
+
165
+ - `lint`: Lints the code using ESLint
166
+ - `lint:ci`: Lints the code using ESLint for CI - uses a `@microsoft/eslint-formatter-sarif` output format for report
167
+ generation
168
+ - `lint:fix`: Automatically fixes linting errors
169
+ - `lint:inspect`: Launches a visual representation of the ESLint configuration file (check http://localhost:7777 in your
170
+ browser). Allows you to navigate through the rules, plugins, and language configurations that are enabled or disabled
171
+
172
+ ## 🚀 Minimal GitHub ESlint check workflow
173
+
174
+ Here are the minimal steps required to run an ESlint check. Creating or adding any content to a PR will trigger this
175
+ event. Not only will this action validate the code and return its results, but it will also add highlighted parts of the
176
+ code that have an error to the comments under the PR thanks to the `Upload Eslint results to GitHub` step, which uses
177
+ `github/codeql-action/upload-sarif`.
178
+
179
+ ```yaml
180
+ name: PR Checks ✅
181
+
182
+ on:
183
+ pull_request:
184
+
185
+ jobs:
186
+ lint:
187
+ name: ESlint ⬣
188
+ runs-on: ${{ matrix.os }}
189
+ strategy:
190
+ matrix:
191
+ node-version: [22.x]
192
+ os: [ubuntu-latest]
193
+ steps:
194
+ - name: Checkout code 📚
195
+ uses: actions/checkout@v4
196
+ - name: Set up Node 🟢
197
+ uses: actions/setup-node@v4
198
+ with:
199
+ node-version: ${{ matrix.node-version }}
200
+ cache: "npm"
201
+ - name: Install dependencies ⚙️
202
+ run: npm ci
203
+ - name: ESlint Check ⬣
204
+ run: npm run lint:ci
205
+ continue-on-error: true
206
+ - name: Upload ESlint results to GitHub
207
+ uses: github/codeql-action/upload-sarif@v3
208
+ with:
209
+ sarif_file: eslint-results.sarif
210
+ wait-for-processing: true
211
+ ```
212
+
213
+ ## 🛠️ Developer Info
214
+
215
+ ### Dependencies
216
+
217
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/@next/eslint-plugin-next)
218
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/@vitest/eslint-plugin)
219
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-import)
220
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-jest-dom)
221
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-playwright)
222
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-react)
223
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-react-hooks)
224
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-storybook)
225
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-tailwindcss)
226
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/eslint-plugin-testing-library)
227
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/globals)
228
+ ![NPM (prod) Dependency Version](https://img.shields.io/npm/dependency-version/%40szum-tech%2Feslint-config/typescript-eslint)
229
+
230
+ ## Changelog
231
+
232
+ The [changelog](https://github.com/JanSzewczyk/eslint-config/blob/main/CHANGELOG.md) is regularly updated to reflect
233
+ what's changed in each new release.
234
+
235
+ ## 📜 License
95
236
 
96
- MIT © Szum-Tech
237
+ This project is licensed under the terms of the
238
+ [MIT license](https://github.com/JanSzewczyk/eslint-config/blob/main/LICENSE).