Skip to content

Commit 71edf06

Browse files
cwillisfcwillisf
authored
Merge pull request #228 from scratchfoundation/flatter
Flatter
2 parents 3abc78c + 152673f commit 71edf06

22 files changed

+3607
-528
lines changed

‎README.md

+86-113
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,43 @@ Install the config along with its peer dependencies, `eslint` and `prettier`:
1212
npm install -D eslint-config-scratch eslint@^9 prettier@^3
1313
```
1414

15-
Add `eslint.config.mjs` to your project root (pick the `export` line appropriate for your project):
15+
Add `eslint.config.mjs` to your project root.
16+
17+
For a TypeScript project, you can add `languageOptions` to enable type checking:
1618

1719
```js
1820
// myProjectRoot/eslint.config.mjs
19-
import { makeEslintConfig } from 'eslint-config-scratch'
21+
import { eslintConfigScratch } from 'eslint-config-scratch'
22+
23+
export default eslintConfigScratch.config(eslintConfigScratch.recommended, {
24+
languageOptions: {
25+
parserOptions: {
26+
projectService: true,
27+
tsconfigRootDir: import.meta.dirname,
28+
},
29+
},
30+
})
31+
```
2032

21-
// for a TypeScript project:
22-
export default makeEslintConfig({ globals: 'browser', tsconfigRootDir: import.meta.dirname })
33+
For a JavaScript project, it might look like this:
2334

24-
// for plain JavaScript:
25-
export default makeEslintConfig({ globals: 'browser' })
35+
```js
36+
// myProjectRoot/eslint.config.mjs
37+
import { eslintConfigScratch } from 'eslint-config-scratch'
38+
39+
export default eslintConfigScratch.recommended
2640
```
2741

42+
The function `eslintConfigScratch.config` is a re-export of the `config` function from `typescript-eslint`, and helps
43+
with merging and extending configurations.
44+
2845
Add `prettier.config.mjs` to your project root as well:
2946

3047
```js
3148
// myProjectRoot/prettier.config.mjs
32-
import { makePrettierConfig } from 'eslint-config-scratch'
49+
import { prettierConfigScratch } from 'eslint-config-scratch'
3350

34-
export default makePrettierConfig()
51+
export default prettierConfigScratch.recommended
3552
```
3653

3754
Finally, add scripts like these to your `package.json`:
@@ -45,134 +62,90 @@ Finally, add scripts like these to your `package.json`:
4562

4663
## Basic Configuration
4764

48-
The `makeEslintConfig` function takes options to adjust the ESLint configuration object for your project. Most
49-
projects should start with something like this:
50-
51-
```mjs
52-
// myProjectRoot/eslint.config.mjs
53-
import { makeEslintConfig } from 'eslint-config-scratch'
54-
55-
export default makeEslintConfig({
56-
// Optional: specify global variables available in your environment
57-
globals: 'browser',
58-
59-
// Optional: enables rules that use type info, some of which work in JS too
60-
tsconfigRootDir: import.meta.dirname,
61-
})
62-
```
63-
64-
If you have no `tsconfig.json` (or `jsconfig.json`) in your project, you can skip the `tsconfigRootDir` option. Rules
65-
that require type information will be disabled or replaced with less strict alternatives that work without type info.
66-
67-
### Globals
68-
69-
The `globals` property is optional. If present, it can take several forms:
70-
71-
- a string, interpreted as a key in the `globals` object exported by the `globals` package.
72-
- Examples: `'browser'`, `'node'`, `'es2021'`, `'jest'`, etc.
73-
- an object, set up as described in the "Specifying Globals" section of the [ESLint documentation](https://eslint.org/docs/latest/use/configure/language-options#using-configuration-files)
74-
- Example: `{ myGlobal: 'readonly', anotherGlobal: 'writable' }`
75-
- an array of zero or more of any mixture of the above
76-
77-
```mjs
78-
// myProjectRoot/eslint.config.mjs
79-
import { makeEslintConfig } from 'eslint-config-scratch'
80-
81-
export default makeEslintConfig({
82-
// Optional: enables rules that use type info, some of which work in JS too
83-
tsconfigRootDir: import.meta.dirname,
84-
85-
// Optional: specify global variables available in your environment
86-
// Warning: this is a very silly configuration
87-
globals: [
88-
'shared-node-browser',
89-
{
90-
fun: 'readonly',
91-
thing: false,
92-
},
93-
'es2021',
94-
{
95-
whyNot: 'writable',
96-
},
97-
],
98-
})
99-
```
100-
101-
### Further Customization
102-
103-
The return value of the `makeEslintConfig` function is a standard ESLint configuration array. This means you can
104-
customize your configuration further like this:
105-
106-
```mjs
107-
// myProjectRoot/eslint.config.mjs
108-
import { makeEslintConfig } from 'eslint-config-scratch'
109-
110-
export default [
111-
...makeEslintConfig({
112-
// Optional: enables rules that use type info, some of which work in JS too
113-
tsconfigRootDir: import.meta.dirname,
114-
115-
// Optional: specify global variables available in your environment
116-
globals: 'browser',
117-
}),
118-
// Add custom rules or overrides here
119-
{
120-
files: ['*.test.js'],
121-
rules: {
122-
'no-console': 'off', // Allow console logs in test files
123-
},
124-
},
125-
]
126-
```
65+
The `eslintConfigScratch.config` is a re-export of the `config` function from `typescript-eslint`. Full documentation
66+
is available here: <https://typescript-eslint.io/packages/typescript-eslint#config>.
12767

128-
All ESLint configuration options are available this way. You can use this to handle globals yourself if the simplified
129-
`globals` configuration from above doesn't meet your needs:
68+
The `config` function can be used to add or override rules, plugins, and other configuration options. For example:
13069

131-
```mjs
70+
```js
13271
// myProjectRoot/eslint.config.mjs
133-
import { makeEslintConfig } from 'eslint-config-scratch'
72+
import { eslintConfigScratch } from 'eslint-config-scratch'
73+
import { globalIgnores } from 'eslint/config'
13474
import globals from 'globals'
13575

136-
export default [
137-
...makeEslintConfig({
138-
// Optional: enables rules that use type info, some of which work in JS too
139-
tsconfigRootDir: import.meta.dirname,
140-
}),
76+
export default eslintConfigScratch.config(
77+
eslintConfigScratch.recommended,
14178
{
142-
files: ['src/main/**.js'],
143-
languageOptions: {
144-
globals: globals.node,
145-
},
146-
},
147-
{
148-
files: ['src/renderer/**.js'],
14979
languageOptions: {
15080
globals: {
151-
...globals.browser,
81+
...globals.node,
15282
MY_CUSTOM_GLOBAL: 'readonly',
15383
},
84+
parserOptions: {
85+
projectService: true,
86+
tsconfigRootDir: import.meta.dirname,
87+
},
15488
},
15589
},
156-
]
90+
// Ignore all files in the dist directory
91+
globalIgnores(['dist/**/*']),
92+
)
15793
```
15894

159-
Of course, another option would be to place a different `eslint.config.mjs` file in each subdirectory. If you have
160-
multiple `tsconfig.json` or `jsconfig.json` files in your project, it likely makes sense to have an
161-
`eslint.config.mjs` file beside each one.
95+
## Granular Configuration
96+
97+
The `eslintConfigScratch` object contains granular configurations as well:
98+
99+
- `recommendedTypeFree`: A configuration suitable for contexts without type information, such as a JavaScript project.
100+
- `recommendedTypeChecked`: A configuration suitable for contexts with type information, such as a TypeScript project.
101+
You must provide extra configuration to `parserOptions` to enable type checking. See here:
102+
<https://typescript-eslint.io/getting-started/typed-linting/>
103+
104+
The `recommended` configuration is a combination of the two, and should be suitable for most projects. Features
105+
requiring type information are enabled for TypeScript files, and features that don't require type information are
106+
enabled for all files.
162107

163108
## Legacy Styles
164109

165110
Scratch used very different styling rules in `eslint-config-scratch@^9` and below. If you need to use those rules, you
166-
can use the rule sets under `legacy/`:
111+
can use these legacy configurations:
167112

168-
- `eslint-config-scratch/legacy`: Legacy base configuration, not configured for any particular environment
169-
- `eslint-config-scratch/legacy/es6`: Legacy rules for targeting Scratch's supported web browsers
170-
- `eslint-config-scratch/legacy/node`: Legacy rules for targeting Node.js
171-
- `eslint-config-scratch/legacy/react`: Legacy rules for targeting Scratch's supported web browsers with React
113+
- `eslintConfigScratch.legacy.base`: Legacy base configuration, not configured for any particular environment
114+
- `eslintConfigScratch.legacy.es6`: Legacy rules for targeting Scratch's supported web browsers
115+
- `eslintConfigScratch.legacy.node`: Legacy rules for targeting Node.js
116+
- `eslintConfigScratch.legacy.react`: Legacy rules for targeting Scratch's supported web browsers with React
172117

173118
New projects should not use these rule sets. They may disappear in the future. Scratch did not use Prettier at this
174119
time, so there is no legacy Prettier configuration.
175120

121+
Legacy Scratch projects usually `extend` more than one of these at a time, and potentially a different set per
122+
subdirectory. To do that in this new flat configuration format:
123+
124+
```js
125+
// scratch-gui/eslint.config.mjs
126+
import { eslintConfigScratch } from 'eslint-config-scratch'
127+
import { globalIgnores } from 'eslint/config'
128+
import globals from 'globals'
129+
130+
export default eslintConfigScratch.config(
131+
eslintConfigScratch.legacy.base,
132+
eslintConfigScratch.legacy.es6,
133+
{
134+
files: ['src/**/*.js', 'src/**/*.jsx'],
135+
extends: [eslintConfigScratch.legacy.react],
136+
languageOptions: {
137+
globals: globals.browser,
138+
},
139+
rules: {
140+
// ...customized rules for `src/`...
141+
},
142+
// ...other settings for `src/`...
143+
},
144+
// ...settings for `test/`, etc...
145+
globalIgnores(['dist/**/*']),
146+
)
147+
```
148+
176149
## Committing
177150

178151
This project uses [semantic release](https://github.com/semantic-release/semantic-release)

‎eslint.config.mjs

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
import { makeEslintConfig } from './lib/index.mjs'
1+
import { globalIgnores } from 'eslint/config'
2+
import globals from 'globals'
3+
import { eslintConfigScratch } from './lib/index.mjs'
24

3-
/** @type {import('typescript-eslint').ConfigArray} */
4-
export default makeEslintConfig({ globals: 'node' })
5+
export default eslintConfigScratch.config(
6+
eslintConfigScratch.recommended,
7+
{
8+
languageOptions: {
9+
globals: globals.node,
10+
},
11+
},
12+
globalIgnores(['test/**/*.bad.*']),
13+
)

0 commit comments

Comments
 (0)