@oskartdragon/config v0.1.3
Install
npm install @oskar-dragon/config
!WARNING To be able to install this package in your project, please make sure you have: 1. Generated your Personal Access Token for GitHub. 2. Authenticated on the command line using your Personal Access Token.
From the permissions select at least read:packages
These steps are necessary to install and work packages.
Prettier
The easiest way to use this config is in your package.json
:
"prettier": "@oskar-dragon/config/prettier"
If you want to customise things, you should probably just copy/paste the built-in config. But if you really want, you can override it using regular JavaScript.
Create a .prettierrc.js
file in your project root with the following content:
import defaultConfig from '@oskar-dragon/config/prettier'
/** @type {import("prettier").Options} */
export default {
...defaultConfig,
// .. your overrides here...
}
TypeScript
Create a tsconfig.json
file in your project root with the following content:
{
"extends": "@oskar-dragon/config/bundler/no-dom/app",
"include": [
"**/*.ts",
"**/*.tsx",
"**/*.js",
"**/*.jsx"
],
// If you use absolute paths, you have to add the below
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
If you want to Learn more from the TypeScript docs here.
List of TSConfigs
As you probably know, there's no single tsconfig.json
configuration that works for everything. Most of the time, you're probably using an external bundler like esbuild
, tsup
or Vite
. If so, use this selection of configs:
{
// My code runs in the DOM:
"extends": "@oskar-dragon/config/tsconfig/bundler/dom/app", // For an app
"extends": "@oskar-dragon/config/tsconfig/bundler/dom/library", // For a library
// My code _doesn't_ run in the DOM (for instance, in Node.js):
"extends": "@oskar-dragon/config/tsconfig/bundler/no-dom/app", // For an app
"extends": "@oskar-dragon/config/tsconfig/bundler/no-dom/library", // For a library
}
jsx
If your app has JSX, you can set the jsx
option in your tsconfig.json
:
{
"extends": "@oskar-dragon/config/tsconfig/bundler/dom/app",
"compilerOptions": {
"jsx": "react-jsx"
}
}
ESLint
Create a eslint.config.js
file in your project root with the following
content:
import { config as defaultConfig } from '@eoskar-dragon/config/eslint'
/** @type {import("eslint").Linter.Config} */
export default [...defaultConfig]
If you want to customise your config, earn more from the Eslint docs here.