Skip to content

Feat/shell script formatter#79

Open
farhanmallik05 wants to merge 2 commits intobetterbugs:developfrom
farhanmallik05:feat/shell-script-formatter
Open

Feat/shell script formatter#79
farhanmallik05 wants to merge 2 commits intobetterbugs:developfrom
farhanmallik05:feat/shell-script-formatter

Conversation

@farhanmallik05
Copy link

Description

Resolves #52

This PR implements a new development tool: Shell Script (Bash/Sh) Formatter, along with a basic linter to catch common shell script pitfalls. It provides a basic web-based interface for developers to paste, review, and format their shell scripts cleanly.

Key Changes

  • Dependency Added: Incorporated @wasm-fmt/shfmt to run the powerful shfmt engine directly in the browser via WebAssembly.
  • Component Implementation (shellFormatter.tsx):
    • Integrated Monaco Editor for clean input and output syntax highlighting of bash/shell code.
    • Built a fallback regex-based formatting engine in case the WASM file fails to load.
    • Implemented configurable formatting options (Indent Size, Tabs vs. Spaces, Binary Ops Next Line).
  • Basic Linter Engine:
    • Added ShellCheck-inspired instant lint warnings beneath the editor.
    • Flags dangerous SC2086 (Unquoted variables), SC2006 (Legacy backticks), SC2046 (Unquoted command substitutions), SC2164 (Unsafe cd without fallbacks), SC2115 (Dangerous rm -rf variables), and SC2059 (Direct variable prints in printf).
  • Webpack / Next.js Setup: Added experiments.asyncWebAssembly: true to next.config.js to enable seamless bundling of the .wasm binary within Next.js 14 production builds.
  • Routing & SEO (constants.tsx, developmentToolsConstant.tsx):
    • Grouped under Category178.
    • Configured developmentToolsRoutes and PATHS for the /shell-script-formatter route.
    • Populated comprehensive SEO metadata, Hero sections, Step-by-step guides, and "How it's Used" details matching existing tools.

Testing Done

  • Checked formatting functionality with various shell snippets.
  • Validated Monaco Editor loads correctly and highlights Bash semantics.
  • Verified that basic linting appropriately recognizes unquoted identifiers and unsafe operations.
  • Ran npm run lint and npm run build locally, ensuring successful static page generation without webpack compilation errors.

Resolves betterbugs#52. Implements a Shell Script Formatter using @wasm-fmt/shfmt, Monaco editor for syntax highlighting, and an integrated basic linter.
@SyedFahad7
Copy link
Collaborator

rebase with latest develop branch
keep this pr focused to adding shell script formatter and not the '[search, categorization logic, and associated UI styling' commits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(tools): add Shell Script (Bash/Sh) Formatter

2 participants