@timobechtel/style 1.12.0 → 1.14.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 +119 -45
- package/eslint/core.cjs +3 -0
- package/package.json +17 -16
package/README.md
CHANGED
|
@@ -4,16 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
Highly opinionated configuration files for typescript projects. Inspired by [@vercel/style-guide](https://github.com/vercel/style-guide)
|
|
6
6
|
|
|
7
|
+
> [!WARNING]
|
|
8
|
+
> Make sure to first commit your code before running the following commands. To allow you to easily revert the changes.
|
|
9
|
+
|
|
7
10
|
## Usage
|
|
8
11
|
|
|
9
12
|
```bash
|
|
10
|
-
npm i -D @timobechtel/style prettier "eslint@^8.57.
|
|
13
|
+
npm i -D @timobechtel/style prettier "eslint@^8.57.1" typescript
|
|
11
14
|
```
|
|
12
15
|
|
|
13
16
|
### Prettier
|
|
14
17
|
|
|
15
18
|
```bash
|
|
16
|
-
|
|
19
|
+
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc
|
|
17
20
|
```
|
|
18
21
|
|
|
19
22
|
<details>
|
|
@@ -21,11 +24,18 @@ echo '"@timobechtel/style/prettier/index.mjs"' > .prettierrc
|
|
|
21
24
|
|
|
22
25
|
Need to extend the config, e.g. adding plugins?
|
|
23
26
|
|
|
27
|
+
```bash
|
|
28
|
+
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc.mjs
|
|
29
|
+
```
|
|
30
|
+
|
|
24
31
|
Create a .prettierrc.mjs file and import the config, like this:
|
|
25
32
|
|
|
26
33
|
```js
|
|
27
34
|
import config from '@timobechtel/style/prettier/index.mjs';
|
|
28
|
-
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* @type {import("prettier").Config}
|
|
38
|
+
*/
|
|
29
39
|
export default {
|
|
30
40
|
...config,
|
|
31
41
|
// your config
|
|
@@ -34,79 +44,143 @@ echo '"@timobechtel/style/prettier/index.mjs"' > .prettierrc
|
|
|
34
44
|
|
|
35
45
|
</details>
|
|
36
46
|
|
|
47
|
+
### Typescript
|
|
37
48
|
|
|
49
|
+
#### Existing tsconfig
|
|
38
50
|
|
|
39
|
-
|
|
51
|
+
For existing projects or templates, I recomment leaving the config as-is and adding this preset to the extends array.
|
|
52
|
+
|
|
53
|
+
```json
|
|
54
|
+
{
|
|
55
|
+
"extends": ["@timobechtel/style/tsconfig/core"]
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### New tsconfig
|
|
40
60
|
|
|
41
61
|
```bash
|
|
42
|
-
|
|
62
|
+
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/core/tsconfig.json
|
|
43
63
|
```
|
|
44
64
|
|
|
65
|
+
#### Expo
|
|
66
|
+
|
|
67
|
+
With expo make sure to add `"moduleResolution": "bundler"` to the `compilerOptions`, otherwise certain routing types might break.
|
|
68
|
+
|
|
69
|
+
<details>
|
|
70
|
+
<summary>Example</summary>
|
|
71
|
+
|
|
72
|
+
Copy to `tsconfig.json`:
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"extends": ["expo/tsconfig.base", "@timobechtel/style/tsconfig/core"],
|
|
77
|
+
"compilerOptions": {
|
|
78
|
+
"moduleResolution": "bundler", // <-- this is important
|
|
79
|
+
"strict": true,
|
|
80
|
+
"paths": {
|
|
81
|
+
"@/*": [
|
|
82
|
+
"./*"
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
"include": [
|
|
87
|
+
"**/*.ts",
|
|
88
|
+
"**/*.tsx",
|
|
89
|
+
".expo/types/**/*.ts",
|
|
90
|
+
"expo-env.d.ts"
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
</details>
|
|
96
|
+
|
|
97
|
+
|
|
45
98
|
#### Or with React
|
|
46
99
|
|
|
47
100
|
```bash
|
|
48
|
-
|
|
101
|
+
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/react/tsconfig.json
|
|
49
102
|
```
|
|
50
103
|
|
|
104
|
+
<details>
|
|
105
|
+
<summary>Or manually</summary>
|
|
106
|
+
|
|
107
|
+
Copy to `tsconfig.json`:
|
|
108
|
+
|
|
109
|
+
```json
|
|
110
|
+
{
|
|
111
|
+
"extends": "@timobechtel/style/tsconfig/react"
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
</details>
|
|
116
|
+
|
|
51
117
|
### Eslint
|
|
52
118
|
|
|
53
119
|
```bash
|
|
54
|
-
|
|
120
|
+
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/core/.eslintrc.cjs
|
|
55
121
|
```
|
|
56
122
|
|
|
57
|
-
|
|
123
|
+
#### Fix Parsing errors for config files
|
|
58
124
|
|
|
59
|
-
|
|
60
|
-
const { resolve } = require('node:path');
|
|
125
|
+
You may get a `Parsing error: <FILE> was not found by the project service.` for config files like .eslintrc.cjs when not included in the tsconfig.
|
|
61
126
|
|
|
62
|
-
|
|
127
|
+
To fix, either add to tsconfig or add them to the eslint config:
|
|
63
128
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
extends: [require.resolve('@timobechtel/style/eslint/core.cjs')],
|
|
129
|
+
```diff
|
|
130
|
+
//...
|
|
67
131
|
parserOptions: {
|
|
68
|
-
|
|
132
|
+
+ projectService: {
|
|
133
|
+
+ allowDefaultProject: ['.eslintrc.cjs'],
|
|
134
|
+
+ },
|
|
135
|
+
//...
|
|
69
136
|
},
|
|
70
|
-
|
|
71
|
-
'import/resolver': {
|
|
72
|
-
typescript: {
|
|
73
|
-
project,
|
|
74
|
-
},
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
};
|
|
137
|
+
//...
|
|
78
138
|
```
|
|
79
139
|
|
|
80
|
-
#### React
|
|
81
140
|
|
|
82
|
-
|
|
141
|
+
<details>
|
|
142
|
+
<summary>Or manually</summary>
|
|
83
143
|
|
|
84
|
-
|
|
144
|
+
Copy the following to a `.eslintrc.cjs`:
|
|
85
145
|
|
|
86
|
-
```js
|
|
87
|
-
const { resolve } = require('node:path');
|
|
146
|
+
```js
|
|
147
|
+
const { resolve } = require('node:path');
|
|
88
148
|
|
|
89
|
-
const project = resolve(process.cwd(), 'tsconfig.json');
|
|
149
|
+
const project = resolve(process.cwd(), 'tsconfig.json');
|
|
90
150
|
|
|
91
|
-
module.exports = {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
typescript: {
|
|
103
|
-
project,
|
|
151
|
+
module.exports = {
|
|
152
|
+
root: true,
|
|
153
|
+
extends: [require.resolve('@timobechtel/style/eslint/core.cjs')],
|
|
154
|
+
parserOptions: {
|
|
155
|
+
tsconfigRootDir: process.cwd(),
|
|
156
|
+
},
|
|
157
|
+
settings: {
|
|
158
|
+
'import/resolver': {
|
|
159
|
+
typescript: {
|
|
160
|
+
project,
|
|
161
|
+
},
|
|
104
162
|
},
|
|
105
163
|
},
|
|
106
|
-
}
|
|
107
|
-
|
|
164
|
+
};
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
</details>
|
|
168
|
+
|
|
169
|
+
#### React
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/.eslintrc.cjs
|
|
108
173
|
```
|
|
109
174
|
|
|
175
|
+
<details>
|
|
176
|
+
<summary>Or manually</summary>
|
|
177
|
+
|
|
178
|
+
Also add `require.resolve('@timobechtel/style/eslint/react.cjs')` to the `extends` array.
|
|
179
|
+
|
|
180
|
+
Example config:
|
|
181
|
+
<https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/.eslintrc.cjs>
|
|
182
|
+
</details>
|
|
183
|
+
|
|
110
184
|
#### VSCode
|
|
111
185
|
|
|
112
186
|
Note: You should disable `source.organizeImports` in your VSCode config, as this collides with the `import/order` rule.
|
|
@@ -117,7 +191,7 @@ Add the following to your VSCode config, e.g. `.vscode/settings.json`
|
|
|
117
191
|
{
|
|
118
192
|
"editor.codeActionsOnSave": {
|
|
119
193
|
// use eslint import/order instead
|
|
120
|
-
"source.
|
|
194
|
+
"source.sortImports": "never"
|
|
121
195
|
}
|
|
122
196
|
}
|
|
123
197
|
```
|
package/eslint/core.cjs
CHANGED
|
@@ -7,10 +7,12 @@ module.exports = defineConfig({
|
|
|
7
7
|
'plugin:import/recommended',
|
|
8
8
|
'prettier',
|
|
9
9
|
'plugin:no-template-curly-in-string-fix/recommended',
|
|
10
|
+
'plugin:@timobechtel/rules/all',
|
|
10
11
|
require.resolve('./rules/base.cjs'),
|
|
11
12
|
require.resolve('./rules/import.cjs'),
|
|
12
13
|
require.resolve('./rules/unicorn.cjs'),
|
|
13
14
|
],
|
|
15
|
+
parser: '@typescript-eslint/parser',
|
|
14
16
|
plugins: [],
|
|
15
17
|
env: {
|
|
16
18
|
es2021: true,
|
|
@@ -30,6 +32,7 @@ module.exports = defineConfig({
|
|
|
30
32
|
parserOptions: {
|
|
31
33
|
ecmaVersion: 2021,
|
|
32
34
|
sourceType: 'module',
|
|
35
|
+
projectService: true,
|
|
33
36
|
},
|
|
34
37
|
overrides: [
|
|
35
38
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@timobechtel/style",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"bin",
|
|
@@ -10,29 +10,30 @@
|
|
|
10
10
|
"tsconfig"
|
|
11
11
|
],
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"eslint": "^8.57.
|
|
14
|
-
"prettier": "^3.
|
|
15
|
-
"semantic-release": "^24.
|
|
16
|
-
"typescript": "^5.
|
|
13
|
+
"eslint": "^8.57.1",
|
|
14
|
+
"prettier": "^3.4.2",
|
|
15
|
+
"semantic-release": "^24.2.1",
|
|
16
|
+
"typescript": "^5.7.2"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"eslint": "^8.57.
|
|
20
|
-
"prettier": "^3.
|
|
21
|
-
"semantic-release": "^24.
|
|
22
|
-
"typescript": "^5.
|
|
19
|
+
"eslint": "^8.57.1",
|
|
20
|
+
"prettier": "^3.4.2",
|
|
21
|
+
"semantic-release": "^24.2.1",
|
|
22
|
+
"typescript": "^5.7.2"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@semantic-release/changelog": "^6.0.3",
|
|
26
26
|
"@semantic-release/git": "^10.0.1",
|
|
27
|
-
"@
|
|
28
|
-
"@typescript-eslint/
|
|
27
|
+
"@timobechtel/eslint-plugin-rules": "^1.0.0",
|
|
28
|
+
"@typescript-eslint/eslint-plugin": "^8.19.1",
|
|
29
|
+
"@typescript-eslint/parser": "^8.19.1",
|
|
29
30
|
"eslint-config-prettier": "^9.1.0",
|
|
30
31
|
"eslint-define-config": "^2.1.0",
|
|
31
|
-
"eslint-import-resolver-typescript": "^3.
|
|
32
|
-
"eslint-plugin-import": "^2.
|
|
32
|
+
"eslint-import-resolver-typescript": "^3.7.0",
|
|
33
|
+
"eslint-plugin-import": "^2.31.0",
|
|
33
34
|
"eslint-plugin-no-template-curly-in-string-fix": "^1.0.4",
|
|
34
|
-
"eslint-plugin-react": "^7.
|
|
35
|
-
"eslint-plugin-react-hooks": "^
|
|
36
|
-
"eslint-plugin-unicorn": "^
|
|
35
|
+
"eslint-plugin-react": "^7.37.3",
|
|
36
|
+
"eslint-plugin-react-hooks": "^5.1.0",
|
|
37
|
+
"eslint-plugin-unicorn": "^56.0.1"
|
|
37
38
|
}
|
|
38
39
|
}
|