SyntaxError in prettier parser

[renatoknb]

"pre-commit": "precise-commits --whitelist=\"**/*.{js,ts,yml,yaml,md,html,css,scss}\""

"@softwareventures/precise-commits": "^4.0.19",
"prettier": "^3.5.3",

Errored code block

class DocumentFormStore {
  constructor() {
    extendObservable(this, {
      model: {
        operatingCostOn: '',
        operatingCostRaise: '',
        heatingCostOn: '',
        .
        .
        .
      }
   }
 }
}

My .prettierrc

{
  "bracketSpacing": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "printWidth": 80,
  "endOfLine": "lf",
  "arrowParens": "always",
  "useTabs": false,
  "jsxSingleQuote": false,
  "bracketSameLine": false,
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "parser": "babel"
      }
    },
    {
      "files": "*.store.js",
      "options": {
        "parser": "babel"
      }
    },
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    },
    {
      "files": "*.tsx",
      "options": {
        "parser": "typescript"
      }
    },
    {
      "files": "*.jsx",
      "options": {
        "parser": "babel"
      }
    },
    {
      "files": "*.json",
      "options": {
        "parser": "json"
      }
    },
    {
      "files": "*.md",
      "options": {
        "parser": "markdown"
      }
    },
    {
      "files": "*.yaml",
      "options": {
        "parser": "yaml"
      }
    },
    {
      "files": "*.yml",
      "options": {
        "parser": "yaml"
      }
    },
    {
      "files": "*.css",
      "options": {
        "parser": "css"
      }
    },
    {
      "files": "*.scss",
      "options": {
        "parser": "scss"
      }
    },
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

and given error

✖ An Error occurred
SyntaxError: Missing semicolon. (1:14)
> 1 | constructor() {
    |              ^
  2 |     extendObservable(this, {
  3 |       model: {
  4 |         operatingCostOn: '',

It also seems like it's not following .prettierignore file at all. This can be verified by comparing npx prettier --check . and npx precise-commits --check-only. Although those two commands check "different" files, meaning that first one checks entire folder and subfolders while other checks only staged files, I expect it to follow .prettierignore for staged files too. Feel free to correct me if I am wrong or this is wanted behavior.

[djcsdy]

Hi! Thank you for your report.

precise-commits does attempt to honour .prettierignore but that only works if .prettierignore is present in the current working directory. This is obviously wrong behaviour but that's the way the original developer implemented it and the truth is it never occurred to me to fix it. I've opened #119 to address this.

Regarding your main issue, this is something I've encountered but it is very difficult to nail down and fix.

precise-commits works by passing a rangeStart and rangeEnd to prettier, which specifies the character range that should be formatted. Unfortunately this feature of prettier is a bit buggy and occasionally if you are unlucky the character range will start in a location that causes prettier to be confused and, for example, think it is inside a function body when actually it is inside a class body.

More recent releases of prettier have become a lot better about this but it does still happen sometimes. I have an idea for a general workaround, but it's fairly complicated to implement and I haven't got round to it yet.

Some time ago I collected a set of test cases that triggered this bug, and the plan was to implement a workaround and then test the workaround against the test cases. But then by the time I came to attempt an implementation, prettier had already fixed all those cases upstream!

So I hoped that this bug might be fixed by prettier. But it does still show up occasionally. And now the difficulty is I don't have any test cases that trigger the bug.

For a test case I would need:

• A complete copy of an affected file as it appears in the repository, and
• A complete modified copy of the affected file which, when staged and checked with precise-commits, triggers the bug.

If you're able to provide that, it would help me a lot and be very much appreciated.

[djcsdy]

Test case:

initial.ts:

export class ProductInventoryDataProvider implements DataSource<ProductInventoryItem> {
    private fetchRelatedCategories<
        T extends {customerId: number; categoryOverview?: CategorySummaryDto}
    >(products: T[]): Promise<T[]> {
        return sequentialMapAll(batchedIds, singleRequest).then(() => products);
    }
}

staged.ts:

export class ProductInventoryDataProvider implements DataSource<ProductInventoryItem> {
    private fetchRelatedCategories<
        T extends {customerId: number; categoryOverview?: CategorySummaryDto | undefined}
    >(products: T[]): Promise<T[]> {
        return sequentialMapAll(batchedIds, singleRequest).then(() => products);
    }
}

.prettierrc:

{
  "printWidth": 100,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "consistent",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": false,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto",
  "overrides": [
    {
      "files": [
        "*.css",
        "*.htm",
        "*.html",
        "*.json",
        "*.less",
        "*.sass",
        "*.yaml",
        "*.yml",
        "*.xml"
      ],
      "options": {
        "tabWidth": 2
      }
    },
    {
      "files": ["*.md"],
      "options": {
        "printWidth": 80
      }
    }
  ]
}