Bug: Inline js has indentation issues

[Dradows]

Plugin Version

1.17.1

Prettier Version

2.4.1

Which frameworks are affected?

• none
• vue
• angular
• svelte

Node Version

14.17.1

Which operating systems have you used?

• Linux
• macOS
• Windows

Prettier config

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "*.pug",
  "parser": "pug"
}

Input

script(src='javascripts/echarts.js')
script(src='javascripts/jquery-3.6.0.js')
link(href='stylesheets/bootstrap.css', rel='stylesheet')
script(src='javascripts/bootstrap.bundle.js')

#main(style='width: 100%; height: 1000px')
script.
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom, null, { renderer: "canvas" });
    let option;
    fetch("data/chResults.json")
        .then(data => data.json())
        .then(json => {
            console.log(json);
        });

Output or Error

script(src='javascripts/echarts.js')
script(src='javascripts/jquery-3.6.0.js')
link(href='stylesheets/bootstrap.css', rel='stylesheet')
script(src='javascripts/bootstrap.bundle.js')

#main(style='width: 100%; height: 1000px')
script.
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom, null, { renderer: "canvas" });
    let option;
    fetch("data/chResults.json")
      .then(data => data.json())
      .then(json => {
        console.log(json);
      });

Expected Output

script(src='javascripts/echarts.js')
script(src='javascripts/jquery-3.6.0.js')
link(href='stylesheets/bootstrap.css', rel='stylesheet')
script(src='javascripts/bootstrap.bundle.js')

#main(style='width: 100%; height: 1000px')
script.
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom, null, { renderer: "canvas" });
    let option;
    fetch("data/chResults.json")
        .then(data => data.json())
        .then(json => {
            console.log(json);
        });

Additional Context

The difference between quotation is acceptable, but the difference between indentation seriously affects programming

[Dradows]

A temporary solution is to change "useTabs": true

[Shinigami92]

I think we miss to add tabWidth here:

plugin-pug/src/printer.ts

Lines 241 to 249 in 6657b73

	this.codeInterpolationOptions = {
	singleQuote: codeSingleQuote,
	bracketSpacing: options.pugBracketSpacing ?? options.bracketSpacing,
	arrowParens: options.pugArrowParens ?? options.arrowParens,
	printWidth: 9000,
	endOfLine: 'lf',
	useTabs: options.pugUseTabs ?? options.useTabs,
	bracketSameLine: options.pugBracketSameLine ?? options.bracketSameLine
	};

If you are faster than me AND want to take credits for the fix, feel free to create a PR 🙂
Also pls add a test like a copy of one of https://github.com/prettier/plugin-pug/tree/main/tests/issues

[Dradows]

I think we miss to add tabWidth here:

plugin-pug/src/printer.ts

Lines 241 to 249 in 6657b73

	this.codeInterpolationOptions = {
	singleQuote: codeSingleQuote,
	bracketSpacing: options.pugBracketSpacing ?? options.bracketSpacing,
	arrowParens: options.pugArrowParens ?? options.arrowParens,
	printWidth: 9000,
	endOfLine: 'lf',
	useTabs: options.pugUseTabs ?? options.useTabs,
	bracketSameLine: options.pugBracketSameLine ?? options.bracketSameLine
	};

If you are faster than me AND want to take credits for the fix, feel free to create a PR 🙂 Also pls add a test like a copy of one of https://github.com/prettier/plugin-pug/tree/main/tests/issues

Problem solved and PR submitted😉

[Shinigami92]

I may release it tomorrow as a 1.17.2