fix: a lot of stuff related to prettier auto formatting

Author: Damian Sznajder

.eslintrc.js

@@ -125,10 +125,7 @@ module.exports = {
 
     'import/no-unresolved': [
       'error',
-      {
-        caseSensitive: false,
-        ignore: ['vscode'],
-      },
+      { caseSensitive: false, ignore: ['vscode'] },
     ],
     'prettier/prettier': [
       'error',
@@ -203,7 +200,6 @@ module.exports = {
         '@typescript-eslint/prefer-optional-chain': 'error',
         '@typescript-eslint/triple-slash-reference': 'error',
         '@typescript-eslint/unified-signatures': 'error',
-
         'default-case': 'off',
         'no-dupe-class-members': 'off',
         'no-undef': 'off',

package.json

@@ -79,7 +79,7 @@
         "reactSnippets.settings.semiColons": {
           "type": "boolean",
           "markdownDescription": "Controls if snippets should use semi colons.\nOnly applies when `#reactSnippets.settings.prettierEnabled#` is disabled",
-          "default": true
+          "default": false
         },
         "reactSnippets.settings.singleQuote": {
           "type": "boolean",

src/helpers.ts

@@ -0,0 +1,19 @@
+import { workspace } from 'vscode';
+
+export type ExtensionSettings = {
+  languageScopes: string;
+  prettierEnabled: boolean;
+  semiColons: boolean;
+  importReactOnTop: boolean;
+  singleQuote: boolean;
+  typescript: boolean;
+  tabWidth: number;
+  typescriptPropsStatePrefix: 'type' | 'interface';
+};
+
+const extensionConfig = () =>
+  workspace.getConfiguration(
+    'reactSnippets.settings',
+  ) as unknown as ExtensionSettings;
+
+export default extensionConfig;

src/helpers/extensionConfig.ts

@@ -0,0 +1,22 @@
+import prettier from 'prettier';
+
+import extensionConfig from './extensionConfig';
+import getPrettierConfig from './getPrettierConfig';
+import {
+  replaceSnippetPlaceholders,
+  revertSnippetPlaceholders,
+} from './snippetPlaceholders';
+
+export const formatSnippet = (snippetString: string) => {
+  return extensionConfig().prettierEnabled
+    ? prettier.format(snippetString, getPrettierConfig())
+    : snippetString;
+};
+
+export const parseSnippet = (body: string | string[]) => {
+  const snippetBody = typeof body === 'string' ? body : body.join('\n');
+
+  return replaceSnippetPlaceholders(
+    formatSnippet(revertSnippetPlaceholders(snippetBody)),
+  );
+};

src/helpers/formatters.ts

@@ -1,28 +1,27 @@
 import { writeFile } from 'fs';
 
-import {
-  extensionConfig,
-  parseSnippetToBody,
-  replaceSnippetPlaceholders,
-} from './helpers';
 import componentsSnippets, {
   ComponentsSnippet,
-} from './sourceSnippets/components';
-import consoleSnippets, { ConsoleSnippet } from './sourceSnippets/console';
-import hooksSnippets, { HooksSnippet } from './sourceSnippets/hooks';
-import importsSnippets, { ImportsSnippet } from './sourceSnippets/imports';
-import othersSnippets, { OthersSnippet } from './sourceSnippets/others';
+} from '../sourceSnippets/components';
+import consoleSnippets, { ConsoleSnippet } from '../sourceSnippets/console';
+import hooksSnippets, { HooksSnippet } from '../sourceSnippets/hooks';
+import importsSnippets, { ImportsSnippet } from '../sourceSnippets/imports';
+import othersSnippets, { OthersSnippet } from '../sourceSnippets/others';
 import propTypesSnippets, {
   PropTypesSnippet,
-} from './sourceSnippets/propTypes';
+} from '../sourceSnippets/propTypes';
 import reactNativeSnippets, {
   ReactNativeSnippet,
-} from './sourceSnippets/reactNative';
-import reduxSnippets, { ReduxSnippet } from './sourceSnippets/redux';
-import testsSnippets, { TestsSnippet } from './sourceSnippets/tests';
+} from '../sourceSnippets/reactNative';
+import reduxSnippets, { ReduxSnippet } from '../sourceSnippets/redux';
+import testsSnippets, { TestsSnippet } from '../sourceSnippets/tests';
 import typescriptSnippets, {
   TypescriptSnippet,
-} from './sourceSnippets/typescript';
+} from '../sourceSnippets/typescript';
+
+import extensionConfig from './extensionConfig';
+import parseSnippetToBody from './parseSnippetToBody';
+import { replaceSnippetPlaceholders } from './snippetPlaceholders';
 
 export type SnippetKeys =
   | OthersSnippet['key']
@@ -77,13 +76,19 @@ const getSnippets = () => {
   return replaceSnippetPlaceholders(JSON.stringify(snippets, null, 2));
 };
 
-export const generateSnippets = () =>
+const generateSnippets = () =>
   new Promise((resolve) => {
     const jsonSnippets = getSnippets();
-    writeFile(__dirname + '/snippets/generated.json', jsonSnippets, (error) => {
-      if (error) {
-        console.error(error);
-      }
-      return resolve(true);
-    });
+    writeFile(
+      __dirname + '/../snippets/generated.json',
+      jsonSnippets,
+      (error) => {
+        if (error) {
+          console.error(error);
+        }
+        return resolve(true);
+      },
+    );
   });
+
+export default generateSnippets;

src/generateSnippets.ts renamed to src/helpers/generateSnippets.ts

@@ -0,0 +1,23 @@
+import prettier, { Options } from 'prettier';
+
+import extensionConfig from './extensionConfig';
+
+let prettierConfig: prettier.Options | null;
+prettier
+  .resolveConfig('', { editorconfig: true })
+  .then((config) => (prettierConfig = config));
+
+const getPrettierConfig = (): Options => {
+  const { semiColons, singleQuote, tabWidth, prettierEnabled } =
+    extensionConfig();
+
+  return {
+    parser: 'typescript',
+    semi: semiColons,
+    singleQuote,
+    tabWidth,
+    ...(prettierEnabled && prettierConfig),
+  };
+};
+
+export default getPrettierConfig;

src/helpers/getPrettierConfig.ts

@@ -0,0 +1,56 @@
+import extensionConfig from './extensionConfig';
+import { formatSnippet } from './formatters';
+import { Snippet } from './generateSnippets';
+import replaceOrRemoveReactImport from './replaceOrRemoveReactImport';
+
+// This is array of prefixes which are currently skipped because of syntax format issues
+const skippedSnippets = [
+  'pge',
+  'pse',
+  'gdsfp',
+  'gsbu',
+  'scu',
+  'cwun',
+  'cdm',
+  'cdup',
+  'rconst',
+];
+
+const withReactImport = [
+  'rfce',
+  'rfc',
+  'rfcp',
+  'rafce',
+  'rafc',
+  'rafcp',
+  'rnfe',
+  'rnfes',
+  'rnf',
+  'rnfs',
+  'stest',
+  'sntest',
+  'srtest',
+  'snrtest',
+  'hocredux',
+  'hoc',
+];
+
+const parseSnippetToBody = (snippet: Snippet) => {
+  const { importReactOnTop } = extensionConfig();
+  const body =
+    typeof snippet.body === 'string' ? snippet.body : snippet.body.join('\n');
+
+  const snippetBody = importReactOnTop
+    ? body
+    : withReactImport.includes(snippet.prefix)
+    ? replaceOrRemoveReactImport(snippet.body)
+    : body;
+
+  const formattedSnippet = skippedSnippets.includes(snippet.prefix)
+    ? snippetBody
+    : formatSnippet(snippetBody).split('\n');
+
+  return snippet.body.length === 1 ? formattedSnippet[0] : formattedSnippet;
+};
+
+export default parseSnippetToBody;

src/helpers/parseSnippetToBody.ts

@@ -0,0 +1,16 @@
+const replaceOrRemoveReactImport = (snippetBody: string[]) => {
+  const reactImportIndex = snippetBody.findIndex((line) =>
+    line.match(new RegExp(/import React/, 'g')),
+  );
+
+  if (reactImportIndex !== -1) {
+    const line = snippetBody[reactImportIndex];
+    snippetBody[reactImportIndex] = line
+      .replace(new RegExp(/^import React .*$/, 'g'), '')
+      .replace(new RegExp(/^import React, /, 'g'), 'import ');
+  }
+
+  return snippetBody.join('\n');
+};
+
+export default replaceOrRemoveReactImport;