From 4d62c8667ab65ed422a844a99959388bcc94a250 Mon Sep 17 00:00:00 2001 From: Anton Zdanov Date: Mon, 4 Jun 2018 19:48:38 +0300 Subject: [PATCH 1/6] Update Prettier + TSLint section --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/README.md b/README.md index b0417e25..428f7f58 100644 --- a/README.md +++ b/README.md @@ -439,6 +439,54 @@ 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
+}
+
+ + + + ## Working with Non-Typescript Libraries (writing your own index.d.ts) *Not written yet.* From 9046b4856234b735297f65e68d7785278522f3bb Mon Sep 17 00:00:00 2001 From: Anton Zdanov Date: Mon, 4 Jun 2018 19:51:32 +0300 Subject: [PATCH 2/6] fix toc for prettier + tslint --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 428f7f58..273d35f6 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ - [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) * [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) From 2093a4b21d07f5dc54166a32efa654da45629c2b Mon Sep 17 00:00:00 2001 From: Anton Zdanov Date: Tue, 5 Jun 2018 19:21:40 +0300 Subject: [PATCH 3/6] Add ESLint + TSLint section --- README.md | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 74 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 273d35f6..37576a36 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ * [Component/Design System Development](#component-design-system-development) * [Building](#building) * [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,9 +438,7 @@ For developing with Storybook, read the docs I maintain over here: +## 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"
+      }
+    }
+  ]
+}
+
+
+ ## Working with Non-Typescript Libraries (writing your own index.d.ts) *Not written yet.* From 60e7ed83bab484257152b8dd83cee4fed2dabd4b Mon Sep 17 00:00:00 2001 From: Anton Zdanov Date: Wed, 6 Jun 2018 12:25:40 +0300 Subject: [PATCH 4/6] match style for link in eslint + tslint section --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 37576a36..bdc59152 100644 --- a/README.md +++ b/README.md @@ -490,7 +490,7 @@ Example configuration: 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. +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. From f92bf029498d2bb2c3b9009bc2bfb687bd0a8fc8 Mon Sep 17 00:00:00 2001 From: Anton Zdanov Date: Wed, 6 Jun 2018 18:56:37 +0300 Subject: [PATCH 5/6] Add external repo for tslint + prettier + eslint An example repository for integrating prettier, eslint and tslint together. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index bdc59152..f32b5f06 100644 --- a/README.md +++ b/README.md @@ -486,6 +486,8 @@ Example configuration:
+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. @@ -558,6 +560,8 @@ npm i -D typescript-eslint-parser +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) *Not written yet.* From 78fad006411a69dc02762233bea5062d01e9f9de Mon Sep 17 00:00:00 2001 From: tsiq-swyx <35976578+tsiq-swyx@users.noreply.github.com> Date: Wed, 6 Jun 2018 13:03:18 -0400 Subject: [PATCH 6/6] adding attribution! --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index f32b5f06..dc31184a 100644 --- a/README.md +++ b/README.md @@ -438,6 +438,8 @@ For developing with Storybook, read the docs I maintain over here: