refactor: update linting and imports

package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@ctrl/tinycolor": "^3.4.0",
     "@emotion/css": "^11.1.3",
-    "@figma/plugin-typings": "^1.98.0",
+    "@figma/plugin-typings": "^1.106.0",
     "@types/jest": "^28.1.1",
     "@types/react": "^18.0.13",
     "@types/react-dom": "^18.0.5",
@@ -108,12 +108,50 @@
       "browser": true,
       "es6": true
     },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "ignorePatterns": [
+      "dist",
+      "node_modules",
+      "examples",
+      "tests/**/*.js",
+      "*.config.js",
+      "*.d.ts"
+    ],
     "rules": {
       "default-param-last": 0,
       "no-return-assign": 0,
       "brace-style": 0,
       "no-use-before-define": "off",
-      "@typescript-eslint/no-use-before-define": "error"
+      "quotes": [
+        "error",
+        "single"
+      ],
+      "semi": [
+        "error",
+        "never"
+      ],
+      "comma-dangle": [
+        "error",
+        "only-multiline"
+      ],
+      "@typescript-eslint/no-use-before-define": "error",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ]
     }
   },
   "jest": {
@@ -142,10 +180,13 @@
     ],
     "moduleNameMapper": {
       "^@config/(.*)$": "<rootDir>/src/config/$1",
+      "^@ui/(.*)$": "<rootDir>/src/ui/$1",
+      "^@utils/(.*)$": "<rootDir>/src/utilities/$1",
+      "^@typings/(.*)$": "<rootDir>/types/$1",
       "^@src/(.*)$": "<rootDir>/src/$1"
     }
   },
   "dependencies": {
     "react-dev-utils": "^12.0.1"
   }
-}
+}

src/extractor/extractBorders.ts

@@ -2,7 +2,7 @@ import extractorInterface from '@typings/extractorInterface'
 import { borderPropertyInterface } from '@typings/propertyObject'
 import { StrokeCap, StrokeAlign, PropertyType } from '@typings/valueTypes'
 import { customTokenNode } from '@typings/tokenNodeTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { tokenTypes } from '@config/tokenTypes'
 import { filterByPrefix } from './extractUtilities'
 import { tokenCategoryType } from '@typings/tokenCategory'

src/extractor/extractBreakpoints.ts

@@ -3,7 +3,7 @@ import { breakpointPropertyInterface } from '@typings/propertyObject'
 import { customTokenNode } from '@typings/tokenNodeTypes'
 import { UnitTypePixel, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { filterByPrefix } from './extractUtilities'
 import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'

src/extractor/extractColors.ts

@@ -3,8 +3,8 @@ import { colorPropertyInterface, fillValuesType, gradientValuesType } from '@typ
 import { PaintStyleObject } from '@typings/styles'
 import { GradientType, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import { convertPaintToRgba, roundRgba } from '../utilities/convertColor'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import { convertPaintToRgba, roundRgba } from '@utils/convertColor'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'
 import config from '@config/config'
@@ -17,7 +17,7 @@ const transparentFill: fillValuesType = {
   }
 }
 
-const parseDescription = (description: string = '', aliasArray: string[]) => {
+const parseDescription = (description = '', aliasArray: string[]) => {
   aliasArray = !aliasArray || aliasArray.filter(i => i).length === 0 ? ['Ref:'] : aliasArray
   const regex = new RegExp('(' + aliasArray.join('|').toLowerCase() + ')' + ':?\\s')
   // split description in lines
@@ -98,7 +98,7 @@ const extractFills = (paint): fillValuesType | gradientValuesType => {
   return null
 }
 
-const extractColors: extractorInterface = (tokenNodes: PaintStyleObject[], prefixArray: {color: string[], gradient: string[], alias: string[]}): colorPropertyInterface[] => {
+const extractColors: extractorInterface = (tokenNodes: PaintStyleObject[], prefixArray: { color: string[], gradient: string[], alias: string[] }): colorPropertyInterface[] => {
   // get all paint styles
   return tokenNodes
     .reduce((previousValue, node) => {

src/extractor/extractEffects.ts

@@ -2,7 +2,7 @@ import extractorInterface from '@typings/extractorInterface'
 import { effectPropertyInterface } from '@typings/propertyObject'
 import { EffectType, UnitTypePixel, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import { roundRgba } from '../utilities/convertColor'
+import { roundRgba } from '@utils/convertColor'
 import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'
 import config from '@config/config'
@@ -64,7 +64,7 @@ const extractEffects: extractorInterface = (tokenNodes: EffectStyle[], prefixArr
   return tokenNodes
     // remove tokens with no grid
     .filter(node => node.effects.length > 0)
-  // build
+    // build
     .map(node => ({
       name: `${prefixArray[0]}/${node.name}`,
       category: 'effect' as tokenCategoryType,

src/extractor/extractFonts.ts

@@ -2,7 +2,7 @@ import extractorInterface from '@typings/extractorInterface'
 import { fontPropertyInterface } from '@typings/propertyObject'
 import { UnitTypePixel, FontStyle, TextCase, TextDecoration, NumericUnitTypes, PropertyType, FontStretch } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'
 import config from '@config/config'

src/extractor/extractMotion.ts

@@ -8,7 +8,7 @@ import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'
 import config from '@config/config'
 
-const direction = (transition: Transition): {} | null => {
+const direction = (transition: Transition): object | null => {
   if (Object.prototype.hasOwnProperty.call(transition, 'direction')) {
     return {
       direction: {

src/extractor/extractOpacities.ts

@@ -3,7 +3,7 @@ import { opacityPropertyInterface } from '@typings/propertyObject'
 import { customTokenNode } from '@typings/tokenNodeTypes'
 import { PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { filterByPrefix } from './extractUtilities'
 import { tokenExportKeyType } from '@typings/tokenExportKey'
 import { tokenCategoryType } from '@typings/tokenCategory'

src/extractor/extractRadii.ts

@@ -3,7 +3,7 @@ import { radiusPropertyInterface } from '@typings/propertyObject'
 import { customTokenNode } from '@typings/tokenNodeTypes'
 import { UnitTypePixel, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { filterByPrefix } from './extractUtilities'
 import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'

src/extractor/extractSizes.ts

@@ -3,7 +3,7 @@ import { sizePropertyInterface } from '@typings/propertyObject'
 import { customTokenNode } from '@typings/tokenNodeTypes'
 import { UnitTypePixel, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { filterByPrefix } from './extractUtilities'
 import { tokenExportKeyType } from '@typings/tokenExportKey'
 import { tokenCategoryType } from '@typings/tokenCategory'

src/extractor/extractSpacing.ts

@@ -3,7 +3,7 @@ import { spacingPropertyInterface } from '@typings/propertyObject'
 import { customTokenNode } from '@typings/tokenNodeTypes'
 import { UnitTypePixel, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { filterByPrefix } from './extractUtilities'
 import { tokenCategoryType } from '@typings/tokenCategory'
 import { tokenExportKeyType } from '@typings/tokenExportKey'

src/index.ts

@@ -1,13 +1,13 @@
-import { getSettings, resetSettings, setSettings } from './utilities/settings'
-import { getAccessToken, setAccessToken } from './utilities/accessToken'
+import { getSettings, resetSettings, setSettings } from '@utils/settings'
+import { getAccessToken, setAccessToken } from '@utils/accessToken'
 import { Settings as UserSettings } from '@typings/settings'
 import config from '@config/config'
 import { commands, PluginCommands } from '@config/commands'
-import getVersionDifference from './utilities/getVersionDifference'
-import getFileId from './utilities/getFileId'
-import { PluginMessage } from '../types/pluginEvent'
-import { exportRawTokenArray } from './utilities/getTokenJson'
-import { stringifyJson } from './utilities/stringifyJson'
+import getVersionDifference from '@utils/getVersionDifference'
+import getFileId from '@utils/getFileId'
+import { PluginMessage } from '@typings/pluginEvent'
+import { exportRawTokenArray } from '@utils/getTokenJson'
+import { stringifyJson } from '@utils/stringifyJson'
 
 // initiate UI
 figma.showUI(__html__, {
@@ -42,11 +42,11 @@ if ([commands.export, commands.urlExport, commands.generalSettings].includes(fig
         }
       }
     }
-    
-    if([commands.export, commands.urlExport].includes(figma.command as PluginCommands)) {
-      postMessageObject.payload.data = stringifyJson(exportRawTokenArray(figma, userSettings));
+
+    if ([commands.export, commands.urlExport].includes(figma.command as PluginCommands)) {
+      postMessageObject.payload.data = stringifyJson(exportRawTokenArray(figma, userSettings))
     }
-    figma.ui.postMessage({...postMessageObject})
+    figma.ui.postMessage({ ...postMessageObject })
     // register the settings UI
     figma.ui.show()
   }

src/transformer/originalFormatTransformer.ts

@@ -1,6 +1,6 @@
 import { internalTokenInterface, tokenCategoryTypes } from '@typings/propertyObject'
 import { OriginalFormatTokenInterface } from '@typings/originalFormatProperties'
-import { convertRgbaObjectToString } from '../utilities/convertColor'
+import { convertRgbaObjectToString } from '@utils/convertColor'
 import { PropertyType, UnitTypePixel } from '@typings/valueTypes'
 import config from '@config/config'
 
@@ -154,7 +154,7 @@ const opacityValueTransformer = ({ opacity }) => ({
   type: opacity.type
 })
 
-const valueTransformer: {} | undefined = {
+const valueTransformer: object | undefined = {
   size: sizeValueTransformer,
   color: defaultValueTransformer,
   gradient: defaultValueTransformer,

src/transformer/standardTransformer.ts

@@ -1,10 +1,10 @@
-import { rgbaObjectToHex8 } from '../utilities/convertColor'
+import { rgbaObjectToHex8 } from '@utils/convertColor'
 import { internalTokenInterface } from '@typings/propertyObject'
 import { StandardTokenInterface, StandardTokenTypes, StandardTokenDataInterface, StandardTokenGroup } from '@typings/standardToken'
-import roundWithDecimals from '../utilities/roundWithDecimals'
+import roundWithDecimals from '@utils/roundWithDecimals'
 import { tokenExtensions } from './tokenExtensions'
 import config from '@config/config'
-import { changeNotation } from '../utilities/changeNotation'
+import { changeNotation } from '@utils/changeNotation'
 
 const lineHeightToDimension = (values): number => {
   if (values.lineHeight.unit === 'pixel') {
@@ -92,7 +92,7 @@ const fontStyleValueTransformer = ({ values }): StandardTokenDataInterface => ({
   }
 })
 
-const typographyValueTransformer = ({ name, values }) => ({
+const typographyValueTransformer = ({ values }) => ({
   fontSize: {
     type: 'dimension' as StandardTokenTypes,
     value: values.fontSize.value

src/ui/components/FileExportSettings.tsx

@@ -1,20 +1,20 @@
-import * as React from 'react'
-import { useContext, useRef } from 'react'
-import { Button } from '@components/Button'
-import { Checkbox } from '@components/Checkbox'
-import { Title } from '@components/Title'
-import { FigmaContext, SettingsContext, TokenContext } from '@ui/context'
-import { css } from '@emotion/css'
-import { Footer } from './Footer'
-import { downloadJson } from '../modules/downloadJson'
-import { prepareExport } from '@src/utilities/prepareExport'
-import { Settings } from '@typings/settings'
-import { stringifyJson } from '@src/utilities/stringifyJson'
-import { Info } from '@components/Info'
-import { Row } from '@components/Row'
-import { tokenTypes } from '@config/tokenTypes'
-import { commands } from '@config/commands'
-import { WebLink } from './WebLink'
+import * as React from "react";
+import { useContext, useRef } from "react";
+import { Button } from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import { Title } from "@components/Title";
+import { FigmaContext, SettingsContext, TokenContext } from "@ui/context";
+import { css } from "@emotion/css";
+import { Footer } from "./Footer";
+import { downloadJson } from "../modules/downloadJson";
+import { prepareExport } from "@utils/prepareExport";
+import { Settings } from "@typings/settings";
+import { stringifyJson } from "@utils/stringifyJson";
+import { Info } from "@components/Info";
+import { Row } from "@components/Row";
+import { tokenTypes } from "@config/tokenTypes";
+import { commands } from "@config/commands";
+import { WebLink } from "./WebLink";
 
 const style = css`
   display: flex;
@@ -26,13 +26,16 @@ const style = css`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
-`
+`;
 
 export const FileExportSettings = () => {
-  const { settings, updateSettings } = useContext<{settings: Settings, updateSettings: any}>(SettingsContext)
-  const { tokens, setTokens } = useContext(TokenContext)
-  const { figmaUIApi } = useContext(FigmaContext)
-  const downloadLinkRef = useRef()
+  const { settings, updateSettings } = useContext<{
+    settings: Settings;
+    updateSettings: any;
+  }>(SettingsContext);
+  const { tokens, setTokens } = useContext(TokenContext);
+  const { figmaUIApi } = useContext(FigmaContext);
+  const downloadLinkRef = useRef();
 
   React.useEffect(() => {
     const { accessToken, ...pluginSettings } = settings;
@@ -50,12 +53,11 @@ export const FileExportSettings = () => {
       },
       "*"
     );
-}, [settings]);
-
+  }, [settings]);
 
   const handleFormSubmit = (event) => {
-    event.preventDefault() // Prevent form submit triggering navigation
-    const exportSettingsForm = event.target
+    event.preventDefault(); // Prevent form submit triggering navigation
+    const exportSettingsForm = event.target;
     if (exportSettingsForm.checkValidity() === true) {
       const { accessToken, ...pluginSettings } = settings;
       // save settings to local storage
@@ -98,7 +100,7 @@ export const FileExportSettings = () => {
         stringifyJson(tokensToExport, pluginSettings.compression)
       );
     }
-  }
+  };
 
   return (
     <form onSubmit={handleFormSubmit} className={style}>
@@ -180,4 +182,4 @@ export const FileExportSettings = () => {
       />
     </form>
   );
-}
+};