madskristensen/javascriptprettier

A Visual Studio extension

javascriptprettier's Issues

Editor scrolls to bottom when format large file using prettier

In vscode running the editor.action.formatDocument command in a javascript file makes the editor scroll to the last line of the file which is really annoying. It happens for large files that are 6000+ lines. It tends to happen when the content of the line the cursor is on changes due to being formatted.

I've disabled all extensions apart from prettier and it's still happening. I also set up a new codespace and installed prettier and no other extensions and it happens in there.

Prettier not installing on macOS 12.0

Installed product versions

• Webstorm: 2021.3
• This extension: prettier 2.5.1

Description

Steps to recreate

1. Reinstall node
2. Tried Intelij webstorm plugin
3. uninstalled plugin and used node edition
4. uninstalled plugin and used node

prettier 6.2 doesn't work

Installed product versions

• Visual Studio: 1.54.2
• This extension: 6.2.0

Description

Since the update yesterday the prettier does nothing in my vsc

Steps to recreate

1. after the update tried to save a css file

Current behavior

I can an error message that there's no css formatted installed.

Expected behavior

prettify my code

.prettierignore file seems to be ignored

Installed product versions

• Visual Studio: 2019 Professional
• This extension: 2.1.47

Description

.prettierignore file seems to be ignored

Steps to recreate

1. Create a .prettierignore file in the root folder of project, containing "*.js"
2. Turn on 'Format on Save'
3. Edit and save a .js file

Current behavior

File is formatted

Expected behavior

File should not be formatted

The 'Format on Save' option seems to be ignoring the .prettierignore file (which is in the root folder of my project) - when I save a file, even though it's listed in the .prettierignore file, it still gets prettified.

I've tried npm installing Prettier (V1 and V2), or using the Prettier built into the extension, with no success.

But if I run Prettier from the command line, the .prettierignore file is not ignored.

Is this a bug/missing features, or could I be doing something wrong?

(I'm using VS2019, and Node.js 12.18.4)

Only update lines that have changed

At the moment if there's a single change made by prettier in a file then the whole files text is replaced, that means every line is shown as changed in VS, and for large files the syntax highlighting takes a little while to re-parse the file which can be a little jarring.

It'd be better if only the changed lines were updated, if possible.

Update to use Prettier 1.4.2 with TypeScript support

Now that 1.4.0 has been released with TypeScript support, it'd be really cool to have that support in Visual Studio

Comments in vannila JS oddly formated

Installed product versions

• Visual Studio: Microsoft Visual Basic 2017
• This extension: 1.1.21

Description

Comments on JS code are being oddly formated

Steps to recreate

1. Create a comment like this
   

2. Use preetier to format (Crtl+K + Crtl+J)

Current behavior

Every time a use preetier to format it add spaces to the comment like:

And if I format again, the result will be:

And so on

Expected behavior

A normal indentation and format.

Traditional Chinese words to be Garbled

Installed product versions

• Visual Studio: 2015 Community
• This extension: 0.6.16

Description

I have to write some Chinese Words in alert or in comments.
But after I click Make Prettier button, the Chinese words to be garbled.

Steps to recreate

I key the code: alert('系統錯誤，請稍後再試！');
Then I click Make Prettier button.
And the code become: alert("�t�ο��~�A�еy���A�աI");

Some special chars are garbled

Installed product versions

• Visual Studio: 2019 Professional
• This extension: 2.1.47

Description

Non-breaking spaces are garbled.

Steps to recreate

1. open a js file. Enter a narrow no-break space for example from german wikipedia page or this text: '▕ ▏'
2. run prettier from command line (node_modules/.bin/prettier.cmd --write .) is fine
3. run prettier from visual studio contextmenu of this extension

Current behavior

The extension creates from the valid string '▕ ▏' the new string '???'.

=>

Expected behavior

should be preserved as it is with the command line

ref #2

Menu for "Make Prettier" keeps saying "installing npm modules..."

Installed product versions

• Visual Studio: 2015 Community Update 3
• This extension: 1.1.21

Description

Menu for prettier keeps saying "Make Prettier (installing npm modules ...)"

Steps to recreate

1. Install extension through VS dialog
2. Restart VS
3. Menu says above mentioned text
4. Install npm manually npm i prettier --save-dev
5. Restart VS
6. Menu does not change...

Expected behavior

Menu should switch to "Make prettier" and actually format the code.

Vue.js Support

How would one go about adding support for Vue?

Feature Request: Execute on save

Description

In some other editors (i.e. VS Code), Prettier can be configured to format on save. It would be great to have this functionality in Visual Studio as well.

I am not sure how feasible this is as it is likely largely dependent on the capabilities of a VS extensions. Can anyone provide any insight into the level of difficulty for something like this? I am happy to look into it myself and potentially in attempt a contribution for it if the effort is realistic.

Thanks!

Does not install node module prettier

Installed product versions

• Visual Studio: 2015 Professional
• This extension: 0.6.12

Description

Does not install node module prettier

Steps to recreate

1. Install JavaScript Prettier extension through VS extension manager
2. Restart VS
3. Open up a JavaScript file within a solution

Current behavior

Context menu item is grayed out with the text "(installing npm modules...)"

Expected behavior

I checked the location this plugin attempts to install the prettier node module and the module was not installed there. I restarted VS again to see if it would install, it still did not. I did not see any error messages indicating there was a failure. I manually installed prettier at the expected location. Afterwards the menu item was active. Also, a note here just for awareness but will potentially be a new issue, once the menu item was active it didn't seem to perform any formatting.

Also, I think it would be helpful if the README stated it will install prettier itself, at first I thought it was going to try to use the global version installed by yarn.

I do appreciate the creation of this extension, I was pleasantly surprise to see VS listed as a supported editor.

Functions as parameters do not indent correctly (fixed by current Prettier)

Installed product versions

• Visual Studio: 2017 Enterprise
• This extension: 1.1.21

Description

Formatting function calls with functions as parameters does not indent correctly. The current version of prettier seems to resolve this issue.

Steps to recreate

1. Formatting following code

            request
                .get("/api/session", {
                    headers: { "Content-Type": "application/json" },
                    handleAs: "json"
                })
                .then(
                function () {
                    alert("success");
                },
                function (err) {
                    alert("failure");
                }
                );

Current behavior

Notice the success and error functions passed to the then function are at the same indentation as the .then line.

Expected behavior

This seems to be fixed with the current version 1.7.4 as the playground (https://prettier.io/playground/) formats it correctly.

How to set options?

Installed product versions

• Visual Studio: 2015 Enterprise
• This extension: 1.0.19

Description

How to set options (https://github.com/prettier/prettier#api) via Visual Studio extension?

Steps to recreate

1. Install extension
2. Trying to set singleQuotes for example

Current behavior

No way to do it

Expected behavior

Extension options of config file for that

How to configure .prettierrc?

Installed product versions

• Visual Studio: 2017 Enterprise 15.6.4
• This extension: 1.1.21

Description

Where does this extension read a .prettierrc from?

Steps to recreate

1. Create .prettierrc (in top level of project, for example)
2. Run "Make Prettier"

Current behavior

Does not read config from .prettierrc

Expected behavior

Read config from .prettierrc and format accordingly.

Add support for Visual Studio 2022:(

Description

It would be great if they added support for the new Visual Studio 2022

Current behavior

It does not appear in the marketplace

Expected behavior

Appear in the marketplace

Visual studio 2017 command group ID does not match

Installed product versions

• Visual Studio: 2017 Professional RTM
• This extension: 0.6

Description

Right click menu always reads "Make Prettier (installing npm modules...)"

Steps to recreate

1. Install extension to Visual Studio 2017 RTM
2. Open VS and open a javascript file
3. Right click the document

Current behavior

Context menu item reads "Make Prettier (installing npm modules...)"

Expected behavior

The make prettier option should be available

I have downloaded a fork of the source and found the issue to be with line 73 of PrettierCommand.cs which reads:

if (pguidCmdGroup == _commandGroup && prgCmds[0].cmdID == _commandId)

However, the value of pguidCmdGroup is {60120aad-4139-4f1c-a5b3-d0c68fff2511} while the value of _commandGroup is {1adbe5b8-de7d-446c-85d6-c1c121aacff3}. Because of this, the inside block that sets the appropriate status never runs.

I would update and submit a pull request, but I'm unsure why the mismatch occurs nor what the correct value should be for VS 2017 RTM.

Edit: I have verified that the code that installs the NPM module returns successfully. However, when I check C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Web\External\node_modules, the module does not exist. I do have the module installed globally, so that may be affecting the install. Regardless, the issue appears to step from the command group ID check noted above.

ignores .eslintrc.json

Installed product versions

• Visual Studio 2017
• This extension: 2.0.33

Description

Able to use .eslintrc.json instead of .prettierrc. Other Prettier formatters e.g. for Visual Studio Code uses this. Often eslint is already used and having 2 files specifying same things is not a good thing.

Steps to recreate

1. Install extension
2. place .eslintrc.json
3. format a js file

Current behavior

Ignores rules set by eslint

Expected behavior

Look for configuration files by order

.prettierrc > .eslintrc > .eslintrc.json

Optional chaining (?.) in code causes error

Installed product versions

• Visual Studio: 2019 Professional 16.9.5
• This extension: 2.1.47

Description

Running Prettier on a file that includes the Optional chaining operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) causes a syntax error

Steps to recreate

1. Create a file which uses the optional chaining operator (Note: My file is .tsx - not sure if this is relevant)
2. Run Prettier

Current behavior

The file is not prettified and there is an error in the Output:

11/17/2021 11:18:07 AM: [error] stdin: SyntaxError: Expression expected. (146:20)
[error]   144 |         (c) =>
[error]   145 |           c.value &&
[error] > 146 |           (c.value?.toString() === value ||
[error]       |                    ^
[error]   147 |             parseFloat(c.value?.toString()) === parseFloat(value))
[error]   148 |       ) !== index
[error]   149 |     ) {

(Because I'm not sure the text will line up properly here, I want to point out that in the output the caret is pointing to the period after the question mark in "(c.value?.toString()")

Expected behavior

Prettier properly parses the code and makes it pretty.

CSHTML-files support

Installed product versions

• Visual Studio: 2015 Enterprise
• This extension: 1.0.19

Description

Is it planned to add prettier-option for cshtml-files, which contain <script> tag?

Steps to recreate

1. Open cshtml-file with javascript block
2. Trying to prettify code

Current behavior

No way to do it

Expected behavior

Formatting code in file

Disabled Menu : "Make Prettier (installing npm modules)"

Installed product versions

• Visual Studio Community 2017 ver: 15.9.8
• JavaScript_Prettier_v2.1.47

Description

After installing from VS Tools->Extensions, I am getting on the right click menu for JS Files - Disabled menu : "Make Prettier (installing npm modules)"
Same thing happening when I am installing [JavaScript_Prettier_v2.1.47] directly by downloading from Visual Studio marketplace.
Pls advise what to do...

Steps to recreate

1. Install JavaScript_Prettier from VS Tools->Extensions or download the installer from Visual Studio marketplace.
2. Run Visual Studio and open a JavaScript file in the editor.
3. Right click on the editor, to see the menus.

Current behavior

Seeing menu option (Disabled) : "Make Prettier (installing npm modules)".

Expected behavior

This menu option should be enabled for formatting the JS files.

HTML and CSS formatting

Any plans to make this extension also make HTML and CSS prettier, not just JS and TS?

Unable to install the extension on VS Code

Installed product versions

• Visual Studio: 1.36.1
• This extension: 2.1.47

Description

I am unable to install the extension.

Steps to recreate

Download extension "JavaScript_Prettier_v2.1.47.vsix"
Use VS Code UI or cammand line to try and install
Get error message: "extension/package.json not found inside zip."

Current behavior

Fails to install, complains of missing json file

Expected behavior

Install and work without error messages.

Can I apply the Prettier only for selected function block?

Installed product versions

• Visual Studio: [example 2015 Professional]
• This extension: [example 1.1.21]

Description

Can I apply the Prettier only for certain functions in my JS file?

Steps to recreate

NA

Current behavior

Currently once applied entire file is formatted.

Expected behavior

I wanted to selectively apply Prettier formatting to my functions, so that Pull Request can be created only for the changes I made to function. I wanted to make the changes in stages so that Pull Request review becomes faster.

Not Available in Visual Studio 2015

Installed product versions

• Visual Studio: Visual Studio 2015 Enterprise
• This extension: 1.1.21

Description

Not available in JavaScript files

Steps to recreate

I am not sure whether I am missing something, but I installed the extension, and I don't see anything in the context menu to run it when I am in a .js file

Current behavior

No way to use the extension

Expected behavior

I should see the option to be able to run

Knockout observable properties are formatted wrong

Installed product versions

• Visual Studio: 2017 Enterprise
• JavaScript Prettier 1.1.21

Description

Formatting of model properties of type ko.observable are formatted wrong, causing code errors.

Steps to recreate

Create a class containing a knockout based boolean property

Current behavior

closeButtonVisible = ko.observable < boolean > false;
Causing the following code to be invalid: vm.closeButtonVisible(true);

Cannot invoke an expression whose type lacks a call signature. Type 'Boolean' has no compatible call signatures-

Expected behavior

closeButtonVisible = ko.observable<boolean>(false);

npm install fails

Installed product versions

• Visual Studio: 2017 Professional 15.4.4
• This extension: 1.1.21

Description

Below is the output I see whenever I open my static website project. It appears I can't upgrade the Node.js that VS uses.

11/20/2017 8:20:48 PM: npm install [email protected] (this can take a few minutes)
11/20/2017 8:20:49 PM: npm WARN npm npm does not support Node.js v5.4.1
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! Buffer.alloc is not a function

Steps to recreate

1. Configure VS2017 like me
2. Install prettier
3. Weep

Current behavior

npm is not happy.

Expected behavior

Successfully make my js pretty.

Add support for TypeScript

Installed product versions

• Visual Studio: 2019 Enterprise
• This extension: 2.1.47

Description

I would like to be able to use this extension with my TypeScript files.

Use prettier from the current project instead of the bundled version

Can this extension first try to see if the current project have prettier installed ? So instead of _installDir we'll look for project dir ?

Prettier versions change the output from time to time and the version that is bundled with the extension might create a different output than the one the user has installed locally in their project