chore: setup eslint

.github/workflows/main.yml

@@ -1,5 +1,8 @@
 name: CI
 
+env:
+  NODE: 20
+
 on:
   - 'pull_request'
 
@@ -18,7 +21,18 @@ jobs:
           path: .svgo
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: ${{ env.NODE }}
           cache: 'yarn'
       - run: yarn install --immutable
       - run: yarn run build
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE }}
+          cache: 'yarn'
+      - run: yarn install --immutable
+      - run: yarn run lint

docusaurus.config.js

@@ -19,20 +19,20 @@ const { themes } = require('prism-react-renderer');
  * @type {Config}
  */
 const config = {
-  title: "SVGO",
-  favicon: "img/favicon.ico",
-  url: "https://svgo.dev",
-  baseUrl: "/",
+  title: 'SVGO',
+  favicon: 'img/favicon.ico',
+  url: 'https://svgo.dev',
+  baseUrl: '/',
   baseUrlIssueBanner: false,
-  organizationName: "svg",
-  projectName: "svgo.dev",
+  organizationName: 'svg',
+  projectName: 'svgo.dev',
   trailingSlash: true,
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "throw",
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'throw',
   i18n: {
-    defaultLocale: "en",
+    defaultLocale: 'en',
     locales: [
-      "en"
+      'en'
     ],
   },
   markdown: {
@@ -72,33 +72,33 @@ const config = {
   },
   plugins: [
     [
-      "@docusaurus/theme-classic",
+      '@docusaurus/theme-classic',
       {
-        customCss: require.resolve("./src/css/custom.css"),
+        customCss: require.resolve('./src/css/custom.css'),
       },
     ],
     [
-      "@docusaurus/plugin-content-pages",
+      '@docusaurus/plugin-content-pages',
       {
-        path: "src/pages",
-        routeBasePath: "/"
+        path: 'src/pages',
+        routeBasePath: '/'
       }
     ],
     [
-      "@docusaurus/plugin-content-docs",
+      '@docusaurus/plugin-content-docs',
       {
-        path: ".svgo/docs",
+        path: '.svgo/docs',
         breadcrumbs: true,
-        sidebarPath: require.resolve("./sidebars.js"),
+        sidebarPath: require.resolve('./sidebars.js'),
         editUrl: ({ docPath }) => `https://github.com/svg/svgo/tree/main/docs/${docPath}`,
       }
     ],
     [
-      "@docusaurus/plugin-sitemap",
+      '@docusaurus/plugin-sitemap',
       {
-        filename: "sitemap.xml",
+        filename: 'sitemap.xml',
         ignorePatterns: [
-          "/.well-known/**"
+          '/.well-known/**'
         ],
         createSitemapItems: async (params) => {
           const { defaultCreateSitemapItems, ...rest } = params;
@@ -108,11 +108,11 @@ const config = {
           items = items.map((item) => {
             const pathname = new URL(item.url).pathname;
 
-            if (pathname === "/") {
+            if (pathname === '/') {
               item.priority = 1;
-            } else if (pathname === "/search/") {
+            } else if (pathname === '/search/') {
               item.priority = 0.1;
-              item.changefreq = "monthly";
+              item.changefreq = 'monthly';
             }
 
             return item;
@@ -122,19 +122,19 @@ const config = {
         },
       }
     ],
-    "./src/plugins/prefers-color-scheme.js",
-    "./src/plugins/configure-svgo.js"
+    './src/plugins/prefers-color-scheme.js',
+    './src/plugins/configure-svgo.js'
   ],
   themes: [
     '@docusaurus/theme-live-codeblock',
     [
-      require.resolve("@easyops-cn/docusaurus-search-local"),
+      require.resolve('@easyops-cn/docusaurus-search-local'),
       {
         indexDocs: true,
         indexBlog: false,
-        language: "en",
+        language: 'en',
         hashed: true,
-        searchBarPosition: "right"
+        searchBarPosition: 'right'
       }
     ]
   ],
@@ -146,20 +146,20 @@ const config = {
     navbar: {
       items: [
         {
-          type: "docSidebar",
-          position: "left",
-          sidebarId: "docsSidebar",
-          label: "Documentation"
+          type: 'docSidebar',
+          position: 'left',
+          sidebarId: 'docsSidebar',
+          label: 'Documentation'
         },
         {
-          href: "https://jakearchibald.github.io/svgomg/",
-          position: "left",
-          label: "Playground"
+          href: 'https://jakearchibald.github.io/svgomg/',
+          position: 'left',
+          label: 'Playground'
         },
         {
-          href: "https://github.com/svg/svgo",
-          position: "right",
-          html: `<img src="https://img.shields.io/github/stars/svg/svgo?style=social" alt="" height="20" width="88"/>`,
+          href: 'https://github.com/svg/svgo',
+          position: 'right',
+          html: '<img src="https://img.shields.io/github/stars/svg/svgo?style=social" alt="" height="20" width="88"/>',
           className: 'github-shield',
           'aria-label': 'GitHub repository'
         }
@@ -172,28 +172,28 @@ const config = {
     footer: {
       links: [
         {
-          title: "Community",
+          title: 'Community',
           items: [
             {
-              label: "Stack Overflow",
-              href: "https://stackoverflow.com/questions/tagged/svgo",
+              label: 'Stack Overflow',
+              href: 'https://stackoverflow.com/questions/tagged/svgo',
             },
             {
-              label: "Discord",
-              href: "https://discord.com/invite/z8jX8NYxrE",
+              label: 'Discord',
+              href: 'https://discord.com/invite/z8jX8NYxrE',
             }
           ],
         },
         {
-          title: "More",
+          title: 'More',
           items: [
             {
-              label: "GitHub",
-              href: "https://github.com/svg/svgo",
+              label: 'GitHub',
+              href: 'https://github.com/svg/svgo',
             },
             {
-              label: "Open Collective",
-              href: "https://opencollective.com/svgo"
+              label: 'Open Collective',
+              href: 'https://opencollective.com/svgo'
             }
           ]
         }

eslint.config.mjs

@@ -0,0 +1,51 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import pluginReact from 'eslint-plugin-react';
+
+/**
+ * @typedef {import("eslint").Linter.Config} Config
+ */
+
+/** @type {Config[]} */
+export default [
+  {
+    ignores: [
+      '.docusaurus/',
+      '.svgo/',
+      '.yarn/',
+      'build/',
+      'node_modules/',
+      'yarn.lock'
+    ]
+  },
+  {
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,jsx}']
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      }
+    }
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    rules: {
+      'object-curly-spacing': ['error', 'always'],
+      'quotes': ['error', 'single'],
+      'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+      'react/jsx-indent-props': ['error', 2],
+      'react/jsx-max-props-per-line': ['error', { maximum: { 'single': 9, 'multi': 1 } }],
+      'react/prop-types': 'off',
+    }
+  }
+];

package.json

@@ -38,7 +38,8 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@docusaurus/core": "^3.3.2",
@@ -55,5 +56,11 @@
     "react-dom": "^18.3.1",
     "rehype-stringify": "^10.0.0",
     "svgo": "^3.3.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react": "^7.35.2",
+    "globals": "^15.9.0"
   }
 }

src/components/HomepageFeatures/index.jsx

@@ -46,7 +46,7 @@ function Feature({ Svg, title, description }) {
         <div className="text--center">
           <Svg className={styles.featureSvg} role="img"/>
         </div>
-        <div className={clsx(styles.featureText, "padding-horiz--md")}>
+        <div className={clsx(styles.featureText, 'padding-horiz--md')}>
           <h2 className={styles.featureTitle}>{title}</h2>
           <p className={styles.featureDescription}>{description}</p>
         </div>

src/components/PluginParams/index.jsx

@@ -20,7 +20,7 @@ export default function PluginParams() {
           <dt>
             <code>{param.name}</code>
           </dt>
-          <dd className={styles.leftMargin} dangerouslySetInnerHTML={{__html: param.description}}>
+          <dd className={styles.leftMargin} dangerouslySetInnerHTML={{ __html: param.description }}>
           </dd>
         </Fragment>
       ))}

src/components/PluginUsage/index.jsx

@@ -25,7 +25,7 @@ export default function PluginUsage() {
   let paramsTemplate = Object.keys(parameters)
     .filter((key) => parameters[key] && parameters[key].default !== undefined)
     .map((param) => `        ${param}: ${JSON.stringify(parameters[param].default)}`)
-    .join(",\n");
+    .join(',\n');
 
   return (
     <Tabs>

src/components/SvgDemo/index.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import CodeBlock from "@theme/CodeBlock";
+import React, { useState } from 'react';
+import CodeBlock from '@theme/CodeBlock';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import styles from "./index.module.css";
+import styles from './index.module.css';
 
 export default function SvgPreview(props) {
   const [ error, setError ] = useState(false);

src/components/SvgoPreview/index.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { optimize } from "svgo/dist/svgo.browser.js";
+import React from 'react';
+import { optimize } from 'svgo/dist/svgo.browser.js';
 import SvgPreview from '../SvgDemo';
-import styles from "./index.module.css";
+import styles from './index.module.css';
 
 export default function SvgoPreview(props) {
   const { svg, svgoConfig } = props;
@@ -12,10 +12,10 @@ export default function SvgoPreview(props) {
   const optimizedSize = optimized.length;
   const profit = 100 - (optimizedSize * 100) / initialSize;
 
-  const initialUi = Math.round((initialSize / 1024) * 1000) / 1000 + " KiB"
-  const optimizedUi = Math.round((optimizedSize / 1024) * 1000) / 1000 + " KiB"
-  const directionUi = (profit < 0 ? "+" : "-");
-  const profitUi = Math.abs(Math.round(profit * 10) / 10) + "%";
+  const initialUi = Math.round((initialSize / 1024) * 1000) / 1000 + ' KiB'
+  const optimizedUi = Math.round((optimizedSize / 1024) * 1000) / 1000 + ' KiB'
+  const directionUi = (profit < 0 ? '+' : '-');
+  const profitUi = Math.abs(Math.round(profit * 10) / 10) + '%';
 
   return (
     <>

src/pages/index.js

@@ -9,7 +9,7 @@ import HomepageFeatures from '../../src/components/HomepageFeatures';
 import styles from './index.module.css';
 import SvgoTrixie from '../vectors/svgo_trixie.svg';
 
-const INSTALL_COMMAND = "npm i -g svgo";
+const INSTALL_COMMAND = 'npm i -g svgo';
 
 const onClick = async () => {
   navigator.clipboard.writeText(INSTALL_COMMAND);
@@ -18,7 +18,7 @@ const onClick = async () => {
 function HomepageHeader() {
   return (
     <header className={styles.hero}>
-      <div className={clsx(styles.heroSplit, "container")}>
+      <div className={clsx(styles.heroSplit, 'container')}>
         <div className={styles.infoSection}>
           <p className={styles.tagline}>
             SVG Optimizer for Node.js and CLI