feat: add husky prettier and lint staged

.eslintignore

@@ -1 +1,4 @@
-/**/*.d.ts
+/**/*.d.ts
+node_modules/**
+tsconfig.json
+dist/**

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre-commit

package.json

@@ -3,7 +3,7 @@
   "displayName": "React Native Component Splitter",
   "description": "Splits long components into shorter, readable subcomponents",
   "version": "0.0.7",
-  "icon": "src/assets/icon.png",
+  "icon": "assets/icon.png",
   "repository": {
     "type": "git",
     "url": "https://github.com/nomi9995/react-native-component-splitter"
@@ -72,7 +72,15 @@
     "pretest": "yarn run test-compile && yarn run lint",
     "lint": "eslint src --ext ts",
     "test": "node ./out/test/runTest.js",
-    "publish:extension": "yarn run vscode:prepublish && vsce publish"
+    "publish:extension": "yarn run vscode:prepublish && vsce publish",
+    "pre-commit": "lint-staged --verbose",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.(js|jsx|ts|tsx)": [
+      "pretty-quick --staged",
+      "eslint \"**/*.{js,ts,tsx}\""
+    ]
   },
   "dependencies": {
     "@types/jest": "^27.0.1",
@@ -108,9 +116,12 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unused-imports": "^1.1.4",
     "glob": "^7.1.7",
+    "husky": "^7.0.2",
     "jest": "^27.1.1",
     "json-fixer": "^1.6.12",
+    "lint-staged": "^11.1.2",
     "mocha": "^9.1.1",
+    "pretty-quick": "^3.1.1",
     "ts-loader": "^9.2.5",
     "typescript": "^4.4.3",
     "vscode-test": "^1.6.1",

src/utils/splitter.ts

@@ -53,6 +53,7 @@ const askForComponentName = async () => {
   let name = await window.showInputBox({
     prompt: "Choose a name for the new component",
     ignoreFocusOut: true,
+
     placeHolder: "New component name...",
   });
 
@@ -150,10 +151,8 @@ const removeUnusedImports = async () => {
   const { document } = editor;
   const code = document.getText();
   const codeLines = _.split(code, "\n");
-  const {
-    firstImportLineIndex,
-    lastImportLineIndex,
-  } = getFirstAndLastImportLineIndexes(codeLines);
+  const { firstImportLineIndex, lastImportLineIndex } =
+    getFirstAndLastImportLineIndexes(codeLines);
 
   const importsString = _.chain(codeLines)
     .slice(firstImportLineIndex, lastImportLineIndex + 1)
@@ -186,9 +185,8 @@ const updateOriginalComponent = async ({ newComponent }) => {
 
 const generateReactElement = ({ name, props, jsx }) => {
   const numberOfProps = _.size(props);
-  const numberOfLeadingSpacesFromStart = parseUtils.getNumberOfLeadingSpaces(
-    jsx
-  );
+  const numberOfLeadingSpacesFromStart =
+    parseUtils.getNumberOfLeadingSpaces(jsx);
   const leadingSpacesFromStart = _.repeat(" ", numberOfLeadingSpacesFromStart);
   let propsString = "";
 
@@ -220,11 +218,13 @@ const extractRelevantImportsAndPropsAndStylesheet = () => {
     `;
   const props = parseUtils.getUndefinedVars(selectionAndImports);
   const imports = parseUtils.getUsedImports(selectionAndImports);
-  const stylesheet = regexNormalizeResult(parseUtils.getStylesheet(code, selection));
+  const stylesheet = regexNormalizeResult(
+    parseUtils.getStylesheet(code, selection)
+  );
   return {
     props,
     imports,
-    stylesheet
+    stylesheet,
   };
 };
 
@@ -259,18 +259,20 @@ const createNewComponent = async (componentName: any) => {
   const uri = editor.document.uri;
   const fileExtension = parseUtils.getUriExtension(uri.fsPath);
   const selection = editor.document.getText(editor.selection);
-  const { imports, props, stylesheet } = extractRelevantImportsAndPropsAndStylesheet();
+  const { imports, props, stylesheet } =
+    extractRelevantImportsAndPropsAndStylesheet();
 
   const newComponent = {
     code: parseUtils.pretify(
       `${buildImportsString(imports)}\n\n` +
-      `const ${componentName} = (${buildPropsString(props)}) => (\n` +
-      `${shouldWrapCodeWithEmptyTag(selection)
-        ? `<View>\n${selection}\n</View>`
-        : selection
-      }\n` +
-      `);\n\n` +
-      `export default ${componentName};\n\n${stylesheet}\n`
+        `const ${componentName} = (${buildPropsString(props)}) => (\n` +
+        `${
+          shouldWrapCodeWithEmptyTag(selection)
+            ? `<View>\n${selection}\n</View>`
+            : selection
+        }\n` +
+        `);\n\n` +
+        `export default ${componentName};\n\n${stylesheet}\n`
     ),
     reactElement: generateReactElement({
       name: componentName,