ESLintify Part 2

.eslintrc.js

@@ -12,39 +12,30 @@ module.exports = {
   parser: 'babel-eslint',
   extends: ['airbnb', 'prettier'],
   rules: {
-    // allow console
-    'no-console': OFF,
-    // require radix argument in parseInt
+    'no-console': OFF, // We have console.error, console.warn, etc.
     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}],
+    'no-param-reassign': OFF,
+    'no-plusplus': OFF,
+    'import/no-extraneous-dependencies': OFF,
+    'react/jsx-closing-bracket-location': OFF, // Formatting is left to Prettier.
+    'react/jsx-filename-extension': OFF, // Enable in future when migrating.
+    'react/no-danger': OFF, // Need this to inject scripts.
+    'react/no-multi-comp': OFF, // One component per file creates too many files.
+    'react/no-unescaped-entities': [ERROR, {forbid: ['>', '}']}],
 
     // Existing ESLint errors sorted by frequency, silencing first.
     'react/button-has-type': OFF, // 1
     'react/forbid-prop-types': OFF, // 1
     'react/require-default-props': OFF, // 1
     'jsx-a11y/anchor-is-valid': OFF, // 9
-    'arrow-body-style': OFF, // 10
-    'react/jsx-curly-brace-presence': OFF, // 11
-    'react/no-unescaped-entities': OFF, // 12
-    'no-param-reassign': OFF, // 12
-    'spaced-comment': OFF, // 14
     'import/no-unresolved': OFF, // 15
-    'object-shorthand': OFF, // 16
-    'dot-notation': OFF, // 19
     'react/prefer-stateless-function': OFF, // 22
-    'no-plusplus': OFF, // 23
     'prefer-arrow-callback': OFF, // 30
-    'react/jsx-filename-extension': OFF, // 31
-    'import/newline-after-import': OFF, // 31
-    'react/jsx-closing-bracket-location': OFF, // 36
     'func-names': OFF, // 37
     'import/no-dynamic-require': OFF, // 46
     'prefer-destructuring': OFF, // 69
-    'prefer-const': OFF, // 71
     'global-require': OFF, // 85
     'react/jsx-one-expression-per-line': OFF, // 129
     'react/prop-types': OFF, // 197

examples/basics/pages/en/help.js

@@ -8,6 +8,7 @@
 const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
+
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
@@ -19,7 +20,7 @@ function docUrl(doc, language) {
 
 class Help extends React.Component {
   render() {
-    let language = this.props.language || '';
+    const language = this.props.language || '';
     const supportLinks = [
       {
         content: `Learn more using the [documentation on this site.](${docUrl(

examples/basics/pages/en/index.js

@@ -8,6 +8,7 @@
 const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
+
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
@@ -73,7 +74,7 @@ const PromoSection = props => (
 
 class HomeSplash extends React.Component {
   render() {
-    let language = this.props.language || '';
+    const language = this.props.language || '';
     return (
       <SplashContainer>
         <Logo img_src={imgUrl('docusaurus.svg')} />
@@ -179,7 +180,7 @@ const Showcase = props => {
 
   return (
     <div className="productShowcaseSection paddingBottom">
-      <h2>Who's Using This?</h2>
+      <h2>Who is Using This?</h2>
       <p>This project is used by all these people</p>
       <div className="logos">{showcase}</div>
       <div className="more-users">
@@ -193,7 +194,7 @@ const Showcase = props => {
 
 class Index extends React.Component {
   render() {
-    let language = this.props.language || '';
+    const language = this.props.language || '';
 
     return (
       <div>

examples/basics/pages/en/users.js

@@ -8,6 +8,7 @@
 const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
+
 const Container = CompLibrary.Container;
 
 const siteConfig = require(process.cwd() + '/siteConfig.js');
@@ -30,7 +31,7 @@ class Users extends React.Component {
         <Container padding={['bottom', 'top']}>
           <div className="showcaseSection">
             <div className="prose">
-              <h1>Who's Using This?</h1>
+              <h1>Who is Using This?</h1>
               <p>This project is used by many folks</p>
             </div>
             <div className="logos">{showcase}</div>

examples/basics/siteConfig.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// See https://docusaurus.io/docs/site-config.html for all the possible
+// See https://docusaurus.io/docs/site-config for all the possible
 // site configuration options.
 
-/* List of projects/orgs using your project for the users page */
+// List of projects/orgs using your project for the users page.
 const users = [
   {
     caption: 'User1',
@@ -21,10 +21,10 @@ const users = [
 ];
 
 const siteConfig = {
-  title: 'Test Site' /* title for your website */,
+  title: 'Test Site', // Title for your website.
   tagline: 'A website for testing',
-  url: 'https://your-docusaurus-test-site.com' /* your website url */,
-  baseUrl: '/' /* base url for your project */,
+  url: 'https://your-docusaurus-test-site.com', // Your website URL
+  baseUrl: '/', // Base URL for your project */
   // For github.io type URLs, you would set the url and baseUrl like:
   //   url: 'https://facebook.github.io',
   //   baseUrl: '/test-site/',
@@ -52,14 +52,15 @@ const siteConfig = {
   footerIcon: 'img/docusaurus.svg',
   favicon: 'img/favicon.png',
 
-  /* colors for website */
+  /* Colors for website */
   colors: {
     primaryColor: '#2E8555',
     secondaryColor: '#205C3B',
   },
 
-  /* custom fonts for website */
-  /*fonts: {
+  /* Custom fonts for website */
+  /*
+  fonts: {
     myFont: [
       "Times New Roman",
       "Serif"
@@ -68,26 +69,29 @@ const siteConfig = {
       "-apple-system",
       "system-ui"
     ]
-  },*/
+  },
+  */
 
-  // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
+  // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
   copyright:
     'Copyright © ' +
     new Date().getFullYear() +
     ' Your Name or Your Company Name',
 
   highlight: {
-    // Highlight.js theme to use for syntax highlighting in code blocks
+    // Highlight.js theme to use for syntax highlighting in code blocks.
     theme: 'default',
   },
 
-  // Add custom scripts here that would be placed in <script> tags
+  // Add custom scripts here that would be placed in <script> tags.
   scripts: ['https://buttons.github.io/buttons.js'],
 
-  /* On page navigation for the current documentation page */
+  // On page navigation for the current documentation page.
   onPageNav: 'separate',
+  // No .html extensions for paths.
+  cleanUrl: true,
 
-  /* Open Graph and Twitter card images */
+  // Open Graph and Twitter card images.
   ogImage: 'img/docusaurus.png',
   twitterImage: 'img/docusaurus.png',
 

examples/translations/pages/en/help-with-translations.js

@@ -8,6 +8,7 @@
 const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
+
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 

examples/versions/pages/en/versions.js

@@ -8,6 +8,7 @@
 const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary');
+
 const Container = CompLibrary.Container;
 
 const CWD = process.cwd();
@@ -34,10 +35,10 @@ function Versions() {
               <tr>
                 <th>{latestVersion}</th>
                 <td>
-                  <a href={''}>Documentation</a>
+                  <a href="">Documentation</a>
                 </td>
                 <td>
-                  <a href={''}>Release Notes</a>
+                  <a href="">Release Notes</a>
                 </td>
               </tr>
             </tbody>
@@ -52,10 +53,10 @@ function Versions() {
               <tr>
                 <th>master</th>
                 <td>
-                  <a href={''}>Documentation</a>
+                  <a href="">Documentation</a>
                 </td>
                 <td>
-                  <a href={''}>Release Notes</a>
+                  <a href="">Release Notes</a>
                 </td>
               </tr>
             </tbody>
@@ -70,10 +71,10 @@ function Versions() {
                     <tr>
                       <th>{version}</th>
                       <td>
-                        <a href={''}>Documentation</a>
+                        <a href="">Documentation</a>
                       </td>
                       <td>
-                        <a href={''}>Release Notes</a>
+                        <a href="">Release Notes</a>
                       </td>
                     </tr>
                   )

lib/__tests__/build-files.test.js

@@ -15,6 +15,7 @@ const shell = require('shelljs');
 const CWD = process.cwd();
 
 const utils = require('../server/utils');
+
 const siteConfig = require(CWD + '/website/siteConfig.js');
 const buildDir = CWD + '/website/build';
 const docsDir = CWD + '/docs';
@@ -67,11 +68,9 @@ describe('Build files', () => {
   });
 
   test('Generated HTML for each Markdown resource', function() {
-    let metadata = [];
-    outputHTMLFiles.forEach(function(file) {
-      const path = filepath.create(file);
-      metadata.push(path.basename());
-    });
+    const metadata = outputHTMLFiles.map(file =>
+      filepath.create(file).basename()
+    );
     inputMarkdownFiles.forEach(function(file) {
       const data = fs.readFileSync(file, 'utf8');
       const frontmatter = fm(data);
@@ -105,11 +104,9 @@ describe('Build files', () => {
   });
 
   test('Copied assets from /docs/assets', function() {
-    let metadata = [];
-    outputAssetsFiles.forEach(function(file) {
-      const path = filepath.create(file);
-      metadata.push(path.basename());
-    });
+    const metadata = outputAssetsFiles.map(file =>
+      filepath.create(file).basename()
+    );
     inputAssetsFiles.forEach(function(file) {
       const path = filepath.create(file);
       expect(metadata).toContain(path.basename());

lib/build-files.js

@@ -22,6 +22,7 @@ require('babel-register')({
 // initial check that required files are present
 const chalk = require('chalk');
 const fs = require('fs');
+
 const CWD = process.cwd();
 
 if (!fs.existsSync(CWD + '/siteConfig.js')) {
@@ -33,6 +34,7 @@ if (!fs.existsSync(CWD + '/siteConfig.js')) {
 
 // generate all static html files
 const generate = require('./server/generate.js');
+
 generate()
   .then(() => {
     console.log("Site built successfully. Generated files in 'build' folder.");

lib/copy-examples.js

@@ -32,13 +32,13 @@ if (fs.existsSync(CWD + '/package.json')) {
   if (!packageContent.scripts) {
     packageContent.scripts = {};
   }
-  packageContent.scripts['start'] = 'docusaurus-start';
-  packageContent.scripts['build'] = 'docusaurus-build';
+  packageContent.scripts.start = 'docusaurus-start';
+  packageContent.scripts.build = 'docusaurus-build';
   packageContent.scripts['publish-gh-pages'] = 'docusaurus-publish';
-  packageContent.scripts['examples'] = 'docusaurus-examples';
+  packageContent.scripts.examples = 'docusaurus-examples';
   packageContent.scripts['write-translations'] =
     'docusaurus-write-translations';
-  packageContent.scripts['version'] = 'docusaurus-version';
+  packageContent.scripts.version = 'docusaurus-version';
   packageContent.scripts['rename-version'] = 'docusaurus-rename-version';
   fs.writeFileSync(
     CWD + '/package.json',
@@ -69,7 +69,7 @@ if (feature === 'translations') {
     fs.copySync(folder + '/crowdin.yaml', CWD + '/../crowdin.yaml');
     exampleSiteCreated = true;
   }
-  let files = glob.sync(folder + '/**/*');
+  const files = glob.sync(folder + '/**/*');
   files.forEach(file => {
     if (fs.lstatSync(file).isDirectory()) {
       return;
@@ -97,7 +97,7 @@ if (feature === 'translations') {
 } else if (feature === 'versions') {
   // copy files for versions
   const folder = path.join(__dirname, '..', 'examples', 'versions');
-  let files = glob.sync(folder + '/**/*');
+  const files = glob.sync(folder + '/**/*');
   files.forEach(file => {
     if (fs.lstatSync(file).isDirectory()) {
       return;
@@ -171,7 +171,7 @@ if (feature === 'translations') {
   );
 
   // copy other files
-  let files = glob.sync(folder + '/**/*');
+  const files = glob.sync(folder + '/**/*');
   files.forEach(file => {
     if (fs.lstatSync(file).isDirectory()) {
       return;

lib/core/BlogPageLayout.js

@@ -41,20 +41,18 @@ class BlogPageLayout extends React.Component {
           <Container className="mainContainer postContainer blogContainer">
             <div className="posts">
               {MetadataBlog.slice(page * perPage, (page + 1) * perPage).map(
-                post => {
-                  return (
-                    <BlogPost
-                      post={post}
-                      content={post.content}
-                      truncate
-                      key={
-                        utils.getPath(post.path, this.props.config.cleanUrl) +
-                        post.title
-                      }
-                      config={this.props.config}
-                    />
-                  );
-                }
+                post => (
+                  <BlogPost
+                    post={post}
+                    content={post.content}
+                    truncate
+                    key={
+                      utils.getPath(post.path, this.props.config.cleanUrl) +
+                      post.title
+                    }
+                    config={this.props.config}
+                  />
+                )
               )}
               <div className="docs-prevnext">
                 {page > 0 && (