ESLintify Part 3

.eslintrc.js

@@ -15,12 +15,15 @@ module.exports = {
     'no-console': OFF, // We have console.error, console.warn, etc.
     radix: ERROR,
     'class-methods-use-this': OFF,
+    'func-names': OFF,
     'no-empty': [ERROR, {allowEmptyCatch: true}],
     'no-param-reassign': OFF,
     'no-plusplus': OFF,
+    'prefer-template': 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/jsx-one-expression-per-line': OFF, // Formatting is left to Prettier.
     '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: ['>', '}']}],
@@ -32,14 +35,10 @@ module.exports = {
     'jsx-a11y/anchor-is-valid': OFF, // 9
     'import/no-unresolved': OFF, // 15
     'react/prefer-stateless-function': OFF, // 22
-    'prefer-arrow-callback': OFF, // 30
-    'func-names': OFF, // 37
     'import/no-dynamic-require': OFF, // 46
     'prefer-destructuring': OFF, // 69
     'global-require': OFF, // 85
-    'react/jsx-one-expression-per-line': OFF, // 129
     'react/prop-types': OFF, // 197
-    'prefer-template': OFF, // 292
     'react/destructuring-assignment': OFF, // 342
   },
 };

examples/basics/core/Footer.js

@@ -10,12 +10,12 @@ const React = require('react');
 class Footer extends React.Component {
   docUrl(doc, language) {
     const baseUrl = this.props.config.baseUrl;
-    return baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+    return `${baseUrl}docs/${language ? `${language}/` : ''}${doc}`;
   }
 
   pageUrl(doc, language) {
     const baseUrl = this.props.config.baseUrl;
-    return baseUrl + (language ? language + '/' : '') + doc;
+    return baseUrl + (language ? `${language}/` : '') + doc;
   }
 
   render() {
@@ -65,7 +65,7 @@ class Footer extends React.Component {
           </div>
           <div>
             <h5>More</h5>
-            <a href={this.props.config.baseUrl + 'blog'}>Blog</a>
+            <a href={`${this.props.config.baseUrl}blog`}>Blog</a>
             <a href="https://github.com/">GitHub</a>
             <a
               className="github-button"
@@ -86,7 +86,7 @@ class Footer extends React.Component {
           rel="noreferrer noopener"
           className="fbOpenSource">
           <img
-            src={this.props.config.baseUrl + 'img/oss_logo.png'}
+            src={`${this.props.config.baseUrl}img/oss_logo.png`}
             alt="Facebook Open Source"
             width="170"
             height="45"

examples/basics/pages/en/help.js

@@ -12,10 +12,10 @@ const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
-const siteConfig = require(process.cwd() + '/siteConfig.js');
+const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 
 function docUrl(doc, language) {
-  return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+  return `${siteConfig.baseUrl}docs/${language ? `${language}/` : ''}${doc}`;
 }
 
 class Help extends React.Component {

examples/basics/pages/en/index.js

@@ -13,18 +13,18 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
-const siteConfig = require(process.cwd() + '/siteConfig.js');
+const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 
 function imgUrl(img) {
-  return siteConfig.baseUrl + 'img/' + img;
+  return `${siteConfig.baseUrl}img/${img}`;
 }
 
 function docUrl(doc, language) {
-  return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+  return `${siteConfig.baseUrl}docs/${language ? `${language}/` : ''}${doc}`;
 }
 
 function pageUrl(page, language) {
-  return siteConfig.baseUrl + (language ? language + '/' : '') + page;
+  return siteConfig.baseUrl + (language ? `${language}/` : '') + page;
 }
 
 class Button extends React.Component {

examples/basics/pages/en/users.js

@@ -11,15 +11,15 @@ const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
 
-const siteConfig = require(process.cwd() + '/siteConfig.js');
+const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 
 class Users extends React.Component {
   render() {
     if ((siteConfig.users || []).length === 0) {
       return null;
     }
 
-    const editUrl = siteConfig.repoUrl + '/edit/master/website/siteConfig.js';
+    const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
     const showcase = siteConfig.users.map(user => (
       <a href={user.infoLink} key={user.infoLink}>
         <img src={user.image} alt={user.caption} title={user.caption} />

examples/basics/siteConfig.js

@@ -73,10 +73,7 @@ const siteConfig = {
   */
 
   // 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',
+  copyright: `Copyright © ${new Date().getFullYear()} Your Name or Your Company Name`,
 
   highlight: {
     // Highlight.js theme to use for syntax highlighting in code blocks.

examples/versions/pages/en/versions.js

@@ -13,8 +13,8 @@ const Container = CompLibrary.Container;
 
 const CWD = process.cwd();
 
-const siteConfig = require(CWD + '/siteConfig.js');
-const versions = require(CWD + '/versions.json');
+const siteConfig = require(`${CWD}/siteConfig.js`);
+const versions = require(`${CWD}/versions.json`);
 
 function Versions() {
   const latestVersion = versions[0];

lib/__tests__/build-files.test.js

@@ -16,10 +16,10 @@ 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';
-const staticCSSDir = CWD + '/website/static/css';
+const siteConfig = require(`${CWD}/website/siteConfig.js`);
+const buildDir = `${CWD}/website/build`;
+const docsDir = `${CWD}/docs`;
+const staticCSSDir = `${CWD}/website/static/css`;
 
 let inputMarkdownFiles = [];
 let inputAssetsFiles = [];
@@ -43,11 +43,11 @@ describe('Build files', () => {
   beforeAll(() => {
     generateSite();
     return Promise.all([
-      glob(docsDir + '/**/*.md'),
-      glob(buildDir + '/' + siteConfig.projectName + '/docs/**/*.html'),
-      glob(docsDir + '/assets/*'),
-      glob(buildDir + '/' + siteConfig.projectName + '/img/*'),
-    ]).then(function(results) {
+      glob(`${docsDir}/**/*.md`),
+      glob(`${buildDir}/${siteConfig.projectName}/docs/**/*.html`),
+      glob(`${docsDir}/assets/*`),
+      glob(`${buildDir}/${siteConfig.projectName}/img/*`),
+    ]).then(results => {
       [
         inputMarkdownFiles,
         outputHTMLFiles,
@@ -61,34 +61,34 @@ describe('Build files', () => {
     clearBuildFolder();
   });
 
-  test('Build folder exists', function() {
-    return fs.stat(buildDir).then(function(status) {
+  test('Build folder exists', () =>
+    fs.stat(buildDir).then(status => {
       expect(status.isDirectory()).toBeTruthy();
-    });
-  });
+    }));
 
-  test('Generated HTML for each Markdown resource', function() {
+  test('Generated HTML for each Markdown resource', () => {
     const metadata = outputHTMLFiles.map(file =>
       filepath.create(file).basename()
     );
-    inputMarkdownFiles.forEach(function(file) {
+    inputMarkdownFiles.forEach(file => {
       const data = fs.readFileSync(file, 'utf8');
       const frontmatter = fm(data);
-      expect(metadata).toContain(frontmatter.attributes.id + '.html');
+      expect(metadata).toContain(`${frontmatter.attributes.id}.html`);
     });
   });
 
-  test('Generated table of contents', function() {
-    outputHTMLFiles.forEach(function(file) {
+  test('Generated table of contents', () => {
+    outputHTMLFiles.forEach(file => {
       const fileContents = fs.readFileSync(file, 'utf8');
       expect(fileContents).not.toContain('<AUTOGENERATED_TABLE_OF_CONTENTS>');
     });
   });
 
-  test('Concatenated CSS files', async function() {
-    const inputFiles = await glob(staticCSSDir + '/*.css');
-    const combinedCSSFile =
-      buildDir + '/' + siteConfig.projectName + '/css/main.css';
+  test('Concatenated CSS files', async () => {
+    const inputFiles = await glob(`${staticCSSDir}/*.css`);
+    const combinedCSSFile = `${buildDir}/${
+      siteConfig.projectName
+    }/css/main.css`;
     const fileContents = await Promise.all(
       [combinedCSSFile, ...inputFiles].map(file => fs.readFile(file, 'utf8'))
     );
@@ -103,11 +103,11 @@ describe('Build files', () => {
     });
   });
 
-  test('Copied assets from /docs/assets', function() {
+  test('Copied assets from /docs/assets', () => {
     const metadata = outputAssetsFiles.map(file =>
       filepath.create(file).basename()
     );
-    inputAssetsFiles.forEach(function(file) {
+    inputAssetsFiles.forEach(file => {
       const path = filepath.create(file);
       expect(metadata).toContain(path.basename());
     });

lib/build-files.js

@@ -10,7 +10,7 @@
 require('babel-polyfill');
 require('babel-register')({
   babelrc: false,
-  only: [__dirname, process.cwd() + '/core'],
+  only: [__dirname, `${process.cwd()}/core`],
   plugins: [
     require('./server/translate-plugin.js'),
     'transform-class-properties',
@@ -25,7 +25,7 @@ const fs = require('fs');
 
 const CWD = process.cwd();
 
-if (!fs.existsSync(CWD + '/siteConfig.js')) {
+if (!fs.existsSync(`${CWD}/siteConfig.js`)) {
   console.error(
     chalk.red('Error: No siteConfig.js file found in website folder!')
   );