Feature/improve eslint job (#4219)

* use .eslintrc.js

* upgrade eslint

* use eslint-plugin-markdown v2

* lint js blocks in markdown files

* fix lint

* add eslint-plugin-react

* fix bugs

Author: chenxsan

.eslintrc

@@ -0,0 +1,49 @@
+module.exports = {
+  root: true,
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parser: '@babel/eslint-parser',
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+    jest: true,
+    'cypress/globals': true,
+  },
+  plugins: ['markdown', 'cypress'],
+  globals: {
+    __DEV__: true,
+  },
+  rules: {
+    'no-undef': 2,
+    'no-unreachable': 2,
+    'no-unused-vars': 0,
+    'no-console': 0,
+    semi: ['error', 'always'],
+    quotes: ['error', 'single'],
+    'react/jsx-uses-react': 'off', // no longer needed with new jsx transform
+    'react/react-in-jsx-scope': 'off', // ditto
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  overrides: [
+    { files: ['src/**/*.jsx'] }, // eslint would lint .js only by default
+    {
+      files: ['src/content/**/*.{md,mdx}'],
+      processor: 'markdown/markdown',
+    },
+    {
+      files: ['src/content/**/*.{md,mdx}/*.{js,javascript}'], // we don't lint ts at the moment
+      rules: {
+        indent: ['error', 2],
+        quotes: ['error', 'single'],
+        'no-undef': 0,
+        'no-constant-condition': 0,
+        'no-useless-escape': 0,
+        'no-dupe-keys': 0,
+      },
+    },
+  ],
+};

.eslintrc.js

@@ -42,8 +42,8 @@
     "build-test": "npm run build && http-server dist/",
     "test": "npm run lint",
     "lint": "run-s lint:*",
-    "lint:js": "npm run lint-js src",
-    "lint-js": "eslint --ext .js,.jsx,.md --cache --cache-location .cache/.eslintcache",
+    "lint:js": "npm run lint-js",
+    "lint-js": "eslint . --cache --cache-location .cache/.eslintcache",
     "lint:markdown": "npm run lint-markdown *.md ./src/content/**/*.md",
     "lint-markdown": "markdownlint --rules markdownlint-rule-emphasis-style --config ./.markdownlint.json --ignore './src/content/**/_*.md'",
     "lint:social": "alex . -q",
@@ -79,7 +79,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.11.6",
-    "@babel/eslint-parser": "^7.11.5",
+    "@babel/eslint-parser": "^7.12.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
@@ -100,9 +100,10 @@
     "directory-tree": "^2.2.4",
     "directory-tree-webpack-plugin": "^1.0.2",
     "duplexer": "^0.1.1",
-    "eslint": "^7.8.1",
-    "eslint-plugin-cypress": "^2.10.3",
-    "eslint-plugin-markdown": "^1.0.2",
+    "eslint": "^7.14.0",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-markdown": "^2.0.0-rc.0",
+    "eslint-plugin-react": "^7.21.5",
     "front-matter": "^4.0.2",
     "html-loader": "^1.3.0",
     "html-webpack-plugin": "^4.4.1",

package.json

@@ -1,14 +1,15 @@
 import { Children, isValidElement } from 'react';
 import { Details } from './components';
+import PropTypes from 'prop-types';
 
 const detailComponentsList = ['link', 'mode', 'entry', 'path', 'filename', 'publicPath', 'library', 'libraryType', 'libraryName', 'advancedLibrary', 'advancedOutput', 'expertOutput', 'expertOutputB', 'expert', 'advancedConditions', 'moduleType', 'advancedActions', 'advancedModule', 'modules', 'alias', 'advancedResolve', 'expertResolve', 'hints', 'devtool', 'target', 'externals', 'externalsType', 'externalsPresets', 'ignoreWarnings', 'stats', 'preset', 'advancedGlobal', 'advancedAssets', 'advancedChunkGroups', 'advancedChunks', 'advancedModules', 'expertModules', 'advancedStatsOptimization', 'advancedOptimization', 'cacheGroupAdvancedSelectors', 'cacheGroupAdvancedEffects', 'advancedSelectors', 'advancedEffects', 'fallbackCacheGroup', 'advanced', 'advancedCaching', 'advancedBuild'];
-
 export const Pre = props => {
+  // eslint-disable-next-line
   const newChildren = Children.map(props.children.props.children, child => {
     if (isValidElement(child)) {
       if (child.props.className.includes('keyword')) {
         if (!detailComponentsList.includes(child.props.componentname)) return child;
-
+        // eslint-disable-next-line
         return <Details children={child.props.children.slice(4, Children.count(child.props.children) - 4)} url={child.props.url} />;
       }
     }
@@ -26,3 +27,6 @@ export const Pre = props => {
     </pre>
   );
 };
+Pre.propTypes = {
+
+};

src/components/Configuration/Configuration.jsx

@@ -2,6 +2,7 @@ import { isValidElement, Component } from 'react';
 import Popover from 'react-tiny-popover';
 import './Configuration.scss';
 import { timeout } from 'q';
+import PropTypes from 'prop-types';
 
 const DEFAULT_CHILDREN_SIZE = 4;
 
@@ -18,7 +19,6 @@ const addLink = (child, i, url) => {
     child
   );
 };
-
 const Card = ({ body }) => {
   return (
     <div className="markdown">
@@ -28,8 +28,14 @@ const Card = ({ body }) => {
     </div>
   );
 };
-
+Card.propTypes = {
+  body: PropTypes.string
+};
 export class Details extends Component {
+  static propTypes = {
+    url: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.node)
+  }
   constructor(props) {
     super(props);
     this.state = {

src/components/Configuration/components.js

@@ -1,11 +1,15 @@
 import './Container.scss';
-
-export default (props = {}) => {
+import PropTypes from 'prop-types';
+Container.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};
+export default function Container (props = {}) {
   let { className = '' } = props;
 
   return (
     <div className={ `container ${className}` }>
       { props.children }
     </div>
   );
-};
+}

src/components/Container/Container.jsx

@@ -2,8 +2,12 @@ import { Component } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Contributors.scss';
+import PropTypes from 'prop-types';
 
 export default class Contributors extends Component {
+  static propTypes = {
+    contributors: PropTypes.array
+  }
   state = {
     inView: false
   }
@@ -18,11 +22,11 @@ export default class Contributors extends Component {
   render() {
     const { inView } = this.state;
     const { contributors } = this.props;
-    
+
     if (!contributors.length) {
       return <noscript />;
     }
-  
+
     return (
       <VisibilitySensor delayedCall
         partialVisibility

src/components/Contributors/Contributors.jsx

@@ -10,7 +10,9 @@ export default class Cube extends Component {
     hover: PropTypes.bool,
     theme: PropTypes.string,
     depth: PropTypes.number,
-    repeatDelay: PropTypes.number
+    repeatDelay: PropTypes.number,
+    className: PropTypes.string,
+    continuous: PropTypes.bool
   };
 
   static defaultProps = {

src/components/Cube/Cube.jsx

@@ -1,8 +1,13 @@
 import { Component } from 'react';
 import LanguageIcon from '../../assets/language-icon.svg';
 import './Dropdown.scss';
+import PropTypes from 'prop-types';
 
 export default class Dropdown extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    items: PropTypes.array
+  }
   state = {
     active: false
   };
@@ -32,7 +37,7 @@ export default class Dropdown extends Component {
     let activeMod = this.state.active ? 'dropdown__list--active' : '';
 
     return (
-      <nav 
+      <nav
         className={ `dropdown ${className}` }
         ref={ el => this.dropdown = el }
         onMouseOver={ this._toggle.bind(this, true) }
@@ -59,9 +64,9 @@ export default class Dropdown extends Component {
               items.map((item, i) => {
                 return (
                   <li key={ item.title }>
-                    <a 
+                    <a
                       onKeyDown={this._handleArrowKeys.bind(this, i, items.length - 1)}
-                      ref={ node => this.links ? this.links.push(node) : this.links = [node] } 
+                      ref={ node => this.links ? this.links.push(node) : this.links = [node] }
                       href={ item.url }>
                       <span lang={ item.lang }>{ item.title }</span>
                     </a>

src/components/Dropdown/Dropdown.jsx

@@ -1,8 +1,8 @@
 import Logo from '../../assets/site-logo.svg';
 import './Logo.scss';
 
-export default () => {
+export default function LogoComp() {
   return (
     <img className="logo" src={ Logo } alt="webpack logo" />
   );
-};
+}

src/components/Logo/Logo.jsx

@@ -1,9 +1,12 @@
 import './Markdown.scss';
+import PropTypes from 'prop-types';
 
 const Markdown = props => (
   <div className="markdown">
     { props.children }
   </div>
 );
-
+Markdown.propTypes = {
+  children: PropTypes.node
+};
 export default Markdown;

src/components/Markdown/Markdown.jsx

@@ -1,6 +1,7 @@
 // Import External Dependencies
 import { Component } from 'react';
 import Banner from 'react-banner';
+import PropTypes from 'prop-types';
 
 // Import Components
 import Link from '../Link/Link';
@@ -22,6 +23,11 @@ import StackOverflowIcon from '../../styles/icons/stack-overflow.svg';
 const onSearch = () => {};
 
 export default class Navigation extends Component {
+  static propTypes = {
+    pathname: PropTypes.string,
+    links: PropTypes.array,
+    toggleSidebar: PropTypes.func
+  }
   render() {
     let { pathname, links, toggleSidebar } = this.props;
 

src/components/Navigation/Navigation.jsx

@@ -3,6 +3,7 @@ import Container from '../Container/Container';
 import testLocalStorage from '../../utilities/test-local-storage';
 import './NotificationBar.scss';
 import CloseIcon from '../../styles/icons/cross.svg';
+import PropTypes from 'prop-types';
 
 const version = '3';
 const localStorageIsEnabled = testLocalStorage() !== false;
@@ -15,6 +16,9 @@ const barDismissed = () => {
 };
 
 class MessageBar extends Component {
+  static propTypes = {
+    onClose: PropTypes.func
+  }
   render() {
     return (
       <div className="notification-bar">

src/components/NotificationBar/NotificationBar.jsx

@@ -1,5 +1,6 @@
 // Import External Dependencies
 import { Children, isValidElement, Component } from 'react';
+import PropTypes from 'prop-types';
 
 // Import Components
 import PageLinks from '../PageLinks/PageLinks';
@@ -13,6 +14,19 @@ import AdjacentPages from './AdjacentPages';
 import './Page.scss';
 
 class Page extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    contributors: PropTypes.array,
+    related: PropTypes.array,
+    previous: PropTypes.object,
+    next: PropTypes.object,
+    content: PropTypes.oneOfType([
+      PropTypes.shape({
+        then: PropTypes.func.isRequired,
+        default: PropTypes.string
+      })
+    ])
+  }
   constructor(props) {
     super(props);
 
@@ -72,6 +86,7 @@ class Page extends Component {
       contentRender = Children.map(contentRender, child => {
         if (isValidElement(child)) {
           if (child.props.mdxType === 'pre') {
+            // eslint-disable-next-line
             return <Pre children={child.props.children} />;
           }
         }

src/components/Page/Page.jsx

@@ -5,10 +5,10 @@ import EditIcon from '../../styles/icons/edit.svg';
 
 const baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/';
 
-export default ({
+export default function PageLinks({
   page = {},
   ...props
-}) => {
+}) {
   const editLink = page.edit || Url.resolve(baseURL, page.path);
 
   // TODO: Make sure we add `repo` / `edit` and address `type` (above)
@@ -35,7 +35,7 @@ export default ({
       </button>
     </div>
   );
-};
+}
 
 function _handlePrintClick (e) {
   e.preventDefault();