https://github.com/timobechtel/style
Highly opinionated config files (Prettier, ESLint, TSConfig)
https://github.com/timobechtel/style
Last synced: about 1 year ago
JSON representation
Highly opinionated config files (Prettier, ESLint, TSConfig)
- Host: GitHub
- URL: https://github.com/timobechtel/style
- Owner: TimoBechtel
- Created: 2023-11-09T15:48:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-08T16:05:09.000Z (over 1 year ago)
- Last Synced: 2025-02-11T07:34:48.152Z (over 1 year ago)
- Language: JavaScript
- Size: 414 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Style 🛼
> Roll in style.
Highly opinionated configuration files for typescript projects. Inspired by [@vercel/style-guide](https://github.com/vercel/style-guide)
> [!WARNING]
> Make sure to first commit your code before running the following commands. To allow you to easily revert the changes.
## Usage
```bash
npm i -D @timobechtel/style prettier "eslint@^8.57.1" typescript
```
### Prettier
```bash
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc
```
Extend / customize config
Need to extend the config, e.g. adding plugins?
```bash
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc.mjs
```
Create a .prettierrc.mjs file and import the config, like this:
```js
import config from '@timobechtel/style/prettier/index.mjs';
/**
* @type {import("prettier").Config}
*/
export default {
...config,
// your config
}
```
### Typescript
```bash
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/core/tsconfig.json
```
Or manually
Copy to `tsconfig.json`:
```json
{
"extends": "@timobechtel/style/tsconfig/core"
}
```
#### Or with React
```bash
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/react/tsconfig.json
```
Or manually
Copy to `tsconfig.json`:
```json
{
"extends": "@timobechtel/style/tsconfig/react"
}
```
### Eslint
```bash
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/core/.eslintrc.cjs
```
#### Fix Parsing errors for config files
You may get a `Parsing error: was not found by the project service.` for config files like .eslintrc.cjs when not included in the tsconfig.
To fix, either add to tsconfig or add them to the eslint config:
```diff
//...
parserOptions: {
+ projectService: {
+ allowDefaultProject: ['.eslintrc.cjs'],
+ },
//...
},
//...
```
Or manually
Copy the following to a `.eslintrc.cjs`:
```js
const { resolve } = require('node:path');
const project = resolve(process.cwd(), 'tsconfig.json');
module.exports = {
root: true,
extends: [require.resolve('@timobechtel/style/eslint/core.cjs')],
parserOptions: {
tsconfigRootDir: process.cwd(),
},
settings: {
'import/resolver': {
typescript: {
project,
},
},
},
};
```
#### React
```bash
curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/.eslintrc.cjs
```
Or manually
Also add `require.resolve('@timobechtel/style/eslint/react.cjs')` to the `extends` array.
Example config:
#### VSCode
Note: You should disable `source.organizeImports` in your VSCode config, as this collides with the `import/order` rule.
Add the following to your VSCode config, e.g. `.vscode/settings.json`
```json
{
"editor.codeActionsOnSave": {
// use eslint import/order instead
"source.sortImports": "never"
}
}
```
### semantic-release
This repo also contains a [semantic-release](https://github.com/semantic-release/semantic-release) configuration.
```bash
npm i -D semantic-release
```
```bash
echo '{ "extends": "@timobechtel/style/semantic-release/index.cjs" }' > .releaserc.json
```