What's new

Help Format javascript!

carmona1426

Honorary Poster
Established
Joined
Apr 12, 2018
Posts
176
Reaction
330
Points
145
Age
26
How to format javascript in one line that the code will not go down!
Example:
$scope.updateSumAmount = function (sd) {
// Parse input values
const prQty = parseFloat(sd.sti_qty2);
const cost = parseFloat(sd.cost);
const original_prod_amount = parseFloat(sd.original_prod_amount);
const original_disc_amount = parseFloat(sd.original_disc_amount);
console.log(
"Original Product: ",
original_prod_amount,
" | ",
"Original Discount: ",
original_disc_amount
);
// Check if the values are numeric
const areNumeric = !isNaN(prQty) && !isNaN(cost);
if (areNumeric) {
sd.sum_amount = (prQty * cost).toFixed(2);
initial_percentage1 =
(original_disc_amount / original_prod_amount) * 100;
sd.disc_amount = (sd.sum_amount * initial_percentage1 * 0.01).toFixed(
2
);
sd.net_amount = (sd.sum_amount - sd.disc_amount).toFixed(2);
//Calculate dic_1
initial_percentage2 =($scope.getDisc1(sd.receipt_no) / original_prod_amount) * 100;
$scope.disc1 = (sd.sum_amount * initial_percentage2 * 0.01).toFixed(2);
console.log(
"From Discount #1:",
$scope.getDisc1(sd.receipt_no),
"To ",
$scope.disc1
);
} else {
sd.sum_amount = 0;
sd.net_amount = 0;
}
//update the total amount
$scope.updateTotalAmount1();
};

You can see that some of the lines in the code goes down like its wrapping.

Here's also my settings.json using VS Code:
{
"editor.formatOnSave": true,
"git.ignoreMissingGitWarning": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"
HTML:
": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "DEVSENSE.phptools-vscode",
  "workbench.colorTheme": "Bearded Theme Arc",
  "files.autoSave": "onWindowChange",
  "workbench.iconTheme": "material-icon-theme",
  "security.allowedUNCHosts": [
    "172.16.43.75"
  ],
  "explorer.confirmDelete": false,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.stickyScroll.enabled": false
}
 
It seems like you are having trouble with the formatting of your JavaScript code in one line to prevent the code from wrapping. One way to achieve this is by using template literals and removing unnecessary whitespace. Here's the same code formatted in a single line:

JavaScript:
$scope.updateSumAmount = function(sd) { const prQty = parseFloat(sd.sti_qty2); const cost = parseFloat(sd.cost); const original_prod_amount = parseFloat(sd.original_prod_amount); const original_disc_amount = parseFloat(sd.original_disc_amount); console.log("Original Product: ", original_prod_amount, " | ", "Original Discount: ", original_disc_amount); const areNumeric = !isNaN(prQty) && !isNaN(cost); if (areNumeric) { sd.sum_amount = (prQty * cost).toFixed(2); initial_percentage1 = (original_disc_amount / original_prod_amount) * 100; sd.disc_amount = (sd.sum_amount * initial_percentage1 * 0.01).toFixed(2); sd.net_amount = (sd.sum_amount - sd.disc_amount).toFixed(2); initial_percentage2 = ($scope.getDisc1(sd.receipt_no) / original_prod_amount) * 100; $scope.disc1 = (sd.sum_amount * initial_percentage2 * 0.01).toFixed(2); console.log("From Discount #1:", $scope.getDisc1(sd.receipt_no), "To ", $scope.disc1); } else { sd.sum_amount = 0; sd.net_amount = 0; } $scope.updateTotalAmount1(); };

By removing line breaks and unnecessary spaces, the code is now in a single line. You can copy and paste this code into your editor to see if it resolves the issue with lines wrapping.
 
It seems like you are having trouble with the formatting of your JavaScript code in one line to prevent the code from wrapping. One way to achieve this is by using template literals and removing unnecessary whitespace. Here's the same code formatted in a single line:

JavaScript:
$scope.updateSumAmount = function(sd) { const prQty = parseFloat(sd.sti_qty2); const cost = parseFloat(sd.cost); const original_prod_amount = parseFloat(sd.original_prod_amount); const original_disc_amount = parseFloat(sd.original_disc_amount); console.log("Original Product: ", original_prod_amount, " | ", "Original Discount: ", original_disc_amount); const areNumeric = !isNaN(prQty) && !isNaN(cost); if (areNumeric) { sd.sum_amount = (prQty * cost).toFixed(2); initial_percentage1 = (original_disc_amount / original_prod_amount) * 100; sd.disc_amount = (sd.sum_amount * initial_percentage1 * 0.01).toFixed(2); sd.net_amount = (sd.sum_amount - sd.disc_amount).toFixed(2); initial_percentage2 = ($scope.getDisc1(sd.receipt_no) / original_prod_amount) * 100; $scope.disc1 = (sd.sum_amount * initial_percentage2 * 0.01).toFixed(2); console.log("From Discount #1:", $scope.getDisc1(sd.receipt_no), "To ", $scope.disc1); } else { sd.sum_amount = 0; sd.net_amount = 0; } $scope.updateTotalAmount1(); };

By removing line breaks and unnecessary spaces, the code is now in a single line. You can copy and paste this code into your editor to see if it resolves the issue with lines wrapping.
Wrong I mean using the prettier disable the javascript text wrap
 
Wrong I mean using the prettier disable the javascript text wrap
To configure Prettier in VS Code to prevent line wrapping in JavaScript code, you can adjust the printWidth setting. This setting specifies the line length that Prettier will wrap code at. By setting printWidth to a higher number or to 0, you can effectively disable line wrapping.

Here's how you can modify your VS Code settings to achieve this:

1. Open your VS Code settings by pressing Ctrl + , or by going to File > Preferences > Settings.
2. Click on the "Edit in settings.json" link at the top right corner.
3. Add or modify the Prettier configuration in your settings.json file as follows:

JSON:
{
  "editor.formatOnSave": true,
  "git.ignoreMissingGitWarning": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "DEVSENSE.phptools-vscode",
  "workbench.colorTheme": "Bearded Theme Arc",
  "files.autoSave": "onWindowChange",
  "workbench.iconTheme": "material-icon-theme",
  "security.allowedUNCHosts": [
    "172.16.43.75"
  ],
  "explorer.confirmDelete": false,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.stickyScroll.enabled": false,
  "prettier.printWidth": 0 // Set printWidth to 0 to disable line wrapping
}

By setting "prettier.printWidth": 0, Prettier will not wrap lines based on a specific width, effectively disabling line wrapping. After updating your settings, try saving a JavaScript file to see if the code remains in a single line without wrapping.
 
To configure Prettier in VS Code to prevent line wrapping in JavaScript code, you can adjust the printWidth setting. This setting specifies the line length that Prettier will wrap code at. By setting printWidth to a higher number or to 0, you can effectively disable line wrapping.

Here's how you can modify your VS Code settings to achieve this:

1. Open your VS Code settings by pressing Ctrl + , or by going to File > Preferences > Settings.
2. Click on the "Edit in settings.json" link at the top right corner.
3. Add or modify the Prettier configuration in your settings.json file as follows:

JSON:
{
  "editor.formatOnSave": true,
  "git.ignoreMissingGitWarning": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "DEVSENSE.phptools-vscode",
  "workbench.colorTheme": "Bearded Theme Arc",
  "files.autoSave": "onWindowChange",
  "workbench.iconTheme": "material-icon-theme",
  "security.allowedUNCHosts": [
    "172.16.43.75"
  ],
  "explorer.confirmDelete": false,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.stickyScroll.enabled": false,
  "prettier.printWidth": 0 // Set printWidth to 0 to disable line wrapping
}

By setting "prettier.printWidth": 0, Prettier will not wrap lines based on a specific width, effectively disabling line wrapping. After updating your settings, try saving a JavaScript file to see if the code remains in a single line without wrapping.
Its not working the "prettier.printWidth": 0
 
Its not working the "prettier.printWidth": 0
If setting "prettier.printWidth": 0 in your VS Code settings is not preventing line wrapping as expected, there might be an additional setting that is causing the line wrapping behavior.

You can try the following steps to troubleshoot and potentially resolve the issue:

1. Check Prettier Extension Settings: Ensure that there are no conflicting settings in the Prettier extension itself. Sometimes, extension-specific settings can override global configurations. You can check the Prettier extension settings in VS Code to see if there are any printWidth-related settings there.

2. Check Workspace Settings: If you have workspace settings that override the global settings, Prettier might be using those instead. Check if there are any workspace-specific settings that could be affecting the line wrapping behavior.

3. Prettier Configuration File: If you have a Prettier configuration file (e.g., .prettierrc or prettier.config.js) in your project, make sure that the printWidth setting is not defined there with a value that causes line wrapping.

4. Update Prettier Extension: Ensure that you have the latest version of the Prettier extension installed in VS Code. Updating the extension might resolve any bugs or issues related to formatting.

5. Restart VS Code: Sometimes, changes in settings may require a restart of VS Code to take effect. Try restarting the editor after making the configuration changes.

If after checking these points the line wrapping issue persists, you may want to consider reaching out to the Prettier extension developers or community for further assistance or to report a possible bug.
 
Back
Top