diff --git a/README.md b/README.md index b0417e25..dc31184a 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,8 @@ - [Section 4: Misc. Concerns](#section-4--misc-concerns) * [Component/Design System Development](#component-design-system-development) * [Building](#building) - * [Prettier + TSLint](#prettier---tslint) + * [Prettier + TSLint](#prettier--tslint) + * [ESLint + TSLint](#eslint--tslint) * [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-) - [Troubleshooting Handbook: Types](#troubleshooting-handbook--types) * [Union types](#union-types) @@ -437,7 +438,131 @@ For developing with Storybook, read the docs I maintain over here: + + + tslint.json + + + .prettierrc + + + + +

+{
+  "rulesDirectory": ["tslint-plugin-prettier"],
+  "extends": [
+    "tslint:recommended",
+    "tslint-config-prettier"
+  ],
+  "linterOptions": {
+    "exclude": ["node_modules/**/*.ts"]
+  },
+  "rules": {
+    "prettier": true
+  }
+}
+

+ + +

+{
+  "printWidth": 89,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}
+

+ + + + +An example github repository with a project showing how to integrate [prettier + tslint + create-react-app-ts](https://github.com/azdanov/tslint-eslint-crats). + +## ESLint + TSLint + +Why? ESLint ecosystem is rich, with lots of different plugins and config files, whereas TSLint tend to lag behind in some areas. + +To remedy this nuisance there is an [`eslint-typescript-parser`](https://github.com/eslint/typescript-eslint-parser) which tries to bridge the differences between javascript and typescript. It still has some rough corners, but can provide consistent assistance with certain plugins. + + + + + + + + + + +

+ Usage +

+ .eslintrc +

+// Install:
+
+npm i -D typescript-eslint-parser
+
+// And in your ESLint configuration file:
+
+"parser": "typescript-eslint-parser"
+

+{
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react",
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended",
+    "plugin:unicorn/recommended"
+  ],
+  "plugins": ["prettier", "jest", "unicorn"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "typescript-eslint-parser",
+      "rules": {
+        "no-undef": "off"
+      }
+    }
+  ]
+}
+

+ +An example github repository with a project showing how to integrate [eslint + tslint + create-react-app-ts](https://github.com/azdanov/tslint-eslint-crats). ## Working with Non-Typescript Libraries (writing your own index.d.ts) pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: