Style/husky eslint prettier

style: Add eslint husky and prettier to format code
kwinyyyc · Jun 18, 2020 · 47c8085 · 47c8085
1 parent 9a00e6d
commit 47c8085
Show file tree

Hide file tree

Showing 17 changed files with 1,478 additions and 220 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+webpack.config.*
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,19 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "env": {
+    "commonjs": true,
+    "es6": true,
+    "node": true,
+    "browser": false
+  },
+  "globals": {
+    "strapi": true,
+    "alert": true,
+    "window": true
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "react/prop-types": "warn"
+  }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+node_modules
+.cache
+.tmp
+build
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "trailingComma": "all",
+  "arrowParens": "always"
+}
diff --git a/admin/src/index.js b/admin/src/index.js
@@ -1,12 +1,11 @@
-import pluginPkg from "../../package.json";
-import pluginId from "./pluginId";
-import Initializer from "./containers/Initializer";
-import lifecycles from "./lifecycles";
-import trads from "./translations";
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './containers/Initializer';
+import lifecycles from './lifecycles';
+import trads from './translations';
 
 export default (strapi) => {
-  const pluginDescription =
-    pluginPkg.strapi.description || pluginPkg.description;
+  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 
   const plugin = {
     blockerComponent: null,

diff --git a/admin/src/pluginId.js b/admin/src/pluginId.js
@@ -1,7 +1,4 @@
 const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
 
 module.exports = pluginId;
diff --git a/admin/src/utils/getTrad.js b/admin/src/utils/getTrad.js
@@ -1,5 +1,5 @@
 import pluginId from '../pluginId';
 
-const getTrad = id => `${pluginId}.${id}`;
+const getTrad = (id) => `${pluginId}.${id}`;
 
 export default getTrad;
diff --git a/controllers/image-api.js b/controllers/image-api.js
@@ -1,9 +1,9 @@
-"use strict";
-const axios = require("axios");
-const _ = require("lodash");
-const FileType = require("file-type");
-const { v4: uuidv4 } = require("uuid");
-const pluginId = require("../admin/src/pluginId");
+'use strict';
+const axios = require('axios');
+const _ = require('lodash');
+const FileType = require('file-type');
+const { v4: uuidv4 } = require('uuid');
+const pluginId = require('../admin/src/pluginId');
 
 /**
  * image-api.js controller
@@ -20,62 +20,51 @@ module.exports = {
   searchUnsplashImages: async (ctx) => {
     const { pageNumber, query, pageCount } = ctx.request.body;
     const { providerOptions } = strapi.plugins[pluginId].config;
-    if (!providerOptions || !providerOptions["unsplash"]) {
+    if (!providerOptions || !providerOptions['unsplash']) {
       return;
     }
-    const { accessKey } = providerOptions["unsplash"];
+    const { accessKey } = providerOptions['unsplash'];
     if (!accessKey) {
-      throw new Error("Access Key must be provided");
+      throw new Error('Access Key must be provided');
     }
     const result = await axios
-      .get(
-        `https://api.unsplash.com/search/photos?page=${pageNumber}&query=${query}&pageCount=${pageCount}`,
-        {
-          headers: {
-            Authorization: `Client-ID ${accessKey}`,
-          },
-        }
-      )
+      .get(`https://api.unsplash.com/search/photos?page=${pageNumber}&query=${query}&pageCount=${pageCount}`, {
+        headers: {
+          Authorization: `Client-ID ${accessKey}`,
+        },
+      })
       .catch(({ message }) => {
-        alert("failed to get image " + message);
+        alert('failed to get image ' + message);
       });
     const { data } = result;
     return data;
   },
   importUnsplashImage: async (ctx) => {
-    const {
-      id,
-      fileName = uuidv4(),
-      altText = null,
-      caption = null,
-    } = ctx.request.body;
+    const { id, fileName = uuidv4(), altText = null, caption = null } = ctx.request.body;
     if (!id || !fileName) {
       // throw error
       return;
     }
     const { providerOptions } = strapi.plugins[pluginId].config;
-    if (!providerOptions || !providerOptions["unsplash"]) {
+    if (!providerOptions || !providerOptions['unsplash']) {
       return;
     }
-    const { accessKey, appName = "" } = providerOptions["unsplash"];
+    const { accessKey, appName = '' } = providerOptions['unsplash'];
     if (!accessKey) {
-      throw new Error("Access Key must be provided");
+      throw new Error('Access Key must be provided');
     }
-    const response = await axios.get(
-      `https://api.unsplash.com/photos/${id}/download`,
-      {
-        headers: {
-          authorization: `Client-ID ${accessKey}`,
-        },
-      }
-    );
+    const response = await axios.get(`https://api.unsplash.com/photos/${id}/download`, {
+      headers: {
+        authorization: `Client-ID ${accessKey}`,
+      },
+    });
     const getImageUrl = response.data.url;
     const imageResponse = await axios.get(getImageUrl, {
-      responseType: "arraybuffer",
+      responseType: 'arraybuffer',
     });
     const readBuffer = Buffer.from(imageResponse.data);
-    const { ext, mime } = await FileType.fromBuffer(readBuffer);
-    const { optimize } = strapi.plugins.upload.services["image-manipulation"];
+    const { mime } = await FileType.fromBuffer(readBuffer);
+    const { optimize } = strapi.plugins.upload.services['image-manipulation'];
     const { buffer, info } = await optimize(readBuffer);
     const metas = {};
     const fileInfo = { alternativeText: altText, caption };
@@ -85,15 +74,13 @@ module.exports = {
         type: mime,
       },
       fileInfo,
-      metas
+      metas,
     );
 
     const fileData = _.assign(formattedFile, info, {
       buffer,
     });
-    const result = await strapi.plugins.upload.services.upload.uploadFileAndPersist(
-      fileData
-    );
+    const result = await strapi.plugins.upload.services.upload.uploadFileAndPersist(fileData);
     const { url } = result;
     ctx.send({
       url,

diff --git a/example/extensions/content-manager/admin/src/components/WysiwygWithErrors/index.js b/example/extensions/content-manager/admin/src/components/WysiwygWithErrors/index.js
@@ -4,17 +4,17 @@
  *
  */
 
-import React from "react";
-import PropTypes from "prop-types";
-import { isEmpty, isFunction } from "lodash";
-import cn from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty, isFunction } from 'lodash';
+import cn from 'classnames';
 
-import { Description, ErrorMessage, Label } from "@buffetjs/styles";
-import { Error } from "@buffetjs/core";
+import { Description, ErrorMessage, Label } from '@buffetjs/styles';
+import { Error } from '@buffetjs/core';
 
-import Wysiwyg from "../Wysiwyg";
-import Wrapper from "./Wrapper";
-import { ImageApiPanel } from "strapi-plugin-image-api/build";
+import Wysiwyg from '../Wysiwyg';
+import Wrapper from './Wrapper';
+import { ImageApiPanel } from 'strapi-plugin-image-api/build';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class WysiwygWithErrors extends React.Component {
@@ -42,27 +42,14 @@ class WysiwygWithErrors extends React.Component {
     } = this.props;
 
     return (
-      <Error
-        inputError={inputError}
-        name={name}
-        type="text"
-        validations={validations}
-      >
+      <Error inputError={inputError} name={name} type="text" validations={validations}>
         {({ canCheck, onBlur, error, dispatch }) => {
           const hasError = error && error !== null;
 
           return (
-            <Wrapper
-              className={`${cn(!isEmpty(className) && className)} ${
-                hasError ? "bordered" : ""
-              }`}
-              style={style}
-            >
+            <Wrapper className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`} style={style}>
               <Label htmlFor={name}>{label}</Label>
-              <ImageApiPanel
-                editor={{ value, name }}
-                onEditorChange={onChange}
-              />
+              <ImageApiPanel editor={{ value, name }} onEditorChange={onChange} />
               <Wysiwyg
                 {...rest}
                 autoFocus={autoFocus}
@@ -75,12 +62,12 @@ class WysiwygWithErrors extends React.Component {
                 onChange={(e) => {
                   if (!canCheck) {
                     dispatch({
-                      type: "SET_CHECK",
+                      type: 'SET_CHECK',
                     });
                   }
 
                   dispatch({
-                    type: "SET_ERROR",
+                    type: 'SET_ERROR',
                     error: null,
                   });
                   onChange(e);
@@ -91,9 +78,7 @@ class WysiwygWithErrors extends React.Component {
                 tabIndex={tabIndex}
                 value={value}
               />
-              {!hasError && inputDescription && (
-                <Description>{inputDescription}</Description>
-              )}
+              {!hasError && inputDescription && <Description>{inputDescription}</Description>}
               {hasError && <ErrorMessage>{error}</ErrorMessage>}
             </Wrapper>
           );
@@ -105,20 +90,20 @@ class WysiwygWithErrors extends React.Component {
 
 WysiwygWithErrors.defaultProps = {
   autoFocus: false,
-  className: "",
+  className: '',
   deactivateErrorHighlight: false,
   didCheckErrors: false,
   disabled: false,
   error: null,
-  inputClassName: "",
-  inputDescription: "",
+  inputClassName: '',
+  inputDescription: '',
   inputStyle: {},
-  label: "",
+  label: '',
   onBlur: false,
-  placeholder: "",
+  placeholder: '',
   resetProps: false,
   style: {},
-  tabIndex: "0",
+  tabIndex: '0',
   validations: {},
   value: null,
 };

diff --git a/example/extensions/users-permissions/config/jwt.js b/example/extensions/users-permissions/config/jwt.js
@@ -1,3 +1,3 @@
 module.exports = {
-  jwtSecret: process.env.JWT_SECRET || '0528903e-1e80-411a-95df-cd2af6d2eb7a'
-};
+  jwtSecret: process.env.JWT_SECRET || '0528903e-1e80-411a-95df-cd2af6d2eb7a',
+};
diff --git a/index.js b/index.js
@@ -1,3 +1,3 @@
-import ImageApiPanel from "./src/components/ImageApi/ImageApiPanel";
+import ImageApiPanel from './src/components/ImageApi/ImageApiPanel';
 
 export { ImageApiPanel };
diff --git a/package.json b/package.json
@@ -3,6 +3,17 @@
   "version": "0.0.0",
   "description": "This is the description of the plugin.",
   "main": "./index.js",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npx prettier --write",
+      "eslint *.js --fix-dry-run"
+    ]
+  },
   "strapi": {
     "name": "Image Api",
     "icon": "plug",
@@ -12,7 +23,8 @@
     "prepublish": "npm run build",
     "start": "webpack --watch",
     "build": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "format": "prettier --config .prettierrc  \"**/*.{js,html,md}\" --write"
   },
   "author": {
     "name": "Kwinten",
@@ -37,9 +49,17 @@
     "@babel/preset-react": "^7.10.1",
     "@buffetjs/core": "^3.1.1",
     "@buffetjs/custom": "^3.1.1",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "css-loader": "^3.5.3",
+    "eslint": "^7.2.0",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.20.0",
     "file-loader": "^6.0.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.11",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "strapi-helper-plugin": "^3.0.0",

diff --git a/services/image-api.js b/services/image-api.js
@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 /**
  * image-api.js service