Typescript entrypoints

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	extends: ['./packages/eslint-config-norton'],
+	extends: ['./packages/eslint-config-norton', './packages/eslint-config-norton/typescript'],
 	rules: {
 		'import/no-extraneous-dependencies': ['error',
 			{

package.json

@@ -37,6 +37,7 @@
     "stylelint": "^13.6.1",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-config-standard": "^20.0.0",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.2",
+    "prettier": "2.x"
   }
 }

packages/eslint-config-norton/README.md

@@ -56,21 +56,7 @@ module.exports = {
 }
 ```
 
-## TYPESCRIPT PROJECTS
-
-> **No other setup is necessary for Typescript support.**
-
-### How this works.
-
-The eslint-config-norton package is setup to automatically work with projects that use Typescript as well as projects that do not use Typescript. The package contains an "overrides" parameter which provides support for .ts and .tsx files if those files are present in the project. When Typescript files are detected the override supplies the necessary configuration to enable Typescript linting.
-
-### **For more information please see...**
-
-Typescript Lint Setup - https://www.notion.so/Typescript-Lint-Setup-06cef0036d0b4887b4e07b57def202e4
-Typescript Style Guide - https://www.notion.so/TypeScript-Style-Guide-a73cca890fb342b0a1f99a7ba1ce55d8
-ESLint Plugin TypeScript - https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
-
-## FOR NON REACT PROJECTS
+## For Non React Projects
 
 If you don't want React linting you can simply extend the base.js entry point in our config, `eslint-config-norton/base`.
 
@@ -87,6 +73,52 @@ module.exports = {
 }
 ```
 
+## For Typescript projects
+
+This package also provides configuration for Typescript liniting. In order to use our Typescript linting you need to extend an additional entrypoint based on your needs. Under the hood this configuration disables some base ESLint rules which do not interface well with Typescript files and Prettier options and subsequently provides Typescript linting.
+
+Note: These configurations are still meant to be used alongside [`prettier-config-norton`](https://github.com/wwnorton/style/tree/master/packages/prettier-config-norton) to facilitate most of the formatting.
+
+### How this works.
+
+This is entrypoint provides Typescript overrides. 
+
+- **eslint-config-norton/typescript**: this includes an extendable override file providing linting for Typescript along with React.
+- **eslint-config-norton/typescript-base**: this includes an extendable override file providing linting for *only* Typescript.
+
+> The TypeScript ruleset relies on Type definitions and being aware of the location of your TSConfig. Make sure your `'./tsconfig.json'` is in your root directory.
+
+### Examples
+
+Incorporating Typescript and React Linting:
+
+```js
+module.exports = {
+  extemds: [
+    'norton',
+    'eslint-config-norton/typescript'
+  ]
+}
+```
+
+Incorporating just Typescript Linting:
+
+```js
+module.exports = {
+  extemds: [
+    'eslint-config-norton/base',
+    'eslint-config-norton/typescript-base'
+  ]
+}
+```
+
+### **For more information please see...**
+
+Typescript Lint Setup - https://www.notion.so/Typescript-Lint-Setup-06cef0036d0b4887b4e07b57def202e4
+Typescript Style Guide - https://www.notion.so/TypeScript-Style-Guide-a73cca890fb342b0a1f99a7ba1ce55d8
+ESLint Plugin TypeScript - https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
+
+
 ## Rules
 
 This configuration extends [airbnb's base style guide](https://github.com/airbnb/javascript) ([eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)). It overrides the following rules:

packages/eslint-config-norton/base.js

@@ -1,8 +1,3 @@
-/**
- * ? This is the base configuration for projects without React.
- */
-const typescriptBase = require('./overrides/typescript-base');
-
 module.exports = {
 	/**
 	 * add eslint-config-prettier to handle formatting conflicts with prettier
@@ -13,7 +8,4 @@ module.exports = {
 		'eslint-config-prettier',
 		'./rules/style',
 	].map(require.resolve),
-	overrides: [
-		typescriptBase,
-	],
 };

packages/eslint-config-norton/index.js

@@ -1,6 +1,3 @@
-const typescript = require('./overrides/typescript');
-const typescriptReact = require('./overrides/typescript-react');
-
 /**
  * Use Airbnb as base and add Prettier to handle formatting conflicts.
  * @see https://github.com/airbnb/javascript/
@@ -15,12 +12,4 @@ module.exports = {
 		'./rules/style',
 		'./rules/react',
 	].map(require.resolve),
-	/**
-	 * Use overrides for TypeScript to ensure that .js files aren't linted with the
-	 * TypeScript rules.
-	 */
-	overrides: [
-		typescript,
-		typescriptReact,
-	],
 };

packages/eslint-config-norton/package.json

@@ -24,7 +24,8 @@
   "files": [
     "base.js",
     "index.js",
-    "overrides",
+    "typescript.js",
+    "typescript-base.js",
     "rules"
   ],
   "dependencies": {
@@ -39,5 +40,10 @@
     "eslint-plugin-jsx-a11y": "^6.3.0",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4 || ^3 || ^2.3.0 || ^1.7.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   }
 }

packages/eslint-config-norton/overrides/typescript-base.js → packages/eslint-config-norton/rules/typescript-base.js

@@ -1,13 +1,4 @@
-/**
- * Overrides for usage with TypeScript.
- */
 module.exports = {
-	extends: [
-		'plugin:@typescript-eslint/recommended',
-		'plugin:@typescript-eslint/recommended-requiring-type-checking',
-		'plugin:import/typescript',
-		'prettier/@typescript-eslint'
-	],
 	rules: {
 		/** Enable tabs with @typescript-eslint/indent instead of eslint/indent. */
 		indent: 'off',
@@ -31,20 +22,4 @@ module.exports = {
 			},
 		],
 	},
-	settings: {
-		'import/extensions': [
-			'.js',
-			'.jsx',
-			'.mjs',
-			'.ts',
-		],
-		'import/resolver': {
-			node: {
-				extensions: ['.js', '.json', '.ts'],
-			},
-			webpack: {
-				extensions: ['.js', '.json', '.ts'],
-			},
-		},
-	},
 };

packages/eslint-config-norton/overrides/typescript-react.js → packages/eslint-config-norton/rules/typescript-react.js

@@ -1,11 +1,4 @@
-/**
- * Overrides for usage with TypeScript + React.
- */
 module.exports = {
-	files: ['*.tsx'],
-	extends: [
-		'./typescript-base',
-	].map(require.resolve),
 	rules: {
 		/** Add .tsx to react/jsx-filename-extension. */
 		'react/jsx-filename-extension': [
@@ -36,21 +29,4 @@ module.exports = {
 			},
 		],
 	},
-	settings: {
-		'import/extensions': [
-			'.js',
-			'.jsx',
-			'.mjs',
-			'.ts',
-			'.tsx',
-		],
-		'import/resolver': {
-			node: {
-				extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-			},
-			webpack: {
-				extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-			},
-		},
-	},
 };