chore: make code formatting more accessible

Author: kripod

.babelrc.json

@@ -1,7 +1,7 @@
 {
-  "presets": [
-    "@babel/typescript",
-    "@babel/react",
-    ["@babel/env", { "targets": "defaults", "bugfixes": true, "loose": true }]
-  ]
+	"presets": [
+		"@babel/typescript",
+		"@babel/react",
+		["@babel/env", { "targets": "defaults", "bugfixes": true, "loose": true }]
+	]
 }

.editorconfig

@@ -1,12 +1,15 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.yml]
+indent_style = space
+
 [*.md]
 trim_trailing_whitespace = false

.eslintrc.json

@@ -1,24 +1,24 @@
 {
-  "root": true,
-  "env": { "browser": true },
-  "parserOptions": { "project": "./tsconfig.json" },
-  "extends": [
-    "airbnb-typescript",
-    "airbnb/hooks",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "prettier/@typescript-eslint",
-    "prettier/react"
-  ],
-  "plugins": ["simple-import-sort"],
+	"root": true,
+	"env": { "browser": true },
+	"parserOptions": { "project": "./tsconfig.json" },
+	"extends": [
+		"airbnb-typescript",
+		"airbnb/hooks",
+		"plugin:@typescript-eslint/recommended",
+		"prettier",
+		"prettier/@typescript-eslint",
+		"prettier/react"
+	],
+	"plugins": ["simple-import-sort"],
 
-  "rules": {
-    // Auto-sort imports
-    "sort-imports": "off",
-    "import/order": "off",
-    "simple-import-sort/sort": "error",
+	"rules": {
+		// Auto-sort imports
+		"sort-imports": "off",
+		"import/order": "off",
+		"simple-import-sort/sort": "error",
 
-    // Using a type system makes it safe enough to spread props
-    "react/jsx-props-no-spreading": "off"
-  }
+		// Using a type system makes it safe enough to spread props
+		"react/jsx-props-no-spreading": "off"
+	}
 }

.prettierrc.json

@@ -1,4 +1,13 @@
 {
-  "singleQuote": true,
-  "trailingComma": "all"
+	"useTabs": true,
+	"trailingComma": "all",
+	"overrides": [
+		{
+			"files": "*.md",
+			"options": {
+				"useTabs": false,
+				"trailingComma": "none"
+			}
+		}
+	]
 }

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "editorconfig.editorconfig",
-    "esbenp.prettier-vscode"
-  ]
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"editorconfig.editorconfig",
+		"esbenp.prettier-vscode"
+	]
 }

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
-  // Enable automatic file formatting and fixing
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
+	// Enable automatic file formatting and fixing
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnSave": true,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": true
+	}
 }

README.md

@@ -39,8 +39,8 @@ A `Heading` component can demonstrate the effectiveness of polymorphism:
 Custom components like the previous one may utilize the package as shown below.
 
 ```tsx
-import * as React from 'react';
-import { Box, PolymorphicComponentProps } from 'react-polymorphic-box';
+import * as React from "react";
+import { Box, PolymorphicComponentProps } from "react-polymorphic-box";
 
 // Component-specific props should be specified separately
 export interface HeadingOwnProps {
@@ -53,7 +53,7 @@ export type HeadingProps<
 > = PolymorphicComponentProps<E, HeadingOwnProps>;
 
 // An HTML tag or a different React component can be rendered by default
-const defaultElement = 'h2';
+const defaultElement = "h2";
 
 export function Heading<E extends React.ElementType = typeof defaultElement>({
   color,
@@ -70,16 +70,16 @@ export function Heading<E extends React.ElementType = typeof defaultElement>({
 Alternatively, you can also type your custom components by using the `PolymorphicComponent` type. This is especially handy when working with external libraries that already expose polymorphic components. Here's an example implementing the Heading component from above using [styled-components](https://styled-components.com):
 
 ```tsx
-import { PolymorphicComponent } from 'react-polymorphic-box';
-import styled from 'styled-components';
+import { PolymorphicComponent } from "react-polymorphic-box";
+import styled from "styled-components";
 
 // Component-specific props
 interface HeadingProps {
   color?: string;
 }
 
 // An HTML tag or a different React component can be rendered by default
-const defaultElement = 'h2';
+const defaultElement = "h2";
 
 const Heading: PolymorphicComponent<
   HeadingProps, // Merged with props from the underlying element type
@@ -94,13 +94,13 @@ const Heading: PolymorphicComponent<
 Library authors should consider encapsulating reusable components, [passing a ref](https://reactjs.org/docs/forwarding-refs.html) through each of them:
 
 ```tsx
-import * as React from 'react';
-import { Box } from 'react-polymorphic-box';
+import * as React from "react";
+import { Box } from "react-polymorphic-box";
 
 export const Heading = React.forwardRef(
   <E extends React.ElementType = typeof defaultElement>(
     { ref, color, style, ...restProps }: HeadingProps<E>,
-    innerRef: typeof ref,
+    innerRef: typeof ref
   ) => {
     return (
       <Box
@@ -110,8 +110,8 @@ export const Heading = React.forwardRef(
         {...restProps}
       />
     );
-  },
+  }
 ) as <E extends React.ElementType = typeof defaultElement>(
-  props: HeadingProps<E>,
+  props: HeadingProps<E>
 ) => JSX.Element;
 ```