[core] Lint source in TypeScript

mui · Jul 11, 2020 · ffed74f · ffed74f
1 parent 70f3ce3
commit ffed74f
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 115 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,103 +11,97 @@ module.exports = {
     browser: true,
     node: true,
   },
-  extends: ['plugin:import/recommended', 'airbnb', 'prettier', 'prettier/react'],
-  parser: 'babel-eslint',
+  extends: ['plugin:import/recommended', 'airbnb-typescript', 'prettier', 'prettier/react', 'prettier/@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 7,
-    sourceType: 'module',
+    project: './tsconfig.json',
   },
-  plugins: ['babel', 'material-ui', 'react-hooks'],
+  plugins: ['material-ui', 'react-hooks', '@typescript-eslint'],
   settings: {
     'import/resolver': {
       webpack: {
         config: path.join(__dirname, './docs/webpackBaseConfig.js'),
       },
     },
   },
-  /**
-   * Sorted alphanumerically within each group. built-in and each plugin form
-   * their own groups.
-   */
+  // Sorted alphanumerically
   rules: {
-    'consistent-this': ['error', 'self'],
-    'linebreak-style': 'off', // Doesn't play nicely with Windows
-    // just as bad as "max components per file"
-    'max-classes-per-file': 'off',
-    'no-alert': 'error',
-    // Strict, airbnb is using warn; allow warn and error for dev environments
-    'no-console': ['error', { allow: ['warn', 'error'] }],
-    'no-constant-condition': 'error',
-    // Airbnb use error
-    'no-param-reassign': 'off',
-    'no-prototype-builtins': 'off',
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          '@material-ui/*/*/*',
-          '!@material-ui/core/test-utils/*',
-          '!@material-ui/utils/macros/*.macro',
-        ],
-      },
-    ],
-    'nonblock-statement-body-position': 'error',
-    // Airbnb restricts isNaN and isFinite which are necessary for IE 11
-    // we have to be disciplined about the usage and ensure the Number type for its
-    // arguments
-    'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
-    'no-underscore-dangle': 'error',
-    'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
-    'prefer-destructuring': 'off', // Destructuring harm grep potential.
+    'import/no-extraneous-dependencies': 'off', // Missing yarn workspace support
+    'no-console': ['error', { allow: ['warn', 'error'] }], // More strict than airbnb. Allow warn and error for production events
+    'no-param-reassign': 'off', // Less strict than airbnb. It's fine.
+    'react/destructuring-assignment': 'off', // Less strict than airbnb. It's fine.
+    'react/jsx-fragments': ['error', 'element'], // Prefer <React.Fragment> over <>.
+    'react/jsx-props-no-spreading': 'off', // Less strict than airbnb. We are a UI library.
 
-    'jsx-a11y/label-has-associated-control': 'off',
-    'jsx-a11y/label-has-for': 'off', // deprecated
-    'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.
+    // 'consistent-this': ['error', 'self'],
+    // 'linebreak-style': 'off', // Doesn't play nicely with Windows
+    // // just as bad as "max components per file"
+    // 'max-classes-per-file': 'off',
+    // 'no-alert': 'error',
+    // 'no-constant-condition': 'error',
+    // // Airbnb use error
+    // 'no-prototype-builtins': 'off',
+    // 'no-restricted-imports': [
+    //   'error',
+    //   {
+    //     patterns: [
+    //       '@material-ui/*/*/*',
+    //       '!@material-ui/core/test-utils/*',
+    //       '!@material-ui/utils/macros/*.macro',
+    //     ],
+    //   },
+    // ],
+    // 'nonblock-statement-body-position': 'error',
+    // // Airbnb restricts isNaN and isFinite which are necessary for IE 11
+    // // we have to be disciplined about the usage and ensure the Number type for its
+    // // arguments
+    // 'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
+    // 'no-underscore-dangle': 'error',
+    // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
+    // 'prefer-destructuring': 'off', // Destructuring harm grep potential.
 
-    'material-ui/docgen-ignore-before-comment': 'error',
+    // 'jsx-a11y/label-has-associated-control': 'off',
+    // 'jsx-a11y/label-has-for': 'off', // deprecated
+    // 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.
 
-    // This rule is great for raising people awareness of what a key is and how it works.
-    'react/no-array-index-key': 'off',
-    'react/destructuring-assignment': 'off',
-    // It's buggy
-    'react/forbid-prop-types': 'off',
-    'react/jsx-curly-brace-presence': 'off',
-    // prefer <React.Fragment> over <>. The former allows `key` while the latter doesn't
-    'react/jsx-fragments': ['error', 'element'],
-    'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
-    'react/jsx-handler-names': [
-      'error',
-      {
-        // airbnb is disabling this rule
-        eventHandlerPrefix: 'handle',
-        eventHandlerPropPrefix: 'on',
-      },
-    ],
-    // not a good rule for components close to the DOM
-    'react/jsx-props-no-spreading': 'off',
-    'react/no-danger': 'error',
-    // Strict, airbnb is using off
-    'react/no-direct-mutation-state': 'error',
-    'react/no-find-dom-node': 'off',
-    'react/no-multi-comp': 'off',
-    'react/require-default-props': 'off',
-    'react/sort-prop-types': 'error',
-    // This depends entirely on what you're doing. There's no universal pattern
-    'react/state-in-constructor': 'off',
-    // stylistic opinion. For conditional assignment we want it outside, otherwise as static
-    'react/static-property-placement': 'off',
+    // 'material-ui/docgen-ignore-before-comment': 'error',
 
-    'import/no-extraneous-dependencies': 'off', // It would be better to enable this rule.
-    'import/namespace': ['error', { allowComputed: true }],
-    'import/order': [
-      'error',
-      {
-        groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']],
-        'newlines-between': 'never',
-      },
-    ],
+    // // This rule is great for raising people awareness of what a key is and how it works.
+    // 'react/no-array-index-key': 'off',
+    // // It's buggy
+    // 'react/forbid-prop-types': 'off',
+    // 'react/jsx-curly-brace-presence': 'off',
+    // 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
+    // 'react/jsx-handler-names': [
+    //   'error',
+    //   {
+    //     // airbnb is disabling this rule
+    //     eventHandlerPrefix: 'handle',
+    //     eventHandlerPropPrefix: 'on',
+    //   },
+    // ],
+    // // not a good rule for components close to the DOM
+    // 'react/no-danger': 'error',
+    // // Strict, airbnb is using off
+    // 'react/no-direct-mutation-state': 'error',
+    // 'react/no-find-dom-node': 'off',
+    // 'react/no-multi-comp': 'off',
+    // 'react/require-default-props': 'off',
+    // 'react/sort-prop-types': 'error',
+    // // This depends entirely on what you're doing. There's no universal pattern
+    // 'react/state-in-constructor': 'off',
+    // // stylistic opinion. For conditional assignment we want it outside, otherwise as static
+    // 'react/static-property-placement': 'off',
+    // 'import/namespace': ['error', { allowComputed: true }],
+    // 'import/order': [
+    //   'error',
+    //   {
+    //     groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']],
+    //     'newlines-between': 'never',
+    //   },
+    // ],
 
-    'react-hooks/rules-of-hooks': 'error',
+    // 'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
   },
   overrides: [
@@ -191,5 +185,16 @@ module.exports = {
         'react/prop-types': 'off',
       },
     },
+    {
+      files: ['*.spec.tsx'],
+      rules: {
+        '@typescript-eslint/no-unused-expressions': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'max-classes-per-file': 'off',
+        'no-lone-blocks': 'off',
+        'react/prefer-stateless-function': 'off',
+        'react/prop-types': 'off',
+      },
+    },
   ],
 };
diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js
@@ -16,7 +16,7 @@ module.exports = {
       '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'),
       docs: path.resolve(__dirname, '../docs'),
     },
-    extensions: ['.js', '.ts'],
+    extensions: ['.js', '.ts', '.tsx', '.d.ts'],
   },
   output: {
     path: path.join(__dirname, 'build'),

diff --git a/package.json b/package.json
@@ -25,9 +25,9 @@
     "extract-error-codes": "lerna run --parallel extract-error-codes",
     "framer:build": "yarn workspace framer build",
     "jsonlint": "node scripts/jsonlint.js",
-    "lint": "eslint . --cache --report-unused-disable-directives",
-    "lint:ci": "eslint . --report-unused-disable-directives",
-    "lint:fix": "eslint . --cache --fix",
+    "lint": "eslint . --cache --report-unused-disable-directives --ext .ts,.tsx",
+    "lint:ci": "eslint . --report-unused-disable-directives --ext .ts,.tsx",
+    "lint:fix": "eslint . --cache --fix --ext .ts,.tsx",
     "prettier": "node ./scripts/prettier.js",
     "prettier:all": "node ./scripts/prettier.js write",
     "size:snapshot": "node scripts/sizeSnapshot/create",
@@ -72,8 +72,6 @@
     "@types/react": "^16.9.3",
     "@types/sinon": "^9.0.0",
     "argos-cli": "^0.3.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.0",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-macros": "^2.8.0",
@@ -96,7 +94,7 @@
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-airbnb-typescript": "^8.0.2",
     "eslint-config-prettier": "^6.2.0",
     "eslint-import-resolver-webpack": "^0.12.0",
     "eslint-plugin-babel": "^5.3.0",
@@ -186,5 +184,9 @@
     "packages/*",
     "docs",
     "framer"
-  ]
+  ],
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0"
+  }
 }
diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts
@@ -1,6 +1,5 @@
 import {
   ClassNameMap,
-  PropsOfStyles,
   Styles,
   WithStylesOptions,
 } from '@material-ui/styles/withStyles';

diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
@@ -288,7 +288,7 @@ const ChipsTest = () => (
   <div>
     <Chip label="Basic Chip" />
     <Chip avatar={<Avatar>M</Avatar>} label="Clickable Chip" onClick={(e) => log(e)} />
-    <Chip avatar={<Avatar src={'image.bmp'} />} label="Deletable Chip" onDelete={(e) => log(e)} />
+    <Chip avatar={<Avatar src="image.bmp" />} label="Deletable Chip" onDelete={(e) => log(e)} />
     <Chip
       avatar={
         <Avatar>
@@ -305,7 +305,7 @@ const ChipsTest = () => (
 const DialogTest = () => {
   const emails = ['username@gmail.com', 'user02@gmail.com'];
   return (
-    <Dialog onClose={(e) => log(e)} open>
+    <Dialog onClose={(event) => log(event)} open>
       <DialogTitle>Set backup account</DialogTitle>
       <div>
         <List>
@@ -399,14 +399,14 @@ const DrawerTest = () => {
   };
   return (
     <div>
-      <Drawer variant="persistent" open={open.left} onClose={(e) => log(e)} onClick={(e) => log(e)}>
+      <Drawer variant="persistent" open={open.left} onClose={(event) => log(event)} onClick={(e) => log(e)}>
         List
       </Drawer>
       <Drawer
         variant="temporary"
         anchor="top"
         open={open.top}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
         ModalProps={{
           hideBackdrop: true,
@@ -418,7 +418,7 @@ const DrawerTest = () => {
         anchor="bottom"
         variant="temporary"
         open={open.bottom}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
       >
         List
@@ -427,7 +427,7 @@ const DrawerTest = () => {
         variant="persistent"
         anchor="right"
         open={open.right}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
       >
         List
@@ -447,7 +447,7 @@ const SwipeableDrawerTest = () => {
     <div>
       <SwipeableDrawer
         open={open.left}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
         onOpen={(e) => log(e)}
       >
@@ -456,7 +456,7 @@ const SwipeableDrawerTest = () => {
       <SwipeableDrawer
         anchor="top"
         open={open.top}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
         onOpen={(e) => log(e)}
         ModalProps={{
@@ -468,7 +468,7 @@ const SwipeableDrawerTest = () => {
       <SwipeableDrawer
         anchor="bottom"
         open={open.bottom}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
         onOpen={(e) => log(e)}
       >
@@ -478,7 +478,7 @@ const SwipeableDrawerTest = () => {
         variant="temporary"
         anchor="right"
         open={open.right}
-        onClose={(e) => log(e)}
+        onClose={(event) => log(event)}
         onClick={(e) => log(e)}
         onOpen={(e) => log(e)}
       >
@@ -516,7 +516,7 @@ const GridTest = () => (
     <Grid item sm={12}>
       ...
     </Grid>
-    <Grid item xl={true}>
+    <Grid item xl>
       ...
     </Grid>
     <Grid item style={{ color: 'red' }}>
@@ -538,7 +538,7 @@ const ListTest = () => (
   <List>
     {[0, 1, 2, 3].map((value) => (
       <ListItem dense button selected={false} key={value} onClick={(e) => log(e)}>
-        <Checkbox checked={true} tabIndex={-1} disableRipple />
+        <Checkbox checked tabIndex={-1} disableRipple />
         <ListItemText primary={`Line item ${value + 1}`} />
         <ListItemSecondaryAction>
           <IconButton aria-label="comments">
@@ -566,8 +566,8 @@ const MenuTest = () => {
     <Menu
       id="lock-menu"
       anchorEl={anchorEl}
-      open={true}
-      onClose={(e) => log(e)}
+      open
+      onClose={(event) => log(event)}
       PopoverClasses={{ paper: 'foo' }}
     >
       {options.map((option, index) => (
@@ -744,9 +744,9 @@ const SnackbarTest = () => (
         vertical: 'bottom',
         horizontal: 'left',
       }}
-      open={true}
+      open
       autoHideDuration={6000}
-      onClose={(e) => log(e)}
+      onClose={(event) => log(event)}
       ContentProps={
         {
           // 'aria-describedby': 'message-id',

diff --git a/packages/typescript-to-proptypes/test/options-test/options.ts b/packages/typescript-to-proptypes/test/options-test/options.ts
@@ -6,6 +6,7 @@ const options: TestOptions = {
       if (name.endsWith('Props')) {
         return false;
       }
+      return true;
     },
   },
   injector: {

diff --git a/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts b/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 interface ButtonProps {
   variant?: string;
 }