ESLintify Part 1

.eslintrc.js

@@ -16,53 +16,23 @@ module.exports = {
     'no-console': OFF,
     // require radix argument in parseInt
     radix: ERROR,
+    'class-methods-use-this': OFF,
+    'react/no-multi-comp': OFF,
+    'import/no-extraneous-dependencies': OFF,
+    'react/no-danger': OFF,
+    'no-empty': [ERROR, {allowEmptyCatch: true}],
+
     // Existing ESLint errors sorted by frequency, silencing first.
     'react/button-has-type': OFF, // 1
-    null: OFF, // 1
-    'react/no-unused-state': OFF, // 1
-    'vars-on-top': OFF, // 1
     'react/forbid-prop-types': OFF, // 1
     'react/require-default-props': OFF, // 1
-    'lines-between-class-members': OFF, // 1
-    strict: OFF, // 1
-    'no-restricted-syntax': OFF, // 1
-    'no-path-concat': OFF, // 2
-    'one-var': OFF, // 2
-    'no-unused-expressions': OFF, // 2
-    'react/jsx-boolean-value': OFF, // 2
-    'jsx-a11y/html-has-lang': OFF, // 2
-    'no-var': OFF, // 2
-    'no-useless-return': OFF, // 2
-    'jsx-a11y/anchor-has-content': OFF, // 2
-    'react/jsx-no-comment-textnodes': OFF, // 3
-    'no-continue': OFF, // 3
-    'jsx-a11y/alt-text': OFF, // 3
-    'react/jsx-tag-spacing': OFF, // 3
-    'no-lonely-if': OFF, // 3
-    'react/sort-comp': OFF, // 4
-    'no-cond-assign': OFF, // 4
-    'no-use-before-define': OFF, // 4
-    'no-empty': OFF, // 4
-    'no-shadow': OFF, // 4
-    'class-methods-use-this': OFF, // 5
-    eqeqeq: OFF, // 5
-    'react/no-multi-comp': OFF, // 5
-    'react/no-array-index-key': OFF, // 6
-    'no-underscore-dangle': OFF, // 6
-    'array-callback-return': OFF, // 6
-    'import/no-extraneous-dependencies': OFF, // 7
-    'no-else-return': OFF, // 9
     'jsx-a11y/anchor-is-valid': OFF, // 9
-    'import/order': OFF, // 10
     'arrow-body-style': OFF, // 10
-    camelcase: OFF, // 10
     'react/jsx-curly-brace-presence': OFF, // 11
     'react/no-unescaped-entities': OFF, // 12
     'no-param-reassign': OFF, // 12
-    'no-unused-vars': OFF, // 13
     'spaced-comment': OFF, // 14
     'import/no-unresolved': OFF, // 15
-    'react/no-danger': OFF, // 16
     'object-shorthand': OFF, // 16
     'dot-notation': OFF, // 19
     'react/prefer-stateless-function': OFF, // 22

examples/basics/core/Footer.js

@@ -72,7 +72,7 @@ class Footer extends React.Component {
               href={this.props.config.repoUrl}
               data-icon="octicon-star"
               data-count-href="/facebook/docusaurus/stargazers"
-              data-show-count={true}
+              data-show-count="true"
               data-count-aria-label="# stargazers on GitHub"
               aria-label="Star this project on GitHub">
               Star

examples/basics/pages/en/index.js

@@ -52,11 +52,11 @@ const SplashContainer = props => (
 
 const Logo = props => (
   <div className="projectLogo">
-    <img src={props.img_src} />
+    <img src={props.img_src} alt="Project Logo" />
   </div>
 );
 
-const ProjectTitle = props => (
+const ProjectTitle = () => (
   <h2 className="projectTitle">
     {siteConfig.title}
     <small>{siteConfig.tagline}</small>
@@ -99,7 +99,7 @@ const Block = props => (
   </Container>
 );
 
-const Features = props => (
+const Features = () => (
   <Block layout="fourColumn">
     {[
       {
@@ -118,7 +118,7 @@ const Features = props => (
   </Block>
 );
 
-const FeatureCallout = props => (
+const FeatureCallout = () => (
   <div
     className="productShowcaseSection paddingBottom"
     style={{textAlign: 'center'}}>
@@ -127,7 +127,7 @@ const FeatureCallout = props => (
   </div>
 );
 
-const LearnHow = props => (
+const LearnHow = () => (
   <Block background="light">
     {[
       {
@@ -140,7 +140,7 @@ const LearnHow = props => (
   </Block>
 );
 
-const TryOut = props => (
+const TryOut = () => (
   <Block id="try">
     {[
       {
@@ -153,7 +153,7 @@ const TryOut = props => (
   </Block>
 );
 
-const Description = props => (
+const Description = () => (
   <Block background="dark">
     {[
       {
@@ -170,21 +170,16 @@ const Showcase = props => {
   if ((siteConfig.users || []).length === 0) {
     return null;
   }
-  const showcase = siteConfig.users
-    .filter(user => {
-      return user.pinned;
-    })
-    .map((user, i) => {
-      return (
-        <a href={user.infoLink} key={i}>
-          <img src={user.image} alt={user.caption} title={user.caption} />
-        </a>
-      );
-    });
+
+  const showcase = siteConfig.users.filter(user => user.pinned).map(user => (
+    <a href={user.infoLink} key={user.infoLink}>
+      <img src={user.image} alt={user.caption} title={user.caption} />
+    </a>
+  ));
 
   return (
     <div className="productShowcaseSection paddingBottom">
-      <h2>{"Who's Using This?"}</h2>
+      <h2>Who's Using This?</h2>
       <p>This project is used by all these people</p>
       <div className="logos">{showcase}</div>
       <div className="more-users">

examples/basics/pages/en/users.js

@@ -17,14 +17,13 @@ class Users extends React.Component {
     if ((siteConfig.users || []).length === 0) {
       return null;
     }
+
     const editUrl = siteConfig.repoUrl + '/edit/master/website/siteConfig.js';
-    const showcase = siteConfig.users.map((user, i) => {
-      return (
-        <a href={user.infoLink} key={i}>
-          <img src={user.image} alt={user.caption} title={user.caption} />
-        </a>
-      );
-    });
+    const showcase = siteConfig.users.map(user => (
+      <a href={user.infoLink} key={user.infoLink}>
+        <img src={user.image} alt={user.caption} title={user.caption} />
+      </a>
+    ));
 
     return (
       <div className="mainContainer">

lib/__tests__/build-files.test.js

@@ -52,7 +52,6 @@ beforeAll(() => {
       inputAssetsFiles,
       outputAssetsFiles,
     ] = results;
-    return;
   });
 });
 

lib/core/BlogPageLayout.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const React = require('react');
 const BlogPost = require('./BlogPost.js');
 const BlogSidebar = require('./BlogSidebar.js');
 const Container = require('./Container.js');
 const MetadataBlog = require('./MetadataBlog.js');
-const React = require('react');
 const Site = require('./Site.js');
 const utils = require('./utils.js');
 
@@ -46,7 +46,7 @@ class BlogPageLayout extends React.Component {
                     <BlogPost
                       post={post}
                       content={post.content}
-                      truncate={true}
+                      truncate
                       key={
                         utils.getPath(post.path, this.props.config.cleanUrl) +
                         post.title

lib/core/BlogPost.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const MarkdownBlock = require('./MarkdownBlock.js');
 const React = require('react');
 
+const MarkdownBlock = require('./MarkdownBlock.js');
 const utils = require('./utils.js');
 
 // inner blog component for the article itself, without sidebar/header/footer
@@ -46,32 +46,21 @@ class BlogPost extends React.Component {
     const className =
       'authorPhoto' +
       (post.author && post.authorTitle ? ' authorPhotoBig' : '');
-    if (post.authorFBID) {
-      return (
-        <div className={className}>
-          <a href={post.authorURL} target="_blank" rel="noreferrer noopener">
-            <img
-              src={
-                'https://graph.facebook.com/' +
-                post.authorFBID +
-                '/picture/?height=200&width=200'
-              }
-              alt={post.author}
-            />
-          </a>
-        </div>
-      );
-    } else if (post.authorImageURL) {
+    if (post.authorFBID || post.authorImageURL) {
+      const authorImageURL = post.authorFBID
+        ? `https://graph.facebook.com/${
+            post.authorFBID
+          }/picture/?height=200&width=200`
+        : post.authorImageURL;
       return (
         <div className={className}>
           <a href={post.authorURL} target="_blank" rel="noreferrer noopener">
-            <img src={post.authorImageURL} />
+            <img src={authorImageURL} alt={post.author} />
           </a>
         </div>
       );
-    } else {
-      return null;
     }
+    return null;
   }
 
   renderTitle() {

lib/core/BlogPostLayout.js

@@ -5,19 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const classNames = require('classnames');
 const React = require('react');
+
 const BlogPost = require('./BlogPost.js');
 const BlogSidebar = require('./BlogSidebar.js');
 const Container = require('./Container.js');
 const Site = require('./Site.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const utils = require('./utils.js');
-const classNames = require('classnames');
 
 // used for entire blog posts, i.e., each written blog article with sidebar with site header/footer
 class BlogPostLayout extends React.Component {
+  getDescription() {
+    const descLines = this.props.children.trim().split('\n');
+    for (let i = 0; i < descLines.length; i++) {
+      // Don't want blank lines or descriptions that are raw image rendering strings.
+      if (descLines[i] && !descLines[i].startsWith('![')) {
+        return descLines[i];
+      }
+    }
+    return null;
+  }
+
   renderSocialButtons() {
-    let post = this.props.metadata;
+    const post = this.props.metadata;
     post.path = utils.getPath(post.path, this.props.config.cleanUrl);
 
     const fbComment = this.props.config.facebookAppId &&
@@ -72,8 +84,9 @@ class BlogPostLayout extends React.Component {
           }
           data-related={this.props.config.twitter}
           data-via={post.authorTwitter}
-          data-show-count="false"
-        />
+          data-show-count="false">
+          Tweet
+        </a>
       </div>
     );
 
@@ -86,17 +99,6 @@ class BlogPostLayout extends React.Component {
     );
   }
 
-  getDescription() {
-    const descLines = this.props.children.trim().split('\n');
-    for (var i = 0; i < descLines.length; i++) {
-      // Don't want blank lines or descriptions that are raw image rendering strings
-      if (descLines[i] && !descLines[i].startsWith('![')) {
-        return descLines[i];
-      }
-    }
-    return null;
-  }
-
   render() {
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
     const post = this.props.metadata;

lib/core/BlogSidebar.js

@@ -17,7 +17,7 @@ class BlogSidebar extends React.Component {
     let blogSidebarTitleConfig = this.props.config.blogSidebarTitle || {};
     let blogSidebarTitle = blogSidebarTitleConfig.default || 'Recent Posts';
     if (this.props.config.blogSidebarCount) {
-      if (this.props.config.blogSidebarCount == 'ALL') {
+      if (this.props.config.blogSidebarCount === 'ALL') {
         blogSidebarCount = MetadataBlog.length;
         blogSidebarTitle = blogSidebarTitleConfig.all || 'All Blog Posts';
       } else {

lib/core/Doc.js

@@ -43,7 +43,7 @@ class Doc extends React.Component {
     // If internationalization is enabled, show Recruiting link instead of Edit Link.
     if (
       this.props.language &&
-      this.props.language != 'en' &&
+      this.props.language !== 'en' &&
       this.props.config.translationRecruitingLink
     ) {
       editLink = (

lib/core/DocsLayout.js

@@ -5,16 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const classNames = require('classnames');
+const path = require('path');
 const React = require('react');
+const url = require('url');
+
 const Container = require('./Container.js');
 const Doc = require('./Doc.js');
 const DocsSidebar = require('./DocsSidebar.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const Site = require('./Site.js');
 const translation = require('../server/translation.js');
-const classNames = require('classnames');
-const path = require('path');
-const url = require('url');
 
 // component used to generate whole webpage for docs, including sidebar/header/footer
 class DocsLayout extends React.Component {